What is CycloDraw?

CycloDraw is a free, interactive cycloid pattern generator that runs entirely in your browser. Inspired by the classic Spirograph toy, it simulates toothed gears rolling inside or outside each other while a virtual pen traces intricate mathematical curves called hypotrochoids and epitrochoids.

Unlike a physical Spirograph, CycloDraw gives you complete creative freedom — adjust gear sizes continuously, choose from seven outer shapes, place multiple drawings on an infinite canvas, and export your designs in high resolution.

How It Works

The mathematics behind CycloDraw is elegantly simple. Two gears mesh together: a fixed outer gear and a rolling inner gear. A pen attached to the inner gear traces a curve as it rolls. The shape of the resulting pattern depends on three key parameters:

Tooth counts — The ratio of outer to inner teeth determines how many lobes the pattern has and how many revolutions the inner gear makes before the curve closes.
Pen position — Moving the pen closer to or farther from the centre of the inner gear changes the depth of the loops.
Gear placement — Rolling inside (hypotrochoid) or outside (epitrochoid) produces fundamentally different curve families.

CycloDraw extends the classic circular Spirograph by supporting non-circular outer shapes — ellipses, triangles, squares, pentagons, hexagons, and stars — which distort the rolling path and produce organic, asymmetric patterns.

Features

Multiple drawings — Place as many independent drawings as you like on the canvas, each with its own gear settings and colour.
Real-time animation — Watch the pen trace the curve in real time, or skip ahead to see the finished result instantly.
Layer management — Reorder, rename, show/hide, lock, and duplicate drawings.
Drag and resize — Click to select, drag to move, and use handles to scale any drawing.
Preset gallery — Browse curated patterns to get started quickly.
Export — Save your designs as PNG, JPEG, or WebP with configurable resolution, background, and cropping.
Share — Share or copy your design to the clipboard in one click.
Dark and light themes — Switch between dark and light modes.
Works offline — CycloDraw is a Progressive Web App (PWA) and works without an internet connection after your first visit.

The Mathematics

The number of lobes in a pattern equals outer teeth ÷ GCD(outer, inner), where GCD is the greatest common divisor. The inner gear completes inner teeth ÷ GCD(outer, inner) full revolutions before the curve closes.

This means small changes in tooth count can produce dramatically different patterns. For example, 81/54 teeth (GCD = 27) gives a simple 3-lobe figure, while 82/54 teeth (GCD = 2) produces a dense 41-lobe design.

Technology

CycloDraw is built with React and rendered on an HTML5 Canvas using offscreen compositing for smooth performance even with complex multi-layer designs. The site is a static Hugo site deployed to Cloudflare Pages.

Free and Private

CycloDraw is completely free, requires no account, and never uploads your designs to a server. Everything happens locally in your browser.