Spiroplot – An HTML 5 and Javascript spirograph plotter

Once upon a time I had a cool toy known as spirograph, I can remember this from when I must have been only 6 or 7 and use to have great fun drawing the shapes that it produced. It was basically a load of plastic circles with gears on the edge and you had fixed peices that and moving peices with holes for pens. The moving peices could be rotated around either the inside or outside of the fixed peices and each had a variety of hole positions for the pen. This produced all kinds of wonderful plots and patterns. So I had 5 minutes free and created an HTML 5 plotter which is included in this post below, it is capable of both the Hypotrochoid inside) and Epitrochoid (outside) types of plot. The controls are as follows, Radius A is the size of the fixed peice, if the radius value is negative then Hypotrochoid plots are produced if it is positive then Epitrochoid plots are produced. The Radius B sets the size of the moving peice. The offset parameter sets the % from the edge to the centre of the moving piece where the pen is. Original Spirograph had fixed holes for pens, but as this is software it does not have the same physical limits. The Gearing factor can be automatic which rotates the B peice at the correct gear ratio based on the A/B radius or you can use manual gearing inputs for plots that cannot be produced with physical Spirograph. The Auto Gear tick box enables/disables manual gear ratio entry. The other tick box shows/hides the tools that form the plots.


A HTML 5 spirograph plotter. If you see nothing or it does not work you need a HTML5 compatable browser and javascript enabled.

Leave a Reply