Create stunning geometric math art with our free online Spirograph Hypotrochoid generator. Customize parameters to visualize complex parametric patterns instantly.
AI Generation Prompt
Spirograph Hypotrochoid Math Art Generator
A high-performance, client-side web application designed for generating, visualizing, and exporting hypotrochoid and epitrochoid geometric art. The tool provides a clean, professional interface for users to manipulate mathematical parameters and create intricate line art.
Technical Specification
1. Architecture
- Single File: The entire application must be contained in one
.htmlfile containing embedded CSS and Vanilla JavaScript. - Sandbox Compatibility: No
localStorage,sessionStorage, or cookies. State must be handled entirely in-memory using JavaScript variables. - Vanilla JS: No external frameworks (React, Vue, etc.). Logic should be powered by clean, modular vanilla JavaScript.
2. UI Layout
- Header: A clean, professional title header with a brief subtitle describing the tool.
- Sidebar (Control Panel):
- Parameter Sliders:
- R (Fixed Radius): 50 to 500
- r (Moving Radius): 1 to 200
- d (Pen Offset/Distance): 1 to 200
- Resolution: Controls the number of points rendered.
- Styling Controls: Stroke color picker, line thickness slider, and background color selector.
- Action Buttons: "Reset Canvas", "Randomize Parameters", "Download as PNG".
- Parameter Sliders:
- Main Stage: A large, centered
<canvas>element that adapts to the viewport. It should support high-DPI scaling for crisp line renders.
3. Aesthetics & UX
- Design Language: Modern SaaS aesthetic. Soft whitespace, subtle shadows, and crisp sans-serif typography (e.g., Inter or system UI fonts).
- Color Palette: Professional light mode palette.
- Background:
#f8fafc - Controls Background:
#ffffff - Primary Accent:
#3b82f6(Blue) - Border/Separator:
#e2e8f0
- Background:
- Animations:
- Smooth transition for slider inputs.
- Canvas draw animation: Use
requestAnimationFrameto animate the pen drawing the curve rather than rendering it instantly for a "math art" feel.
- Modals: All alerts (e.g., "Image Saved") must be handled via custom HTML/CSS overlays, not browser default
alert()orconfirm().
4. Key Features
- Real-time Rendering: Instant preview of the curve as parameters change.
- Download Utility: A canvas-to-blob function to download the high-resolution artwork as a PNG file.
- Responsive Design: The canvas should automatically resize to fit the available space while maintaining aspect ratio, ensuring functionality on mobile and desktop.
- Performance: Efficient mathematical loops using
requestAnimationFrameto ensure the UI remains responsive even when rendering complex curves with high point counts.
5. Developer Directives
- No External Frameworks: Do not use React, Angular, or Vue. Use standard HTML/CSS/JS.
- Responsive: Ensure the control panel moves to the top or bottom on mobile, with the canvas occupying the remaining viewport space.
- No Persistence: Strictly avoid any persistent storage API. If the user refreshes, the app returns to default.
- Error Handling: Use
try-catchblocks for canvas export processes to handle any potential browser security restrictions inside the iframe.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is a hypotrochoid and how is it calculated?
A hypotrochoid is a roulette curve traced by a point attached to a circle of radius 'r' rolling around the inside of a fixed circle of radius 'R', where the point is at a distance 'd' from the center of the rolling circle. Mathematically, it is defined by parametric equations using sine and cosine functions that determine the X and Y coordinates of the pen as it rotates. Our tool visualizes these equations in real-time, allowing you to manipulate the R, r, and d variables to instantly generate unique, complex geometric patterns. By adjusting these values, you can create everything from simple star-like shapes to incredibly dense, abstract webs of lines.
How do I use this spirograph generator tool?
To get started, simply adjust the sliders in the control panel to change the radius of the fixed circle, the radius of the moving circle, and the pen offset distance. As you modify these values, the preview canvas will update to show you the resulting pattern, enabling precise control over your artistic output. You can also adjust the stroke thickness, color, and drawing speed to refine the aesthetic of your design. Once you are satisfied with the geometric output, use the built-in export button to save your creation as a high-resolution image file for use in other projects.
Can I save my spirograph designs for later?
This tool is designed as a stateless, single-file application, meaning it does not use cookies, local storage, or server-side databases to save your work automatically. When you refresh the browser tab or close the window, all current settings and canvas drawings will be reset to their default state. To keep your designs, we recommend using the integrated PNG export feature. This allows you to download your finished artwork directly to your device's local storage immediately after you finish drawing, ensuring you retain a copy of your masterpiece without the need for an account or database.
Is this geometric art tool free to use?
Yes, this Spirograph Hypotrochoid Math Art Generator is completely free to use. There are no paywalls, subscription requirements, or hidden feature limitations, and you do not need to create an account or provide any personal information to access the full functionality of the tool. We provide this utility as a public-facing resource for students, artists, and math enthusiasts to explore parametric curves and generate aesthetic patterns. It works directly in your web browser, making it accessible on any device with a modern HTML5-compliant web browser.
