I built a small toy: the String Geometry Lab. It draws a single, simple rule on a circle, and then lets you bend it with a pile of sliders until it turns into something else entirely.
I was originally inspired by some of the cover art of Aleksi Perälä, whose music I highly recommend!
The rule
Place n points evenly around a circle and number them from 0 to n − 1. Then connect each point i to the point at
(i × m + c) mod n
That’s it. m is the multiplier and c is an offset. It’s a times table, drawn as straight lines between points on a circle, like the string art you can make with nails and thread.
With a small n and a small m you can follow every line by eye. As n grows, the individual lines melt into curves. A multiplier of 2 traces out a cardioid, and 3 gives a nephroid. In general the pattern has m − 1 cusps.
Try them: n=300, m=2 and n=300, m=3.
Bending it
The default settings are modest (120 points, multiplier 7), but there’s a lot to play with:
- Offset (c) shifts every connection around the circle. Animate it and the whole figure slowly turns inside out, cross-fading between neighbouring offsets so the motion stays smooth.
- Copies (k) layers several offset versions of the figure on top of each other, evenly spaced, which is where the more intricate, flower-like patterns come from.
- Colour is mapped around the circle by hue, with sliders for saturation, brightness, rotation and even hue animation.
- Hack mode swaps the Y coordinates of each line’s endpoints. It’s not really maths anymore, but it warps the symmetry into something stranger.
There’s also a short explanation of the formula in the controls panel. If you’re new to it, the tip there is to start with a low point count, a small multiplier, no offset, and the point labels turned on, so you can see which point connects to which.
Share what you find
Every slider is saved in the page’s URL as you move it, so any pattern you land on can be shared or bookmarked just by copying the address.
How it’s built
It’s a single page with no build step: plain JavaScript, D3 for the SVG, and a few lines of CSS. The geometry is three tiny functions: one to place the points, one to apply the rule, and one to space the copies. Everything else is sliders.