Animated Line Drawing in SVG

Posted on Tuesday, July 30th, 2013

stroke-dasharray lets you specify the length of the rendered part of the line, then the length of the gap. stroke-dashoffset lets you change where the dasharray starts. Then use CSS animations or transitions (if you want IE support you’ll need to use requestAnimationFrame).

Read full article here by Jake Archibald.