Home page


SVG Spirograph Page

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 patterns generated 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.

[toolbar will appear here]

Points: num points
Wheels: num wheels
Wheel 1: num points
Wheel2: num points
Wheel 3: num points
Wheel 4: num points
Wheel 5: num points
Wheel 1: num points
Wheel 2: num points
Wheel 3: num points
Wheel 4: num points
Wheel 5: num points
Wheel 1: num points
Wheel 2: num points
Wheel 3: num points
Wheel 4: num points
Wheel 5: num points
Line: fill
Colour: fill
Style: fill
Animate:
Δsize:          
Δrate:          
Δphase:          
Δpoints:
Shrink:
Colour 1:
Colour 2:
Images:  
Actions:
Symmetry: symmetry

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:

Mode: mode

Current Status

Evolution

Instructions

The display consists of three areas, the pattern, the controls and the current status. How these are arranged will depend on the size and shape of your dispay. The pattern should be obvious, the controls are accessed by a tool bar that contains tabs like "Setup ▼" and "Wheel 1 ▼" and the current status is identified by a heading.

The tabs introduce additional controls:
Setup

This allows you control the number of wheels used to define the pattern, the number of points used to draw it and the drawing mode.

For the wheels and points the arrow buttons will change these values (within limits), the open triangles by '1', the solid triangles by '10' and the double triangles by '100'.

The active values are displayed alongside the buttons and in the "Current Status" display.

A larger number of points will draw smoother images, a small number can produce other interesting effects.

Mode

The mode menu is always visible. Mode determines how the paterns are displayed. There are currently three:

SingleDraws a single pattern
OverlaySuperimposes a number of patterns. The sequence of patterns is generated using the values in the "Overlay" menu.
GridDraw a sequence of patterns in a grid. The sequence is generated using the values in the "Overlay" menu.
Evolve Switches to Evolve mode. Most of the standard controls are hidden and a set of images is displayed.


These are all children of the original image, with one attribute changed. If you click on one of these the choices will be replaced by a new set based on the image you clicked on. By clicking on the most interesting image you can navigate around the pattern space. The number of images is controlled by the 'images' parameter in the overlay section.

To return to normal more click the "Exit" button. The last pattern you clicked on will become the main one.

Wheel Size

This section allows you to control the relative sizes of the wheels. The pattern is normalised so that the total of the sizes is the radius of the whole. Only the active wheels are considered, but you can change the values of the others for later.

The open triangles change values by '1', and solid ones by '10'. The active values are displayed alongside the buttons and in the "Current Status" display.

Wheel Rate

"Rate" is the number of rotations the wheel makes while drawing the pattern. To avoid tracing over the pattern multiple times you should set up the wheel rates so that they don't have a common factor. A negative rate turns the wheel in the opposite direction.

The symmetry of a two wheel pattern is the difference between the two rates (after removing common factors) so, for instance, [3,5] has a symmetry of 2 and [3,-5] a symmetry of 8 as shown in these images.


Rates 3 & −5

For more wheels the symmetry is the highest common factor of the differences of all the pairs (after removing common factors). For random rates this usually turns out to be 1, ie no symmetry.

The open triangles change values by '1', and solid ones by '10'. The active values are displayed alongside the buttons and in the "Current Status" display.

Wheel Phase

"Phase" determines the starting angle of the wheel. Useful when creating animations, especially with more than 2 wheels.

For two wheels changing the phase has the effect of rotating the whole pattern. The values are in degrees.

Fill

Fill allows you to change the line colour fill colours and how the fill is applied. Click on one of the coloured circles to select the matching colour. The fill syle can be "none" (the open circle), "nonezero" (the solid circle) or "evenodd" (the half filled circle). These values are taken from the SVG specification on how polygons are shaded. "nonzero" fills the whole pattern, and "evenodd" fills alternate sectors.

The active values are displayed to the right of the buttons and in the "Current Settings" area. Examples of each type can be seen below.


NonZero

EvenOdd

Dashed

The dashed mode isn't very exciting when used on simple patterns but can produce more dramatic images when combined with wheel rates that are a significant fraction of the number of points, say around one quarter. This example has rates of 3, -4, 397, combines with 1600 points.

Animate

This section has three buttons, "Animate", "Auto" and "Stop". Clicking animate will start animating the pattern by repeatedly changing the phases of the wheels. The phase change rates are selected at random so repeatedly clicking this button will produce different animations. The "Auto" button will have the same effect, changing th phase deltas every 5 seconds. The phase values can be seen in the "Current Settings" area.

For two wheels the animations just rotate the whole pattern, this feature is a lot more interesting with three or more wheels.

The "Stop" button stops the animation and clears the "auto" state.

Overlay

This section allows you to configure a set of delta values for the wheel rates, phases and sizes.

The "Apply" button updates the overlay parameters.


Overlay Example

Overlay Example

Extras

Two sections, "Actions" and "Symmetry". Actions has four buttons:

Example

Creates an example pattern. This one shows how combining high wheel rates with a small number of points can produce interesting effects. Try turning on animation after selecting this.

You can also try varying the number of points to see how this affects the pattern. The changes are quite spectacular.

Randomise

Changes one of the pattern attributes at random. Repeated clicking will allow you to explore many patterns.

Make Symmetrical

Changes the wheel rates and the number of points to make the whole pattern symmetrical. The symmetry is taken from the first two wheels.

Reset

Changes the wheel rates and the number of points to make the whole pattern symmetrical. The symmetry is taken from the first two wheels.

The Symmetry section has two buttons which will increase or decrease the symmetry of the pattern by adjusting the wheel rates and the number of points.

Print

Creates a printable copy of the current pattern on a separate page. The size parameter can be used to adjust the pattern size to your printer. The "Go" button will create the image.

Other pages

 

(c) John Whitehouse 2010 - 2017