Animating (dashed) lines and paths with d3.js & spirographs

Mon, 25 Jan 2016 00:00:00 +0000

In this blog I’ll explain how to animate both solid and dashed lines. To make things slightly less boring, I’ve created a spirograph drawing app for the examples. It came about because last week I wanted to animate a dashed line in a chart. Trying to use the technique I always apply for solid animated lines I suddenly found out that animating a dashed line isn’t trivial. It’s because of the fact that an animated solid line is, secretly, a dashed line, but I’ll go into that later.

Dashed on Visual Cinnamon

Animating (dashed) lines and paths with d3.js & spirographs