I saw this gif recently and was enthralled by its recursive nature, so I decided to recreate it with Javascript and Canvas as a simple programming exercise. Check out my attempt below.

I don’t do much front-end programming, so this was a bit of a challenge. At first I thought it’d be fun to do this with CSS animations, but it turns out that drawing triangles with CSS is quite complicated. I made this spinning triangle and called it quits. CSS would have required me to statically position each triangle, and as you can see, there are plenty of triangles.

I then decided to use the HTML5 Canvas element since it was a natural fit for drawing triangles. A friend recommended the EaselJS and TweenJS libaries, so after some research I went with those and it worked out quite well.

The actual code is fairly simple, and is available in this GitHub repository. Feedback and pull requests are welcome!