Draw a random spirograph by pressing "Add random spiro" or clicking anywhere on the page. If you want complete control; in the "Parameters" folder of the upper right control box you can see all the different adjustable variables to make any shape that you like:
- Outer wheel: the radius or number of teeth of the fixed wheel - Good numbers are 96 or 105
- Inner wheel: the radius or number of teeth of the moving wheel - Good numbers are 24, 30, 32, 36, 40, 42, 45, 48, 50, 52, 56, 60, 63, 64, 72, 75, 80, 84 - remains smaller than the outer wheel's size
- % inner wheel: similar to the hole number inside the inner wheel, but represented as the % of the inner wheel from the center (0.025 (=2.5%) is about 1 hole) - runs between 0 and 1
- α: the offset from the starting point in degrees - runs from -180 degrees to 180
- Start: after how many degrees in the calculation should the line be drawn. This can be useful to draw one spirograph loop in multiple colors
- Steps: How many degrees should the spirograph run for. Typically the inner wheel makes many full circles to complete a pattern
- Scale: change the size of the next spirograph drawn. It multiplies the outer and inner wheel sizes by scale
- Duration: how many seconds should the full drawing take
- Line width: the stroke width of the line
- Color mode: the blend mode of the next spirographs to create interesting effects of intersecting lines. Screen works best on dark backgrounds and multiply on white. Most beautiful with thick lines
- Color: set the color of the next spirograph. If you make no choice, it will loop through 3 colors
- Background: set the color of the background
Originally created as an example for my D3 tutorial "Animated (dashed) lines in d3.js with Spirographs". If you'd like to save the resulting image as an SVG I'd suggest using SVG Crowbar. Very simple and extremely useful in many situations.
Have fun!