Free Online Mandala and Fractal Art Generator

A high-performance, browser-based creative tool designed for artists, designers, and hobbyists to generate intricate geometric patterns, mandalas, and fractal-based visuals in real-time. This application focuses on a seamless, professional UX that emphasizes creativity over technical complexity.

Core Feature Set

• Radial Symmetry Controls: Adjust the number of segments (slicing) from 2 to 64 to create complex, kaleidoscopic mandalas.
• Fractal Parameter Engine: Real-time sliders to manipulate recursion depth, branching angles, line scaling, and color shifting.
• Dynamic Color Palette: Integrated HSL color picker with randomized 'Palette Shuffling' for quick aesthetic inspiration.
• Canvas Manipulation: Real-time drawing canvas that supports panning and zooming, ensuring users can focus on fine details.
• Export Functionality: High-resolution image export (PNG format) that captures the canvas state instantly without server-side processing.
• State Reset: A 'Clear Canvas' and 'Randomize All' function to start fresh or explore new generative paths.

UI/UX Specification

• Layout Architecture:
  • Header: Minimalist title area with 'Help' and 'Export' buttons.
  • Main Work Area: A centered, high-performance HTML5 Canvas element surrounded by a soft-shadow container.
  • Sidebar: A floating-panel (right side) containing all control sliders and configuration settings, styled with rounded corners and subtle hover effects.
• Aesthetic: Clean, light-mode design with a focus on 'SaaS' professionalism. Use a color palette of soft greys, crisp whites, and vibrant accent colors (e.g., Electric Blue or Coral) for action buttons.
• Transitions: Smooth CSS transitions on all sliders, buttons, and UI toggles. No jarring shifts.

Technical Implementation Constraints

• Single File: The entire application (HTML, CSS, JS) must reside in one file. No external frameworks like React or Vue. Use vanilla JavaScript.
• No Persistent Storage: Strict policy against localStorage, sessionStorage, cookies, or IndexedDB. All pattern state must be managed via in-memory JavaScript variables. If a user refreshes the page, their progress will be lost.
• Iframe Compatibility: The app must render correctly within a restricted iframe environment. Avoid absolute window references; use scoped event listeners.
• No Popups: Do not use alert(), confirm(), or prompt(). All notifications or warnings must be custom-built HTML/CSS modal components.
• Responsive: The canvas must resize dynamically based on the parent container's width, ensuring utility on both mobile browsers and desktop workstations.