SVG Line Animation for the Uninitiated

Evan Dennington
Nov 11, 2016 · 6 min read

Today, we’re going to be animating an illustration created in Adobe Illustrator, using SVG and CSS. We’ll use a technique popularized by Polygon in their reviews of the Playstation 4 and Xbox One. These are great examples of what is possible but we’re going to be working with something much simpler.

Image for post
A popsicle.

Preparing Your Vector File

Before we start animating, it’s important to take the time to properly prepare your file. This initial step requires some knowledge of illustrator. In order to achieve the drawing effect, first and foremost, your illustration will need to use strokes. If you’re only interested in how to achieve the drawing effect, you can skip this section.

Name Your Layers

You should always name your layers, and this is especially true when working with SVG’s. If you’re not used to them, SVG output can look rather complicated. Be nice to your future selves, or colleagues and take a moment to name your layers. Keep it simple — they just need to be descriptive enough to identify the path. Name the sub layers which are nested under the parent layer. You can view sub layers by clicking the dropdown of the parent layer.

Image for post
Naming your (sub)layers before export will save you a huge headache.

Exporting

I tend to export the selected vector by using File > Export Selection…This ensures that the file will crop to the bounds of your artwork and not your artboard. Here are my preferred export settings:

Image for post

Output

Remember when we named our layers before exporting? This is where that comes in handy.

Image for post

Notice the ID’s? Imagine trying to figure out which path is which by reading the path description (d=“M4808.8.395…”). Technically, you could if you were a masochist with a deep understanding of the path syntax. 😜

Optimization

Typically, it’s good practice to optimize your SVG’s using tools like SVGO, but in a case like this where you’re working directly with the markup, you’ll want to keep your original output in tact. Most optimization tools will minify and strip the file of the id’s, making it difficult to work with.

For more information on how to optimize your SVG’s take a look at Sara Soueidan’s excellent post, SVG Tips for Designers.

Animating the Line

Before we get started, it’s important to understand two properties: stroke-dasharray and stroke-dashoffset.

Stroke Dash Array

The stroke-dasharray property creates dashes in your stroke. In the example below I have a 200px line. As you can see, adjusting the value creates evenly spaced dashes and gaps.

Image for post

Stroke Dash Offset

The stroke-dashoffset property specifies the distance into the path, the pattern will start. Don’t worry too much about the stroke-dasharray settings I’ve applied. All it’s doing is alternating the length of the dashes and the gaps (5px dash, 10px gap, 30px dash, 10px gap). I’ve increased the second dash to 30 pixels to help visualize what is happening.

Image for post
The stroke-dashoffset property specifies the distance into the path, the pattern will start.

As you can see, adjusting the stroke-dashoffset, repositions or offsets the start position (by moving it backwards) of the dash sequence. In the example I’ve offset it by 15px, the amount of the first dash and gap combined, starting the stroke on the second 30px dash.

Animating the Offset

Here’s where things get fun.

If we set the dash length to the same length of the line, and offset the start position the same length (remember it moves the start position to the left) we won’t see anything, because the dash and it’s gap are both the same length. Now we’re only seeing the gap. If we animate the offset to the original value of zero, we can create our desired effect.

Image for post

Sweetening our Popsicle

Now let’s apply what we’ve learned to our popsicle.

You’ll want to figure out the length of each path. It doesn’t need to be exact. You can do this by guessing (I usually just increment by 100 until the path is completed) but if you want a more exact number you can navigate to the Document Info panel in Illustrator and select a path, it will display its length.

Image for post
Window > Document Info > Objects > Paths

To make this easier to digest, I’ve hidden the path attributes as we’ll be primarily focusing on the CSS in this example. I give each of our paths a class and applied the offset animation to them. Next, by using the technique I described previously, I gave each path a dash array and dash offset value.

Image for post

Here’s what we get.

Image for post

This looks good, but we can do better.

Final Touches

By increasing our dash values, we can speed up the animation of certain strokes. This is because it has a further distance to travel but still only 2s to complete it, which we defined in our ‘offset’ animation. We can also delay when certain strokes start animating, using animation-delay. Varying the speeds and setting delays on different strokes will create a more interesting outcome.

Image for post

And there we have it. If you’d like to see the codepen you can find it here.

One final note: This will not work with embedded SVG’s. If you’re planning on using this in a project, you will need to inline your SVG’s, be it manually or with the help of a tool. We’re a fan of react-inlinesvg but if you’re not using react there are plenty of others you can find without too much effort.

Update: 11/19/16

A Note on Browser Compatibility

A few readers pointed out issues with this technique in certain browsers. I’ve added this section for completeness.

Microsoft Edge

This technique is supported. Edge requires you to use an explicit unit for your property values. So, in our case we simply need to adjust all of our stroke properties to use ‘px’ as its unit. I’ve updated the pen to include them.

Internet Explorer

Unfortunately, Internet Explorer does not support animating the stroke-dashoffset property using css.

The simplest recommendation would be to disable the animation in IE and prioritize the display of your content. If you’d like to support Internet Explorer, there are a couple javascript solutions at your disposal.

  1. A StackOverflow user outlines a solution that updates the offset for every frame in the animation.
  2. Vivus is a popular plugin that comes with a variety of animations and options out of the box.

Huge thanks to CSS Tricks and Vox for their work on the subject. Find out more information about the technique by visiting these links.

Bitmatica Lab

Testing out new ideas, data, and strategies for innovation…

Welcome to a place where words matter. On Medium, smart voices and original ideas take center stage - with no ads in sight. Watch

Follow all the topics you care about, and we’ll deliver the best stories for you to your homepage and inbox. Explore

Get unlimited access to the best stories on Medium — and support writers while you’re at it. Just $5/month. Upgrade

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store