Animating SVG lines


I learned how to iterate along bezier curves a few years ago, and it was surprisingly simple. But despite that, it’d still be a huge pain to make SVG lines gradually appear along their paths. Thankfully, Jake Archibald has come up with a much easier (and truly cunning) way to do this – he simply adjusts (ie hacks) the dashed line settings. And he has a great detailed explanation on his blog.

Animated line drawing in SVG by Jake Archibald

[UPDATE] apparently this innovative technique has been in use before Jake (re)discovered it. D3 creator Mike Bostock talks about it here and Jan Willem Tulp used it on his D3 powered Christmas card from last year.