Create complex, mesmerizing spirograph patterns online with our free geometric art generator. Customize math parameters and export your unique designs instantly.
AI Generation Prompt
Spirograph Geometric Art Generator
Overview
A high-performance, browser-based mathematical art tool that enables users to create intricate, professional-grade spirograph (hypotrochoid) patterns in real-time. Designed as a clean, light-mode, mobile-responsive single-file application.
Technical Implementation
- Core Technology: Pure Vanilla JavaScript, HTML5 Canvas API, CSS3.
- Constraint Compliance: Zero dependencies (or single-file CDN imports), no cookies/localStorage, no alerts/prompts (use custom DOM modals).
- Architecture:
- State Management: In-memory object storing:
params = { R: 100, r: 50, d: 30, color: '#2563eb', lineWidth: 1, density: 1000 }. - Rendering:
requestAnimationFrameloop that clears and redraws only when state updates or resize events occur. - Export:
canvas.toDataURL('image/png')triggered via an off-screen anchor tag.
- State Management: In-memory object storing:
UI/UX Design
- Layout:
- Header: Simple, clear title and short instruction tag.
- Main Area: Centered, flexible canvas wrapper with 1:1 aspect ratio capability.
- Sidebar/Control Panel: Vertical stack of range sliders for parameters (R, r, d, density). Styled as floating cards with subtle shadows.
- Aesthetic:
- Color Palette: Professional SaaS light-mode. Background
#f9fafb, Cards#ffffff, Primary Action Buttons#2563eb(Indigo-600) with hover transitions, Text#111827. - Interactions: All sliders use
inputevents for real-time preview updating. Buttons use scale-down micro-interactions on click.
- Color Palette: Professional SaaS light-mode. Background
Feature List
- Real-time Parametric Control: Immediate canvas updates as sliders move.
- Visual Customization: Color picker for stroke, line width adjustment, and background color toggle.
- High-Resolution Export: Download as PNG (using a scale factor for high-DPI).
- Randomize Function: A "Surprise Me" button that randomizes R, r, and d values within a range.
- Responsive Canvas: Automatically resizes to fit screen width while maintaining the drawing resolution.
- Canvas Reset: One-click clear canvas functionality.
Developer Instructions
- No Branding: Ensure no fictional brand names appear anywhere. Title should strictly be "Spirograph Generator".
- Performance: Use
path2Dobjects for complex shapes to maintain 60fps during slider adjustment. - No localStorage: Ensure settings are lost on refresh; no data persistence.
- Accessibility: Use high-contrast accessible inputs and labels. Ensure the tab-order is logical.
- External Assets: Google Fonts (Inter) via CDN. Tailwind CSS (CDN) for rapid, clean styling.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
How does the spirograph generator work?
This tool uses the mathematical principle of hypotrochoids to generate geometric patterns. By defining the radii of a fixed circle and a moving inner circle, along with a pen offset, the application calculates the coordinates for every point on the path and renders them onto an HTML5 canvas element. The real-time calculation allows you to visualize how changing even minor variables results in completely different, highly complex, and symmetrical patterns. The engine is optimized for browser-based performance, ensuring smooth interaction even at high path density settings.
Can I save the spirograph designs I create?
Yes, you can easily save your creations as high-resolution images. Simply click the export button, and the application will generate a PNG file of your current canvas state, which you can then download directly to your local device for use in digital projects, printing, or graphic design. Please note that this application is designed for privacy and security. Because the tool runs in a sandboxed environment, it does not use cookies or local storage to save your progress between sessions. Once you refresh or close your browser, your session data is cleared, so be sure to export your designs before leaving the page.
What parameters can I adjust in this tool?
The application offers precise control over the R (fixed circle radius), r (moving circle radius), and d (pen offset distance) values. Adjusting these sliders changes the complexity, loops, and overall shape of the generated pattern, providing an infinite variety of visual outcomes based on mathematical ratios. Beyond the mathematical parameters, you can also customize the aesthetic aspects of your art. You are able to change the stroke color, line thickness, background color, and the density of the drawn path to create everything from fine, intricate webs to bold, blocky geometric shapes.
Is this geometric art tool compatible with mobile devices?
The application is built with a responsive, mobile-first design philosophy. The user interface automatically adjusts its layout to ensure that sliders, buttons, and the canvas preview are easily accessible and functional on screens of all sizes, from smartphones and tablets to desktop monitors. While the application is optimized for touch interaction on mobile devices, some complex calculations may be heavier on older devices. The interface is light and clean to ensure that the maximum amount of screen space is dedicated to the drawing canvas while maintaining a professional and intuitive control panel.
