Spirograph

Spirographs

"Spirograph" is a registered trademark of Hasbro, Inc. It refers to a child's toy that uses toothed wheels to generate patterns, you can see some examples here.

This page draws spirograph patterns, both the traditional 2 wheel versions and the more generic "epicycles" using 3 or more wheels. You can use the various controls to manipulate the patterns and to create animations.

Older versions of this page can be found here here, and some YouTube videos generated using this page here.

Play Area

Configure: [toolbar will appear here]
Display: Single Overlay Split Big Grid Evolve Action: Example Randomise Animate Auto Stop Reset SVG ?
	Points: ◀◀ ◀ ◁ ▷ ▶ ▶▶ num points Wheels: ◁ ▷ num wheels Rate 1: ◀ ◁ ▷ ▶ rate Rate 2: ◀ ◁ ▷ ▶ rate Rate 3: ◀ ◁ ▷ ▶ rate Rate 4: ◀ ◁ ▷ ▶ rate Rate 5: ◀ ◁ ▷ ▶ rate Size 1: ◀ ◁ ▷ ▶ size Size 2: ◀ ◁ ▷ ▶ size Size 3: ◀ ◁ ▷ ▶ size Size 4: ◀ ◁ ▷ ▶ size Size 5: ◀ ◁ ▷ ▶ size Phase 1: ◀ ◁ ▷ ▶ phase Phase 2: ◀ ◁ ▷ ▶ phase Phase 3: ◀ ◁ ▷ ▶ phase Phase 4: ◀ ◁ ▷ ▶ phase Phase 5: ◀ ◁ ▷ ▶ phase Δ Phase 1: ◀ ◁ ▷ ▶ delta Δ Phase 2: ◀ ◁ ▷ ▶ delta Δ Phase 3: ◀ ◁ ▷ ▶ delta Δ Phase 4: ◀ ◁ ▷ ▶ delta Δ Phase 5: ◀ ◁ ▷ ▶ delta Line: & nbs Colour: Background: Style: ◯ ⬤ ◐ ≡ fill Inner wheels: 1 2 3 4 Outer wheels: 1 2 3 4 Outer points: Inner size: Outer size: Outer rotate: -5 -4 -3 -2 -1 0 1 2 3 4 5 Fill Colours: + Line Colours: +   Apply Δ Num Points: Shrink: Rotate: Vary Mode: None Phase (delta in degrees) Size (scale factor) Rate (delta) Vary Wheel: None 1 2 3 4 5 Vary Amount: Fill Colours: & nbs + Line Colours: & nbs + Num Images:   Apply This option will create a new page that can be printed without all the clutter of this page. Enter the size of the image required and then press "Go". You can then use your browser's options to save or print this image. Image size: Go Current Status

Instructions

All the action takes place in the area labelled "Play Area". The sub-sections within this areas are described below.

Configure	This area contains an array of buttons that act like a tab bar. Each button will display one of the confiuration dialogs, which will appear to the right of the patter. You can get more information about what each tab bar dialog does by hovering your pointer over the corresponding button, where a popup window will appear.
Display	Below the toolbar are 6 buttons that select the type of pattern that is drawn in the "Pattern Area", immediately below these buttons. You can get more information about what each mode looks ilke by hovering the mouse over the button.
Actions	Alongside the display buttons there are some additional buttons for various functions. Hover over the individual buttons for descriptions.
Pattern Area	This appears on the left, directly below the display buttons. This is where the result of your configuration choices appears.
Dialog Area	The contents of this area change depending on the selected tab in the tab bar area. Each instance contains a set of controls that manage some aspect of the pattern that is drawn. You can get more information on these controls by hovering over the information icon that appears towards the top right of this area. Try it with the example icon below:
Status Area	Currently this shows the values of the parameters that describe the basic pattern. I may expand it to include the split and overlay attributes in the future. When the pattern is animated these values will update.

Example Images

These are full size versions of the images appear in the help pages displayed when you hover over the controls.

◀ ▶

text