Guilloche/Spirograph-like Design App with PNG/SVG save

I was in our local TAP Plastics last week and saw a few large, round disks of acrylic on the wall that they had laser-etched a spirograph-like pattern into (there was a fluorescent-orange one that didn’t even need edge lighting to look super-cool).

I wasn’t sure where they got the pattern to etch, but I knew that it should be pretty easy to write an app to do it. Of course me being me, I kept adding more and more features, which of course included saving as either a PNG for etching or SVG for plotting/scoring/editing/whatever. :wink: There are enough parameters to allow for tons of variation and designs.

Looking online I found that these are closer to a Guilloche technique than a Spirograph, though the latter can look like the former. Regardless, they’re cool and I can’t wait to see some etched!

Similar to my other app, this one uses Processing and a library for the UI. I can post the instructions later if needed, or you can search for the Generative SVG thread.

Enjoy! :relaxed:


I am always impressed when someone writes a program
I had headaches trying to do a hello world in college
This is really cool. Thanks for sharing


Very well done. Easy to use. Cool results. Thanks so much.


That’s totally cool! (Makin’ me dizzy though!) :stuck_out_tongue_winking_eye:


That’s fantastic! But how do normal, non-techies use it please?
(I’m on a Mac)


I think he described the process when he posted his other software.

This is SO cool @gwygonik ! Thanks so much for doing this. I’m tremendously impressed by anybody that can take a look at something and whip up a program to create it.


“To run this app you will need Processing ( and the ControlP5 library (Sketch->Import Library…->Add Library…)”

Only takes a minute or so to get it set up. Processing is a handy programming environment to have, particularly if you have an interest in pursuing Arduino interfacing.


Sorry, you’ve lost me already!!! :scream:




OK, one step at a time.

Go to and download/install Processing.

Download the spiro.pde file at

Double click on spiro.pde and it should open in Processing. (I’m assuming Macs launch things by double-clicking. Do you guys still have only one button on your mouse?)

Before clicking the little “run” button, go to Sketch->Import Library…->Add Library… and type “ControlP5” to locate this library. Confirm that you want it installed.

Now click on the little run icon.

Move the sliders around for different shapes.


This is, in a nutshell, all there is to it! :smile: Thanks @Scott.Burns for this - I should have at least linked to the other thread in my initial post, or just posted the instructions.

Here are the more verbose steps, in case Scott’s aren’t working for you:

First, you have to install Processing (
Note: you don’t have to donate to download - just choose “No Donation”

Launch Processing (on OSX it comes in a ZIP file, which you can double-click to extract the app, which you can then put in your Applications folder, or leave where it is. You might have to explicitely allow the app to run depending upon your security settings).

Processing uses “Libraries” of external code for some things, and I used a library for the UI. Since the library is maintained by someone else, I don’t include it with my app. So to install this library:

In the Sketch menu, select: Import Library -> Add Library…

Scroll down the list of Libraries in the window that opens, or use the search field to find “ControlP5” and select “Install”. After it is done installing (shouldn’t be more than a few seconds) you can close the Library window.

That’s it for getting Processing ready. Now, to get the code:

Go to my github repository (

On the right side is a green button “Clone or download”. Click it!

In the pop-up menu that opens, choose “Download ZIP” and save it somewhere you want

Unzip the file and it will create a folder named “Spiroh-master”

Rename the folder to just be “Spiroh”

Double-click the “spiroh.pde” file inside that and it will open in Processing

Click the “Run” button at the top of the Processing code window (it looks like a video Play button :arrow_forward:)

The app should run without issue, and you should see the UI and a sample image. You can now tweak parameters by using the sliders, and then click the “Save PNG” or “Save SVG” button to have a file to do whatever with :metal:

If the app does NOT run, there would be errors in red below the code. Message me with what that says and I’ll try to help out. Every machine is different, so I can’t say if there are problems with your setup or any “known issues” – it works for me :stuck_out_tongue_winking_eye:

Hope that helps!



Those are some wild eyes. :relaxed:

1 Like

Gaaaahhhhh! I’m gonna have to quit putting together the highlights reel…job description does not include tossing my cookies every time I click on a link… :no_mouth:


Oh, now that is just downright unsettling… :fearful:


Sorry @Jules and @rand … it is supposed to be uplifting. See how it says “happy”? (lol)
Is this less creepsters?


It’s not the creepiness…it’s the spirographs! Urf!
(Did it to me again!..)


OK, that is much better :slight_smile: – and very cool.

1 Like

I can’t wait to try!

1 Like

Er, not since the 90s I think!!

1 Like