Snap Animation States

There are many ways to make icons for a website. Inline SVG is scalable, easy to modify with CSS, and can even be animated. If you're interested in learning more about the merits of using inline SVG, I recommend reading Inline SVG vs Icon Fonts. With ever increasing browser support, there's never been a better time to start working with SVGs. Snap Animation States is a JavaScript plugin built around Snap.svg to help create and extend icon libraries with scaleable, editable SVG icons. Snap Animation States makes it easy to load and animate those SVGs with a simple schema.


Shape Morphing Icons in Button on Click

The idea here is use an SVG icon in a button and swap that icon out for another when the button is clicked. A button click often suggests an action has been taken, so switching icons can be a nice UI touch to show the change in context and confirm that the action has happened.

A possible use case could be a download button. The icon in the button might initially indicate that the button will trigger a download but change to a checkmark when the button has been clicked.


Adobe Illustrator Export Options

This is less of a snippet and more of a reminder for something I look up often. When creating SVG files in Adobe Illustrator, there are a couple of different methods for exporting the files. Both methods include a handful of options, some of which I totally forget what they mean and what to select.


SVG Patterns

The SVG <pattern></pattern> attribute allows us to define patterns inside of our SVG markup and use those patterns as a fill. The basic process for patterns goes something like:

  • Define a <pattern></pattern> inside of the SVG
  • Define the shapes inside of the pattern
  • Use the shapes
  • Create a new shape and fill it with the pattern


The Many Tools for Shape Morphing

To no one's surprise, I'm sure, there are lots of different ways to do the same thing on the web. Shape morphing, being a thing on the web, is no different. There are some native technologies, some libraries that leverage those, and some libraries that do things all on their own. Let's look at some of the options (with demos) and weigh the advantages and disadvantages.


Sketch Now Replicates Inside & Outside Stroke Alignment

I was just bemoaning strokes the other week:

And that's the trouble with text-stroke in CSS: you have no choice. It's center-aligned stroke only. Either of the other options [outside-aligned or inside-aligned], arguably, would have been more useful.

There still is no solution for text-stroke, but SVG has the exact same problem. It's not quite as design-ruining with SVG, since you can (and designers have been) design with center aligned strokes in mind with their vector art. Still, I'd say if we had stroke-align: [center, outside, inside]; we'd be better off.

Peter Nowell documents how Sketch now repositions the points of your shapes to replicate the different stroke alignments, if you explicitly chose those options in Sketch. Pretty useful! Since native SVG still only does center alignment, that would mean changing the stroke width after exporting would still be weird, but I suppose that's fairly rare.

The article notes how SVG 2 accommodates for aligned strokes, but that still feels a bit up in the air.


Bobby Grace, on the Dropbox Paper team:

On the engineering side, we use inline SVGs. These have many advantages. One advantage is that SVG is a well-structured format that we can manipulate with code. Paper is also using React and has a component for inserting icons.


  1. Use a single Sketch file, checked into the repo, as the place to design and house all the icons.
  2. Use gulp-sketch to extract them all individually.
  3. The build script continues by optimizing them all and building a source of data with all the icons and their properties.
  4. That data fuels the their <SvgIcon /> React component. (Also see our article).

They call it Papercons.

Now, whenever someone asks for an icon, we can just share a link to all the latest production icons. No more hunting, context switching, and long conversation threads.

Pong with SVG.js

Everybody loves the vintage game Pong, right? We sure do. What's more fun? Building it yourself!

That's why we decided to create one with SVG.js - to highlight some aspects of our library. It might seem like a complex idea for a small tutorial, but as you'll see, it's simpler than it sounds. Let's dive into it!


Randomizing SVG Shapes

SVG shapes are all built from numbers. Obvious, perhaps, but also, I'm not sure we take as much advantage of that as we could with inline <svg>. For example, it's pretty easy to generate a new pseudo-random number in JavaScript:

function getRandomInt(min, max) {
  return Math.floor(Math.random() * (max - min + 1) + min);

Now imagine a bunch of variables set to random numbers, and using ES6 template literals to stitch them together:

let newPoints = `${x1},${y1} {x2},${y2} {x3},${y3} {x3},${y3}`; 

Which makes a valid syntax for the points attribute of a <polygon>.

let polygon = document.querySelector("polygon");
polygon.setAttribute("points", newPoints);

A more detailed example of that, and a demo, over on the Media Temple blog.