block by nbremer d7071c6a5a7206701015

Spirograph drawer - Animating solid and dashed lines

Full Screen

This is a random Spirograph drawing script, used to explain and show how solid and dashed lines can be animated through D3 in my blog “Animated (dashed) lines in d3.js with Spirographs”

The shape of the spirograph is random and the optional dash pattern is random as well. You can use the slider to make the animation go faster (which in counter-intuitive form happens when you slide to the left) or slower (when you slide right. See it as number of seconds of the animation, left is low, right is high). Remove all the spirographs to start anew by pressing “reset”.

index.html

pym.min.js