Design complex geometric patterns with this free online spirograph and hypotrochoid math art generator. Export high-quality SVG and PNG files instantly in browser.
AI Generation Prompt
Spirograph & Hypotrochoid Math Art Generator
A professional-grade, browser-based tool for visualizing mathematical curves. This application allows users to interactively manipulate the variables of hypotrochoid and epitrochoid curves to create intricate, geometric vector art.
Core Features
- Real-time Parametric Control: Adjust R, r, and d parameters using smooth-sliding input controls for immediate visual feedback.
- Color Customization: Dynamic color picker for strokes and background, including multi-color stroke cycling.
- Vector Export: Native browser support to export generated patterns as high-resolution PNGs or resolution-independent SVG files.
- Automated Animation: Toggle an auto-rotation feature to watch the hypotrochoid "draw" itself in real-time.
- Randomizer: A 'surprise' button to generate complex, non-repeating mathematical ratios for instant inspiration.
- Preset Library: A set of common mathematical ratios (e.g., Star, Flower, Vortex) to help users understand the underlying mechanics.
UI/UX Specification
- Layout: A classic split-pane "SaaS" layout.
- Left Sidebar: Contains the control panel (sliders for math variables, color pickers, animation toggles, and export buttons).
- Main Canvas: A full-screen or large centered canvas area that responds to window resizing. The canvas uses Paper.js to handle vector math.
- Aesthetics:
- Color Palette: Clean white backgrounds (
#FFFFFF), neutral light grays (#F8F9FA) for controls, and a vibrant primary accent color (e.g.,#3B82F6or a calm#6366F1) for buttons and sliders. - Interactions: Smooth 200ms transitions on all hover states. No jarring transitions. Labels update as sliders move.
- Responsive: Controls collapse into a bottom or top drawer on mobile devices to ensure the canvas remains the focus.
- Color Palette: Clean white backgrounds (
Technical Implementation Directives
- Single File Architecture: All logic (HTML, CSS, JS) must be contained in a single file. Use a CDN for
paper.js. - No LocalStorage: All state must be handled in variables. No persistent data storage is allowed, as it will crash in the sandboxed iframe environment.
- Sandboxed Compliance:
- Do not use
alert()orprompt(). Use a custom hidden HTML<div>to act as an export modal. - All links must include
target="_blank" rel="noopener noreferrer". - If the browser window resizes, hook the
resizeevent to automatically resize the canvas via Paper.js to prevent distortion.
- Do not use
- Performance: Throttle the canvas re-rendering logic when sliders are dragged to prevent stuttering on lower-end devices.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How do I create specific spirograph patterns?
To create specific patterns, adjust the fixed circle radius (R), the rolling circle radius (r), and the pen offset distance (d). These three variables define the mathematical trajectory of the hypotrochoid curve. By fine-tuning these values, you can achieve everything from simple geometric star shapes to highly complex, interlacing loops that fill the entire drawing area. Experimenting with prime number ratios often yields the most balanced and aesthetically pleasing results.
Is my data saved in the browser?
This application does not store any user data, images, or configuration settings. It operates strictly in your browser's memory, ensuring that every session is ephemeral and completely private. Once you refresh or close the page, the application state is reset. If you wish to save your artwork, please use the provided export tools to download your creations directly to your local device before leaving the page.
What technologies power this art tool?
This generator utilizes the Paper.js vector graphics library, which handles the complex mathematical calculations required to render smooth, scalable hypotrochoid curves. This ensures that the generated lines remain sharp and clean at any resolution. The interface is built using standard HTML5, CSS3, and modern Vanilla JavaScript. By avoiding heavy frameworks, the tool remains lightweight and responsive, providing an instantaneous feedback loop as you adjust your parameters.
Can I export my designs for printing?
Yes, the generator includes an export feature that allows you to download your creations as high-resolution PNG images or scalable SVG files. SVG files are particularly useful for digital projects or professional printing. Because the output is vector-based, you can scale your designs infinitely without losing clarity. This makes the tool ideal for creating geometric backgrounds, design assets, or printable math art for educational displays.
