Free Interactive Spirograph Pattern & Color Gradient Generator

A professional-grade, single-file browser application for generating complex geometric spirographs with dynamic color gradients.

Core Features

• Real-time Rendering: Instant updates via requestAnimationFrame when changing pattern parameters.
• Dynamic Parameter Controls: Sliders for Fixed Radius (R), Moving Radius (r), Drawing Offset (d), and Rotation Speed.
• Advanced Gradient Engine: Define custom start and end colors with interpolation modes (RGB/HSL).
• High-Resolution Export: Download functionality supporting PNG (raster) and SVG (vector) formats.
• Performance Optimized: Uses OffscreenCanvas concepts (simulated) to ensure smooth interaction even with high-density point counts.

UI/UX Design Specification

• Layout:
  • Left Sidebar: A persistent control panel with a clean white background, subtle drop shadows, and grouped input sections (Geometry, Color, Export).
  • Main Viewport: A central canvas area taking up 100% of the remaining width, allowing full-screen visualization of the pattern.
• Aesthetics:
  • Palette: Clean, professional interface using #ffffff backgrounds, #1e293b for primary text, and #2563eb for active accent states.
  • Typography: Sans-serif, human-readable fonts (e.g., system UI stack).
  • Transitions: All UI components use smooth CSS transition: all 0.3s ease; for hover states and slider interactions.

Technical Implementation Constraints

• Single File: All HTML, CSS, and JS must be contained in one file. No external bundling.
• No Persistent Storage: No localStorage or cookies allowed. The state must be entirely transient.
• Iframe Compatibility: Designed for sandbox="allow-scripts". No external calls that require cookies or storage persistence.
• Performance: Ensure the canvas loop handles thousands of points without blocking the UI thread.
• No Modals: Use custom HTML elements (overlay divs) for warnings or export dialogs instead of alert() or prompt().