I made this animation a few months ago. To be clear, I just made the animation. The music is Chance by Kai Engel.

I've been interested in geometric art since high school, which is why I made AlDraw. Animated geometric art is a fairly natural step further. It's a step I took a long time making, because animation is complicated and hard.

I decided to make something like this while listening to Daft Punk's Motherboard. I didn't make an animation for that song for reasons of copyright. Fortunately, there's the Free Music Archive, which is where I found Kai Engel's work. I already used that site to find music for my timelapse videos. Fortunately, this song is perfect for this kind of animation.

I made the animation using SVG animation. Most image formats, like PNG, JPG and GIF are raster based, which means they store an image by encoding the information about the color of each pixel. SVG on the other hand is vector based, which means it stores the image by encoding information about geometric objects, for example by specifying the endpoints and thickness of a line. That makes it ideal for the kind of geometric designs you can make with AlDraw, and the kind of geometric shapes this animation uses.

Likewise, most video formats store an animation by storing discrete frames. SVG animation works by letting you specify how a value varies over time. For example, you can say that a line that extends from (x1, y1) to (x2, y2) at time t1 moves to (x3, y3), (x4, y4) at time t2, and between t1 and t2, the values will be interpolated. So, SVG animation is a natural choice for making a geometric animation like this.

Unfortunately, SVG animation isn't widely supported. Most browsers will display them, but they don't include any kind of playback controls. I don't know of any video players that can play SVG animations, and even most SVG editors don't support SVG animation. So, what I wanted to do was write the SVG and then convert it into a more common video format like MP4.

But there's no software that does that. Or at least, there wasn't. So I made my own. That code is pretty bad. It's inelegant, it's inefficient and it doesn't support half of what SVG animation can do. But it's enough to make this video. Someday, I might work on improving and expanding it.

As for actually writing the SVG, and in particular, timing everything just right, that was a lot of hard work. I used an audio-editing application called Audacity to see the exact timing of each note. My wife, Molly, helped too.

You can download the SVG file here.

All told, I spent about five months working on it. About two just on the svg-to-video program, and about three on the animation itself. I didn't keep track of the amount of time I actually spent working on it, but it was probably something around 200 hours.