Visualize complex Dragon Curve fractal patterns with this free interactive L-System generator. Adjust iterations, line colors, and speed for stunning geometry.
AI Generation Prompt
Dragon Curve L-System Fractal Visualizer Specification
Overview
A high-performance, single-file browser application that renders Dragon Curve fractals based on L-System logic. This tool provides an interactive, educational environment for users to explore geometric recursion.
Core Features
- Live Iteration Control: A slider allowing 1 to 15 levels of iteration, rendered in real-time on the HTML5 Canvas.
- Animation Engine: An optional toggle to animate the drawing of the fractal, showing the evolution of the L-System.
- Customizable Styling: User-controlled line colors, stroke weights, and background colors to create high-contrast geometric art.
- Image Export: Native browser-based conversion of the canvas to PNG for saving work.
- Responsive Interface: A sidebar-based control panel that collapses gracefully on mobile devices.
UI Layout
- Header: Contains the app title and an "Export PNG" button.
- Main Display (Center): A large, responsive HTML5 canvas element that automatically centers the fractal based on its current bounding box.
- Control Sidebar (Right):
- Slider: Iteration Depth (1-15).
- Slider: Animation Speed.
- Color Picker: Primary line color.
- Checkbox: Toggle for "Animate drawing process".
- Button: "Reset" to clear current parameters.
Design & Aesthetics
- Palette: Clean, professional light-mode.
- Background:
#f8fafc(Slate 50) - Primary Accent:
#2563eb(Blue 600) - Surface/Panel:
#ffffff(White) with a soft shadow0 4px 6px -1px rgb(0 0 0 / 0.1). - Text:
#1e293b(Slate 800).
- Background:
- Animations: CSS transitions for button hover states and smooth slider movement (300ms ease-in-out).
- Typography: Clean, sans-serif stack (Inter or system-ui).
Technical Directives for Developers
- Single File Architecture: Bundle all CSS, HTML, and JS into a single
<file>.html. Use CDN links for any necessary libraries (e.g., Lucide Icons for UI elements). - Sandboxed Compatibility:
- NO Persistent Storage: Do not use
localStorage,sessionStorage, or cookies. Keep all state in JS variables. - NO Blocking Modals: Use custom
<div>based overlays for any user notifications or prompts.
- NO Persistent Storage: Do not use
- Canvas Implementation: Use
requestAnimationFramefor smooth rendering and animation. Do not block the main thread; ensure calculations for high iterations (12+) are optimized. - Performance: If iteration count is high, provide a debounce mechanism on the slider to prevent unnecessary re-renders while the user is dragging.
- Responsive Design: Use CSS Grid/Flexbox to ensure the control panel is accessible and the canvas remains the focal point on all viewport sizes.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is a Dragon Curve fractal?
The Dragon Curve is a self-similar fractal curve that can be generated using recursive methods or L-Systems. It starts as a simple line segment and evolves through iterative replacements, creating a complex, tileable pattern that resembles a dragon's silhouette. Because it is generated through L-Systems (Lindenmayer systems), it demonstrates the beauty of mathematical simplicity creating infinite complexity. Our tool allows you to manipulate these parameters to see how small changes in logic result in large visual transformations.
How does the L-System generator work?
An L-System uses a set of rules to replace characters in a string over several iterations. For the Dragon Curve, the system uses specific axioms and production rules that determine whether a segment turns left or right at each step. This application parses these rules in real-time, translating the resulting string into coordinate data for the HTML5 canvas. This visual representation allows for precise control over the depth of the fractal, letting you see the progression from a basic line to a dense, recursive geometric structure.
Can I save or export the generated fractals?
Yes, this tool includes a feature to export your current rendering directly to an image format. You can use the 'Download' button to capture the canvas content as a high-resolution PNG file, which is perfect for digital art projects or educational presentations. Since this application does not store data on your device, all exported files are generated directly within your browser's memory. This ensures maximum privacy and security, as no generated fractal data ever leaves your computer or gets saved to a server.
Does this tool require installation?
No, this is a 100% client-side browser application designed to work instantly without any installation or background processes. Everything runs within your web browser, ensuring a lightweight and fast user experience. Simply open the URL in any modern web browser to start creating fractals immediately. Because it uses pure Vanilla JS and the native HTML5 Canvas API, it is highly optimized for performance, even when rendering high-iteration fractals.
