Progressively drawing SVG paths with D3.js

I was reading Polygon's review of the PS4 and I was really impressed with their graphics. It's mesmerising to see the console "pop" out of nowhere, by seeing its outline being drawn:

I wondered how on earth they were doing this. I knew it wasn't flash, so I opened the dev tools and after a bit of digging, I saw they were using two stroke SVG properties to create this effect. The properties are called "stroke-dasharray" and "stroke-dashoffset".

These are designed to create and control dashed lines, but if you know the length of your path, you could make just one big dash and animate its length with respect to the total path length to obtain the effect of the path being slowly drawn. 

Click on this crude rendition of Polytron's logo to see it animate. You can see a jsbin of it here

This can be used to great effect to create elegant animations like the intro from the great series Fraisier. Click to see the animation.

image/svg+xml

Sweet!