This is a recreation of a design I made while taking Color and Design at the New Orleans Academy of Fine Arts. The original I drew with a ruler and compass and illustrated with gouache. To create the scene in SVG I followed more or less the same steps as I did sketching it by hand, just with a lot more attention paid to numerical coordinates.
The first step was to create a map of rhombus-shaped tiles to serve as a coordinate system for placing the tetrahedral mountains (I'll be referring to them as "tetras" for short). The number of columns and rows are calculated so that the map is always slightly larger than the viewport.
The tetras themselves are generated as two polygons that share a side. They increase in height towards the top of the viewport and decrease in contrast to create a sense of depth through atmospheric perspective.
In the original compass-drawn design, the ellipses were approximated using a construction of circular arcs. After trying and failing to recreate this by adding and intersecting circles, I referred to the SVG documentation. It turns out SVG has a path syntax specifically for describing curves as a series of elliptical arcs, which was the perfect tool for the job.
These pseudo-ellipses then become bands in a radiation field. The epicenter is chosen from a random intersection at the corner of four tetras. One band radiates out every two seconds. It expands until it reaches a maximum size and then it returns to the bottom of the stack to radiate all over again.
Snap.svg is an amazing library for creating generative and interactive vector graphics for the web. It greatly simplified the process of creating this design and I feel like I barely scratched the surface of what it can do.