5 Best Online Spirograph Pattern Generators
Have you fiddled with an online spirograph pattern generator?
I bet you have!
Well, you can think of it as advanced math made easy and entertaining to use by anyone of any age.
More specifically, it’s a device that produces mathematical curves, technically known as hypotrochoids and epitrochoids.
The original device had the name Speiragraph.
Its inventor’s name was Peter Hubert Desvignes.
He devised the machine to help prevent banknote forgeries.
The first Spirographs came with different-sized plastic rings that had gear teeth.
Some rings have teeth on the outside while the others on the inside.
These allow the smaller ones to go into the larger ones.
By placing a ballpoint pen into the gear, the user could spin it around and draw geometric shapes.
Table of Contents
Where to Find Online Spirograph Generators
Author’s note: All generators tested on an Intel Core i7-4790k CPU, so you’ll probably see different usage percentages if you check your system’s resources while experimenting.
1. Spirograph Pattern Generator
This first option is the simplest one to use in this list.
The controls are limited.
First, top left of the page, you can find the ratio settings.
From here, you have direct control over the complexity of the pattern you’re creating.
Setting the left and right sides of the control to the same number, let’s say 2 to 2, you’ll create a circle.
Be mindful that the left side cannot exceed the right, so a setting 2 to 3 is impossible, for example.
Next up is the option to show wheels and multiple pens.
Show wheels display on-screen where the moving and static wheels would be if this were a real machine.
Multiple pens add more pens to the moving wheel, thus making the geometric construct denser.
Next in line is the pen position.
Moving the scroll on this option only works when Multiple Pens is not selected.
This pen position is especially great if you want to see where the imaginary pen you’re placing on the moving inner wheel is.
The benefit here is that the option easily changes the shape of the geometric form, and coupled with show wheels, gives the viewer an accurate representation of how the actual device would work in the real world.
Next up, and the final set of options, are animate construction, show result, and export SVG.
Animate Construct
Animate construct will show the user how the inner wheel moves until it forms the geometric figure they’ve set up using the previous controls. There is no speed option for the visual representation, so users might have to wait for more complex shapes.
Coupled with Multiple Pens, this option is very mesmerizing to observe. The option show results can stop the animation immediately and display the final product, so if the drawing process gets too boring for you, you can easily skip it.
The final option allows the user to export their creation to a scalable vector graphics file, hence using SVG in export SVG.
Below the drawing board, users can scroll to find a good and short explanation about what a spirograph is and how to operate this particular generator.
There’s even a mathematical explanation about how the displayed curves change for those interested in the science behind the whole thing.
A final note on performance.
This generator has a limited amount of controls, so its capabilities aren’t that great, and the CPU demands aren’t big either.
During my tests, the CPU usage on my PC never went above 5%.
All and all, this generator deserves a solid recommendation for anyone wishing to quickly fiddle with a Spirograph.
Needing only basic internet browsing abilities for its operation, so even a young child can have fun with this one.
2. Seed Code Spirograph
This generator doesn’t have as many complex options as the previous one but will still satisfy any user looking for more than only a few altering settings.
On the landing page, you will find all the relevant controls to your left.
This generator is a bit sparse on instructions, so here’s a few tips on using it.
At the very top is a drop-down menu that allows for a few choices of pre-made Spirographs.
The different shape presets give the user a good and easy starting point.
Moving down, the next option is for the stator.
Now, this controls the radius of the circle you’ll be using.
From here, you can make one of the rings to be bigger than the other if you wish.
Be careful with how big you set this number to because it might make the shape move to the outside of your monitor.
The Rotors
Next up are the rotors.
The same rules apply here, change the radius of the rotor to the desired amount.
Next to the number value, you can choose from h and e as options.
These options will change the rotor from a hypotrochoid to an epitrochoid.
If more rotors are needed, the green button can provide those for you.
Unfortunately, if a specific rotor needs deletion, the generator cannot provide the function.
It can only delete the last one added until the user removes the one they desire.
Adding a 0 for the rotor’s radius is not recommended as it tasks your PC’s video card to 100%.
The options for the pen are next.
At this point, the user can change the color, width, and radius of the pen.
Below the pen settings, you can alter the speed with which the drawing gets displayed on the canvas.
The advanced buttons are all together on two rows and give control over zooming in and out, deleting the created shape, rotating the orientation of the Spirograph, and visibility of the circles.
The last button available leads to the creator’s Github page.
Clicking it will lead the user to the source code for the generator and a few words from the creator.
It is stated that Safari users will not get the best drawings available and that the best performance of the generator is when running it in Google Chrome.
Performance-wise, this generator drew upwards to 12% when running more complex shapes.
While easy enough to use, this generator lacks a proper user guide and can easily overburden the user’s PC.
3. HTML Spirograph
This generator has a lot more complexity and a bigger canvas to show you your creation.
Note that on the left-hand side of the page is a myriad of options.
Being too many to describe one by one, I’ll highlight the most important ones. Controlling the visualization is done from the button Start/Stop.
The Redraw* button resets the canvas and begins to visualize from the beginning.
The Dim option reduces the brightness of the lines to fit the user’s requirements.
The Clear* button stops all animation and clears the background to a solid black.
The next big addition here is the Randomizer options.
There are four options to choose from for randomization – A, B, C, and D.
The randomization buttons show off the generator’s capabilities very well.
They are visible further down.
If a randomized shape pleases your eye, you can freely fidget with it using the advanced controls.
Below the randomization options are controls that allow the user to zoom in or zoom out and control the speed of drawing, naturally, to speed up or slow down.
The style of pen used is subject to change as well.
Pen Options
The options given are – C, R, A, Z, and Y.
Coupled with the randomization option, the pen styles can give a very interesting result.
The last of the main options is the brightness control, which changes how visible the lines displayed are.
Graduating from the simple buttons and going further down, the user can get deep into the rabbit hole of spirography.
These options allow for precise control over the way the lines curve, their angle, and their offset on the page.
If the user is trying to create a specific shape, these are the options they need to learn.
At the end of the fields in which users can add numbers is an option to download the latest creation and upload an existing image.
Below these final two buttons, the creator has added some useful information about how and why the generator came to be.
The creator goes into further detail on using the generator, what each button does, and a few helpful tips.
What I missed the first time I was fiddling with the generator were the user submissions added on the screen’s right side, only a mouse scroll down.
Clicking on any one of them will change the user’s presets to the uploaded image’s.
After the settings load, each user is free to alter the existing image to suit their needs.
Finally, here’s a few words on performance.
This generator is very recourse intensive.
On more complex settings, CPU usage jumped to 20%.
Video card usage is big as well.
Users should exercise caution when attempting complex shapes.
4. Spirograph Art Creator
The next generator on the list has a minimalist design and is straight to the point.
Users can find a drop-down menu from which to choose several ready presets on the page’s top-left.
Choosing any of them will prompt the generator to begin drawing them.
Just below the preset menu is the advanced controls.
Clicking that option allows the user greater control over the exact shapes they are trying to create.
In addition to more control, a new drop-down menu with advanced presets is now available to users.
Above the visualization area, users can find the randomization button and a link with some helpful instructions.
Below the visualization window are the basic and advanced controls.
Helpful tooltips appear whenever hovering with the mouse cursor over the input fields.
Main options are present as always, pause, clear, save and draw.
These buttons have the same functionality as previous generators, and while the design appeal isn’t very great, they are easy to understand.
Controls for Variety
Altering the widths of lines, the number of cycles the drawing takes to complete, and how many loops an invisible wheel will make are all packed close together.
The option to change the background is present as well the preset styles given are – black, white, and gray.
If the user likes, they can change the background color to whatever they wish as long as they know the RGB code.
While this generator lacks visual fan-fare, its shapes seeming a bit dull in color, there is a great depth of customization available.
Without using the advanced options, a user will still have enough to be pleased with the functionality, but the advanced options give this generator its wings.
The minute detail with which the user can alter the drawn shape is impressive.
It might take some time to get used to the controls available, but the generator will not disappoint once done.
While testing out the generator, I found it to not be that demanding on the PC.
The maximum CPU resource recorded was no more than 5%.
5. Spirograph
The controls of this pattern generator is once again simple, but in this case, the drop-down menus can be minimized or outright closed.
Closing the controls can give the user an unobstructed view of their newest creation, so if viewing pleasure is what you’re after, this generator is great for you.
The Drawing menu has the option to add the spiro, meaning spirogram.
It’s the button to use when you’ve entered the desired parameters for your creation.
Below the normal spirogram is the option to add a dashed one.
This means that the lines will not be whole but rather made up of dashes.
Dynamic changes to the settings are visible after using the add spiro or add dashed spiro buttons.
As ever, a randomization option is present.
The generator provides the randomized pattern settings, so if the user is inclined to use it, they can.
Clicking on the canvas adds a random spirogram as well, settings and all.
If clicking the canvas is your preferred method, be sure to use the remove last option if a spirogram isn’t to your liking.
Each time the user adds a spirogram, its color is automatically changed, so the canvas doesn’t clutter.
Parameters Menu
The second big drop-down menu is named Parameters.
The changes for the size of the outer and inner wheel reside here.
Numerical changes are extremely easy.
Changing desired values is simplified, so the user has either the slider next to each setting or a box for numerical values.
Control over the outer and inner wheel of the Spirograph is available here.
The option % inner wheel represents where the hole in the inner wheel will reside, so for more extravagant shapes to appear, the user can fiddle with this control specifically.
The option just below similarly controls the offset from the starting point in degrees.
Start controls how many degrees in the calculation should pass until the Spirograph draws a line in multiple colors.
Steps controls how many degrees the Spirograph will run for.
Scale changes the size of the next spirogram drawn, and so it helps distinguish when drawing multiple patterns.
Using Duration, the user can alter for how long the full spirogram will take.
Color mode can blend the next spirogram’s colors, creating interesting effects when intersections occur.
The generator’s author recommends that the mode works best on dark backgrounds and spirograms with thick lines.
The color option changes the next spirogram’s color, and if the user makes no selection, three colors loop.
Through the background option, the color can change to what suits the user.
This generator provides a very easy-to-use and intuitive control scheme.
Making changes fast and with minimal hassle.
Info Panel
At the bottom left is an info panel by the creator of the generator, in which the user can find an explanation for each option.
Creating a spirogram with this generator is a delight, and when an extravagant one gets created, the user can close every panel and just enjoy the show.
With such a pretty spectacle comes a performance price, however.
While on lower settings, everything runs smoothly, adding many spirograms, the CPU resource cost grows.
During testing, the CPU usage went as far as 20%.
So, readers using slower machines, please be cautious when adding many spirograms to your pattern.
Final Thoughts
Spirographs can display how beautiful math is.
You can create a myriad of shapes just by entering some numbers.
Moreover, a minute change in the wide variety of settings can create totally different shape.
As the complexity of your creation grows, so does its ability to mesmerize you.
For more helpful readings, do check our articles below.
10 Best Portable Monitors for Graphic Design to Tag-Along With You
Leave a Reply