Frequently Asked Questions

CycloDraw is a free, browser-based interactive cycloid pattern generator. It simulates the mechanics of a Spirograph — a toy where toothed gears roll inside or outside each other while a pen traces intricate mathematical curves. CycloDraw lets you customise gear sizes, shapes, pen position, and colours to create unique geometric art.

Cycloid patterns are mathematical curves traced by a point on a circle as it rolls along another curve. When the rolling circle moves inside a fixed circle, the result is a hypotrochoid; when it rolls outside, it is an epitrochoid. These curves produce the intricate, symmetrical designs commonly associated with Spirograph toys.

Click anywhere on the empty canvas to place a new drawing. The gear mechanism appears at your click position. Use the sidebar controls to adjust the outer and inner gear teeth, pen position, shape, and colour. Press the Play button to animate the drawing, or Skip to render it instantly.

Yes. CycloDraw is completely free with no account required. It runs entirely in your browser — your designs are never uploaded to a server.

Yes. CycloDraw is fully responsive and works on phones and tablets. The sidebar can be toggled via the menu button. Touch gestures are supported for drawing placement, dragging, and panning.

Yes. CycloDraw is a Progressive Web App (PWA). After your first visit the app is cached locally and works without an internet connection. You can also install it to your home screen on mobile or desktop.

The outer teeth and inner teeth numbers control the size of the two gears. The ratio between them determines the pattern's complexity — specifically, the number of lobes equals the outer teeth divided by the greatest common divisor (GCD) of the two values. When the GCD is large the pattern is simple (few lobes); when the GCD is small the pattern is dense and intricate.

The pattern's complexity depends on the GCD (greatest common divisor) of the outer and inner tooth counts. A single tooth change can dramatically shift the GCD.

For example, with 81 outer / 54 inner teeth the GCD is 27, giving just 3 lobes in 2 revolutions — a very simple figure. Change the outer to 82 and the GCD drops to 2, producing 41 lobes over 27 revolutions — a vastly more complex, dense pattern.

This is a fundamental mathematical property of spirograph curves, not a bug. The number of lobes equals outer ÷ GCD(outer, inner) and the revolutions needed equals inner ÷ GCD(outer, inner). When the tooth counts share many common factors the pattern is simple; when they are nearly coprime it becomes very complex.

Pen Position sets where the virtual pen sits inside the inner gear, expressed as a fraction of the gear's radius (0.1 to 1.0). A value near 1.0 places the pen at the edge of the inner gear, creating loops that reach the outer boundary. Lower values produce rounder, more compact curves closer to the centre.

Inside placement rolls the inner gear inside the outer gear, producing hypotrochoid curves — the classic Spirograph look with inward-facing loops. Outside placement rolls the inner gear around the outside of the outer gear, creating epitrochoid curves with outward-facing loops and a larger overall pattern.

CycloDraw supports seven outer gear shapes: Circle, Ellipse, Triangle, Square, Pentagon, Hexagon, and Star. Non-circular shapes distort the rolling path, producing asymmetric and more organic-looking patterns compared to a standard circular gear.

Yes. Click on empty space to add as many drawings as you like. Each drawing is an independent layer with its own gear settings, colour, position, and scale. Use the Layers panel at the bottom of the sidebar to select, reorder, show/hide, lock, or delete individual drawings.

Click a drawing to select it — a dashed bounding box with handles appears. Drag the drawing to move it. Drag any corner or edge handle to resize; pulling outward from the centre enlarges, pulling inward shrinks. You can also set precise X, Y, and Scale values in the sidebar.

Double-click the drawing name — either in the Layers panel at the bottom of the sidebar, or in the drawing header at the top of the sidebar. Type a new name, then press Enter to confirm or Escape to cancel.

Select the drawing and press Delete or Backspace on your keyboard. You can also click the Delete button in the sidebar, or the trash icon next to the layer in the Layers panel.

Select the drawing and press Ctrl+D (or Cmd+D on Mac). You can also click the Duplicate button in the sidebar. The copy appears slightly offset from the original with the same gear settings and colour.

Click the Export button in the header. Choose a format (PNG, JPEG, or WebP), background (theme, transparent, or custom colour), resolution (1×, 2×, or 3×), and cropping option. The exported image contains only the completed curves — no grid, gears, or selection handles are included. Empty/undrawn layers are automatically excluded.

Click the Share button in the header. On devices that support the Web Share API, a native share sheet opens. On desktop browsers, the design is copied to the clipboard as a PNG image.

Exported images include a subtle CycloDraw.com watermark in the bottom-right corner. This helps others discover CycloDraw when your designs are shared online.

Delete / Backspace — Delete selected drawing
Ctrl+D / Cmd+D — Duplicate selected drawing
Escape — Deselect / close dialog
Ctrl++ / Ctrl+- — Zoom in / out
Ctrl+0 — Reset zoom to fit all
Ctrl+click / Middle-click — Pan the canvas