Spiro-Zen: the Generative Art & Hypotrochoid Toy
Remember those classic Spirograph drawing toys from your childhood? You would pin a plastic ring to a piece of paper, put your colored pen into a little gear, and spin it around to create mesmerizing, perfectly symmetrical patterns.
This brings that vintage magic to the modern web: no slipping gears, no torn paper, and no accidentally using permanent marker on your desk. Spiro-Zen is a generative art tool that lets you design complex geometric vectors directly in your browser, animate them for a little digital stress relief, and export them as professional-grade SVG files.
The "Under the Hood" Math (For the Geeks)
While you are casually dragging the sliders to make a cool shape, your browser's processor is sweating, frantically calculating the parametric equations for a shape known in geometry as a Hypotrochoid.
To plot the exact path of the line, the canvas calculates the $x$ and $y$ coordinates for every single pixel using these formulas:
$$x(\theta) = (R-r)\cos\theta + d\cos\left(\frac{R-r}{r}\theta\right)$$ $$y(\theta) = (R-r)\sin\theta - d\sin\left(\frac{R-r}{r}\theta\right)$$
But wait, there's more! How does the tool know exactly when to stop drawing so the shape perfectly connects back to the start without overlapping and creating a bloated file? It calculates the exact number of orbital trips required by finding the Greatest Common Divisor (GCD) of your chosen rings:
$$\text{Trips} = \frac{r}{\text{GCD}(R, r)}$$
In short: we do the heavy mathematical lifting so you can just sit back, vibe, and watch the pretty lines draw themselves.
How to Build Your Pattern
You don't need a maths brain to use the tool. Just play with the controls to see what happens:
- Outer Ring (R): Think of this as the large, stationary plastic boundary. Changing this alters the overall footprint of your design.
- Inner Wheel (r): This is the moving gear. The relationship between this and the Outer Ring defines how many "petals" or points your final shape will have.
- Pen Offset (d): This determines where the "pen hole" is located on the inner gear. Pull it close to the center for smooth, soft loops, or push it far out for sharp, star-like spikes.
- Line Color: The default line colour is blue, but you can use standard colour swatches and pickers to find or mix whatever colour you prefer.
- Randomiser: The randomiser is designed to surprise you with different slider settings and line colours. It's also built to ensure that no matter how many times you hit the "Randomise" button, you'll always get a high-contrast, visible color against the white background.
Zen Animation Mode
If you need a moment of focus, check the Animate Draw and Zen Loop boxes. Adjust the speed slider to your liking, and the browser will slowly draw the hypotrochoid point by point. Once it finishes, it will seamlessly reverse direction, "undrawing" the shape. It’s a hypnotic, breathing piece of generative art right on your screen.
Exporting for Professionals (Adobe/Affinity, Canva and Microsoft Office)
This isn't just a toy; it's a lightweight asset generator for designers and marketers. When you find a pattern you love, hit the Export SVG button. Unlike standard JPEGs or PNGs, an SVG (Scalable Vector Graphic) is mathematically generated code. This means you can:
- Open it in Adobe Illustrator or Affinity Studio: open it as editable vectors for full edit control and integration into other graphic productions.
- Drop it into Canva: Upload the SVG to your Canva library, and you can instantly change the line colors to match your brand palette.
- Use it in Word or PowerPoint: Import it as a picture, then right-click and select "Convert to Shape" to add glows, shadows, or gradients.
- Scale it infinitely: Because it relies on the maths above rather than pixels, you can print your shape on a business card or a billboard, and the lines will remain razor-sharp.