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):

• See what happens if you reduce the inner circle’s radius below zero(!) (clue)
• In a deliberate mistake (😀), I made it possible to have the inner circle larger than the outer one. The bad news is, this is impossible in the real world. The good news is, it can produce cool results.

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.