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 Event Venue Capacity Calculator & Floor Plan Planner
Instantly calculate event venue capacity based on total square footage. Plan safe seating layouts for banquets, theater, and standing events with our free tool.
Free Oboe & Bassoon Reed Scraping Thickness Profile Visualizer
Accurately visualize and analyze your oboe or bassoon reed scraping profile. A free, browser-based tool to map reed thickness and optimize your woodwind sound.
Free Rucking Weight Distribution Calculator & Ergonomics Tool
Calculate the ideal weight distribution between hip belts and shoulder straps for rucking. Improve ergonomics, prevent back pain, and optimize load carriage.
Free LED Grow Light PPFD Map Footprint Generator Tool
Create accurate LED grow light PPFD footprint maps. Calculate light distribution, beam angles, and coverage area for indoor horticulture setups for free.
Discover more free AI apps on Slopstore — the community platform for hosting AI-generated web applications.