Skip to content
Spirographs in a doc
Spirographs in a doc
More
Share
Explore

icon picker
Spirographs in a doc

Create beautiful spirographs in Coda with this Pack
Brian Klein
Pack code

Test it out:

Size of the spirograph
⁠
000
0
⁠
⁠
Inner circle radius
⁠
000
0
⁠
⁠

Colors

1
2
Preview
Red
Green
Blue
255
3
3
12
150
255
There are no rows in this table
⁠
⁠
⁠
⁠
⁠

Why this Pack?

I remember that, as I kid, I loved to draw spirographs in class. A couple of months ago, I was reminded of spirographs and I immediately thought “these are mathematical. I wonder if I could make a Coda Pack that can draw them?”
I created this Pack to show that not all Coda Packs need to be work-related integrations (although there are
plenty of those
⁠
). This Spirograph SVGs Pack simply uses JavaScript math to produce beautiful spirographic visuals, just like when we were kids.

How it works:

The entire Pack is built upon the parametric hypocycloid equation. This equation describes the x and y coordinates for a line plotted against each integer angle of a circle.
The math is relatively easy — just plug your information into the equation, and get X/Y coordinates that can be plotted.
⁠
image.png
⁠
⁠
The magic is that Packs can handle math like sines and cosines much faster than Coda docs themselves. Plus, Packs allow you to render SVGs. The result? Something I can have as much fun with as the original Spirograph toy. I hope you enjoy this fun Pack!
🎨 This doc also uses Scott Weir's
Hex <> RGB Pack
⁠
to make RGB to Hex color conversion easy.
Want to print your doc?
This is not the way.
Try clicking the ⋯ next to your doc name or using a keyboard shortcut (
CtrlP
) instead.