Arithmetic Curves

If you’ve been to my home, you’ve likely seen a series of framed pictures on the wall running down the hallway - circles filled with geometric patterns, each numbered, and reminiscent of a spirograph. These were gifted to me by a friend – a math guru – who at one point explained that they are multiplication tables he drew in code.

He used to have a website where you could watch them come to life in animated form, but the site is no longer online. From time to time I’ve missed going there just to watch the patterns evolve. I decided to recreate a bit of his magic here.

I admit to quickly forgetting his explanation of how they work, so I had to do a bit of research.

The code to do this is surprisingly simple. It places evenly-spaced points around a circle, then connects each point to another based on multiplication. Point 0 connects to point 0. Point 1 connects to point 2 (if multiplying by 2). Point 2 connects to point 4. Point 50 connects to point 100, which wraps back around to point 0, the same way hours wrap around a clock face.

// Place 100 points evenly around a circle
for (let i = 0; i < 100; i++) {
  const angle = (i / 100) * 2 * Math.PI;
  const x = centerX + Math.cos(angle) * radius;
  const y = centerY + Math.sin(angle) * radius;
}

// Connect each point to its multiplied partner
const multiplier = 2;
const target = (i * multiplier) % 100;  // The wrapping happens here
drawLine(pointFrom, pointTo);

That wrapping – modular arithmetic – is where the magic happens. The % operator keeps numbers within bounds. So 50 * 2 = 100, but 100 % 100 = 0, wrapping back to the start. The lines don’t spread evenly. They bunch up in some places and avoid others entirely. The pattern emerges not from any master plan, but from the simple rule applied everywhere at once. Change the multiplier even slightly, and the entire structure transforms. Gradually increase the multiplier and the patterns come to life in unexpected ways.

It’s really fun to play with or just sit and watch. Click the link or image below (34 x 100 for those curious) to open an interactive visualization.

Open Visualization →