Live Example

So why all the JavaScript?

Most of the examples you see of SVG line animations use JavaScript. That's because it's hard to know what the length of that stroke actually is. We just used 1000 in our example because that happens to be about the right length.

Then use it however you will. Those articles I linked to at the top go far more into all this, so I'll let you consult those for more fancy stuff. I just wanted to cover the concept so perhaps it can click for you too.

I also found that this doesn’t work in IE. Snap.svg is a pretty great alternative. All the techniques and basic theory here hold true; you create a path with a given length, and then set strokeDasharray and strokeDashoffset to the same length. Then you can just do path.animate({strokeDashoffset: 0}, 1000); for the same effect (1000 is time in ms).

Yeah that is weird. I guess it’s because when you do the dash thing, there always has to be at least one dash and one gap of equal length. So depending on where that dash or gap line up, is what portion of the stroke appears to be filled in.

Setting stroke-dasharray: 1000; is just shorthand for setting stroke-dasharray: 1000 1000;, i.e., a 1000-pixel dash followed by a 1000-pixel gap. From the specs:

‘stroke-dasharray’ controls the pattern of dashes and gaps used to stroke paths. <dasharray> contains a list of comma and/or white space separated <length>s and <percentage>s that specify the lengths of alternating dashes and gaps. If an odd number of values is provided, then the list of values is repeated to yield an even number of values. Thus, stroke-dasharray: 5,3,2 is equivalent to stroke-dasharray: 5,3,2,5,3,2. So the idea is to adjust the offset so that the gap covers the entire path. But, see my comment below for a caution and an alternate approach.

Just a heads up that not all browsers interpret the stroke-dashoffset property the same way, and the way you’re defining the animation could cause unexpected results. See this Stack Overflow Q&A.

I’m not quite sure how the offset is getting interpretted in those cases, but the specs really aren’t very specific about what should happen when the dash pattern is twice the length of a closed path and you start with the pattern offset the entire length. The end effect is that some browsers interpret the switch to a zero offset as going from a fully-stroked line to nothing, and some interpret it as going from nothing to fully stroked. Which doesn’t make much difference if you’re setting the animation to alternate infinite, but it makes a big difference if you want to draw the line and leave it there.

I would recommend doing the entire animation with the stroke-dasharray property:

Will that value be “static”, meaning will it always be the same for the same given path? So that it would be enough to use JS once to get its length, and then one could put that fixed value into the CSS (yeah, I know, it’d be kind of a ”magic number”, but still).

Or is it dynamic, depending on … what? Browser, display size of the SVG image, …?

The length is given in the coordinate system units for the path element, and therefore is independent of any scaling of the SVG as a whole. However, the specs allow browsers to guesstimate the exact length using an algorithm of their choosing, so the results might not always be exactly the same. To control for that, you can set the “pathLength” attribute on your path element to the value that you’re using for animations, and the browser is supposed to adjust its calculations accordingly.

In other words, to ensure inter-operability you can use Javascript to figure out the length of your path on your development computer, and then declare that length in a pathLength attribute on the path element, and then safely use it in your CSS animations without worrying that things will be slightly off on a different browser. You could skip the calculation and just declare the pathLength to be a nice round number of your choosing, but then you’d want to do some in-depth cross-Browser testing to make sure they all make the appropriate calculations…

Hi,
I recreated this and I would like after the animation is drawn to stay on the page. How would I go about that? I took out the infinite and it only plays once. I would like it to stay on the page.
Any help would be great.
Thanks!