All examples By author By category About

johnburnmurdoch

Spirograph effect in HTML canvas

Have a play around with the circle radii and pen placement to create your own artworks!

You can slow down the drawing speed to focus on the mechanics of the whole operation, or speed it up to get from zero to your own hypotrochoids as quickly as possible.

Hint(s):

Created based on the parametric equations set out in the Wikipedia article. The grey outer ring, inner circle, and pen tip are displayed to show how the mechanics work, but these can be hidden if you just want to see the geometric patterns that result. Either way, when downloading an image, these representations of the physical objects are stripped out, leaving only the patterns.