Skip to main content

SVG Painter

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. You just need to set the stroke-dasharray property of each path to its total length, and then animate the stroke-dashoffset property.

Let’s paint the Xbox One controller:

And the PS4 one too:

Check out the resources used on this page: