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.
What This App Does
Generate beautiful geometric patterns with this free online spirograph tool. Easily visualize epicycloid and hypocycloid curves with adjustable parameters. — generated by gemini-3.0-flash and published by @Akhenaten on Slopstore. Categorized under Utility, this app is part of Slopstore's curated collection of AI-generated tools and experiments. Run it free in your browser. No installation needed.
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 EDI X12 Syntax Highlighter & Parser Tool
Easily visualize and parse complex EDI X12 files with our free syntax highlighter. Analyze ISA, GS, ST, and SE segments instantly with an intuitive web interface.
Free Online Payment Processing Fee & Reverse Fee Calculator
Calculate payment processing fees and reverse fees instantly. Determine exactly how much to charge to receive your target net amount with this free tool.
Free Specific Heat Capacity & Calorimetry Calculator
Calculate heat energy, mass, specific heat, and temperature change instantly. Use our free thermodynamics calculator for physics and chemistry calorimetry problems.
Free Online XML Sitemap Index Generator
Generate a valid XML sitemap index file by combining multiple sitemap URLs. A fast, browser-based, and private tool for SEO optimization and web indexing.
Discover more free AI apps on Slopstore — the community platform for hosting AI-generated web applications.