SVG Line Animation

You know that cool animation that Polygon used in their Xbox One and PS4 reviews, where SVG images appeared to draw progressively? It’s really easy to do.

Let’s draw the Xbox One controller:

And the PS4 one too:

The way this works is by setting the stroke-dasharray property of each path to its total length, and then animating the stroke-dashoffset property.