Free Interactive Spirograph Epicycloid & Hypocycloid Generator—
gemini-3.0-flash
gemini-3.0-flashGenerate beautiful geometric patterns with this free online spirograph tool. Easily visualize epicycloid and hypocycloid curves with adjustable parameters.
AI Generation Prompt
Technical Specification: Interactive Spirograph Visualizer
Overview
A high-performance, single-file browser application that renders mathematical curves—specifically epicycloids and hypocycloids—on an interactive HTML5 canvas. Designed for artists, students, and mathematicians alike.
Core Features
- Live Rendering: Real-time canvas updates as users manipulate parameters.
- Curve Modes: Toggle between Epicycloid (outer) and Hypocycloid (inner) generation.
- Parametric Controls: Fine-grained control over:
- Fixed Circle Radius (R)
- Rolling Circle Radius (r)
- Pen Offset (d)
- Rotation Speed & Resolution
- Style Customization: Adjustable stroke weight, color picker, and background opacity controls.
- Export Utility: High-resolution PNG export of the generated curve.
UI/UX Design
- Aesthetic: Clean, minimalist light-mode SaaS aesthetic. Uses a white/light-gray background with slate-colored typography.
- Layout:
- Header: Simple, centered title and brief instruction.
- Main Area: A responsive container that splits the screen into a left-side control panel and a central, large canvas area.
- Controls: Grouped into logical cards (Geometry, Style, Export) with high-quality slider inputs and clean, rounded buttons.
- Animations: Subtle CSS transitions on hover states for buttons and smooth value-update animations for sliders. No jarring movements.
Technical Constraints & Implementation
- Architecture: 100% Single-file (HTML/CSS/JS).
- Frameworks: Pure Vanilla JavaScript. CSS libraries (Tailwind via CDN) are permitted.
- Rendering:
HTML5 Canvas APIusingrequestAnimationFramefor high-performance drawing. - Persistence: NO localStorage, sessionStorage, or cookies. All app state must be maintained in volatile JS memory.
- Security: Sandboxed for iframe environments. No
alert(),confirm(), orprompt(). All notifications/modals must be DOM-based UI elements. - Responsiveness: Fluid grid system that stacks the control panel vertically on mobile devices and provides a side-by-side view on tablets and desktops.
Color Palette
- Background:
#FFFFFF - Surface/Cards:
#F9FAFB(Gray 50) - Primary Accent:
#2563EB(Blue 600) for active buttons and sliders. - Text:
#1F2937(Gray 800) for readability. - Secondary Text:
#6B7280(Gray 500) for labels.
Spread the word
gemini-3.0-flashFiles being used
Frequently Asked Questions
Everything you need to know about using this application.
What is the difference between an epicycloid and a hypocycloid?
An epicycloid is a curve traced by a point on the circumference of a circle that rolls around the outside of a fixed circle. This creates a pattern that expands outwards, often resembling a flower or a star. In contrast, a hypocycloid is traced by a point on a circle rolling inside a fixed circle. These patterns stay confined within the boundary of the larger circle, creating more enclosed, internal geometric motifs.
How can I customize the geometric patterns?
You can adjust three primary variables: the radius of the fixed circle, the radius of the rolling circle, and the distance of the pen point from the center of the rolling circle. By fine-tuning these numerical inputs, you can create infinitely complex designs. The tool provides real-time feedback as you adjust these sliders, allowing for experimentation with symmetry and frequency. You can also change the stroke color and line width to achieve a professional artistic finish.
Is this tool suitable for educational purposes?
Absolutely. This application serves as an excellent visual aid for students studying geometry, calculus, and parametric equations. By visually demonstrating how changing circle radii affects the final path, it makes abstract mathematical concepts tangible and easy to understand. Teachers can use the interface to demonstrate properties of hypotrochoids and epitrochoids in real-time, helping students grasp the relationship between trigonometry and graphical art forms in a way that static diagrams cannot.
How do I export my finished geometric art?
Once you have achieved the desired pattern using the control panel, you can use the export function to download your creation as a high-resolution image file. This allows you to save your work for digital portfolios, presentations, or print projects without needing additional software. The export feature captures the canvas state exactly as displayed, ensuring that your custom line settings and colors are preserved. Please ensure your browser supports standard canvas-to-blob operations for the download functionality to trigger correctly.
Related Applications
Free Photography Lighting Inverse Square & Fill Light Calculator
Use this free photography lighting tool to calculate light falloff using the inverse square law. Determine fill light ratios and distance adjustments instantly.
Free Password Entropy & Strength Estimator Tool
Calculate password entropy and crack time with this free online tool. Analyze your password strength based on character patterns, complexity, and length.
Free Fish Tank Volume and Water Weight Calculator
Instantly calculate fish tank volume in gallons and liters. Estimate total water weight to ensure aquarium stand safety with our free, easy-to-use tool.
Free Ethereum Gas Fee Calculator: Gwei to USD Converter
Calculate Ethereum transaction costs instantly. Convert Gwei to USD based on real-time ETH price. Estimate gas fees for transfers, swaps, and NFT minting.
Discover more free AI apps on Slopstore — the community platform for hosting AI-generated web applications.