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.

Animating a heart shaped curve with d3.js

Sat, 14 Feb 2015 00:00:00 +0000

Just something small for Valentines day. I found the formula for a heart shaped curve on the Wolfram website and wanted to animate the line that draws these points with d3.js.

SVG Path on Visual Cinnamon

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

Animating a heart shaped curve with d3.js