Spirograph Pattern Generator & Color Gradient Interpolator

Overview

A high-performance, single-file browser application designed to generate mathematically precise spirograph (hypotrochoid) patterns. This tool enables users to define custom mathematical parameters and apply beautiful, interpolated color gradients to the resulting lines.

Core Features

• Parametric Controls: Fine-tune the fixed radius (R), moving radius (r), and pen offset (d).
• Gradient Interpolator: Define custom color stops and blending modes to interpolate colors along the curve.
• Real-time Rendering: Instant visualization on an HTML5 Canvas as parameters change.
• Styling Options: Adjust stroke width, line opacity, and background color settings.
• High-Res Export: Save the final render as a PNG image file.
• Performance: Optimized requestAnimationFrame loop to ensure smooth interaction.

UI Layout

• Header: A clean, minimal header displaying the tool name and an 'Export' button.
• Sidebar (Left/Mobile-Top): A collapsable control panel housing:
  • Numerical inputs for R, r, and d.
  • Gradient color pickers (Start/End).
  • Sliders for line thickness, rotation count, and resolution.
• Canvas Area (Main): The central area where the spirograph renders. It will feature a grid background toggle for alignment.
• Empty State: A subtle "Adjust parameters to begin drawing" placeholder within the canvas.

Design System & Aesthetics

• Color Palette: A professional "SaaS" light-mode palette using cool grays (#F8F9FA), soft whites (#FFFFFF), and an accent color of Indigo (#4F46E5).
• Typography: Sans-serif, clean font (e.g., Inter or System UI).
• Transitions: All UI elements (sliders, buttons) use 200ms ease-in-out transitions for hover and focus states.
• Shadows: Soft, diffused box-shadows on the control panel to create depth against the light background.

Technical Specifications & Directives

• Single File: All HTML, CSS, and JS must reside in one file. Use CDN links for any necessary libraries (e.g., Lucide Icons for UI elements).
• No Storage Policy: The application MUST NOT use localStorage, sessionStorage, or cookies. Maintain all drawing state (parameters) in a plain JavaScript object within the global scope.
• Sandboxed Environment: Avoid prompt(), alert(), or confirm(). All error messages or interactions must be handled via custom, in-DOM overlay modals.
• Iframe Safe: Ensure all links (if any) have target="_blank" and rel="noopener noreferrer". Do not assume parent window access.
• Responsive: The canvas must resize dynamically. If the screen is too small, collapse the sidebar into a bottom-drawer menu.
• Code Structure: Use ES6 modules structure (or standard function blocks) to keep logic clean. Separate the 'Math Engine' (calculation) from the 'UI Controller' (DOM updates) and the 'Renderer' (Canvas operations).