Generate complex geometric patterns with this free interactive Maurer Rose and spirograph canvas tool. Perfect for creating mathematical art in your browser.
AI Generation Prompt
Technical Specification: Interactive Geometric Pattern Generator
Overview
A high-performance, browser-based tool for generating, visualizing, and exporting Maurer Roses and Spirograph-style patterns. The app serves as a creative playground for mathematical art, utilizing pure Canvas API for fluid, real-time rendering.
Core Features
- Real-time Geometry Engine: Responsive sliders to control
n(petals/frequency) andd(angle/step size) parameters. - Canvas Customization: Adjustable stroke weight, color picker for lines, and global transparency controls.
- Animation Toggle: An auto-rotation feature to cycle through
dvalues for dynamic, hypnotic visual effects. - High-Resolution Export: One-click download of the current canvas as a transparent or solid-background PNG.
- Responsive UI: A sidebar-based control panel that collapses gracefully on mobile devices, ensuring the canvas always remains the focus.
UI/UX Layout
- Header: Minimalist title with a brief "How to use" tooltip icon.
- Main Display Area: A centralized, square HTML5
<canvas>element with a soft shadow drop effect. - Control Panel (Side/Bottom):
- Slider Group: Inputs for
n(range: 1-100) andd(range: 1-360). - Appearance Group: Color hex input (native color picker) and line thickness (1px - 10px).
- Action Group: "Download PNG", "Clear Canvas", and "Randomize Pattern" buttons.
- Slider Group: Inputs for
Technical Implementation Constraints
- Architecture: Single HTML file containing all logic (Vanilla JS) and styles (CSS3).
- Performance: Use
requestAnimationFramefor rendering to ensure 60fps performance during interactive slider adjustments. - State Management: Zero persistence. Use local variables to hold current
n,d, and color values. NOlocalStorage,sessionStorage, or cookies. - Responsiveness: Use CSS Flexbox/Grid for the layout. Canvas dimensions should be dynamically set based on the
container.clientWidthto maintain aspect ratio. - Security: No external calls to APIs. Only local fonts and standard web resources.
Design System & Palette
- Aesthetic: Modern, clean, "SaaS-light" design. Think Apple-esque simplicity.
- Color Palette (Light Mode Only):
- Background:
#FFFFFF - Surface:
#F9FAFB(Subtle off-white for panel backgrounds) - Primary Text:
#111827 - Accent/Action:
#4F46E5(Indigo, for primary buttons) - Borders/Dividers:
#E5E7EB - Shadows:
0 4px 6px -1px rgba(0, 0, 0, 0.1)
- Background:
Animations & Transitions
- Smooth Interactions: All buttons and inputs should have
transition: all 0.2s ease-in-outfor hover states (slight scale up or background color shift). - Drawing Feedback: When parameters change, the canvas should redraw immediately without flickering. Use a double-buffering technique or efficient clearing/redrawing logic.
- Modal/Feedback: Use a custom <div> overlay for "Export Success" notifications instead of the native
alert()function.
Spread the word
Files being used
Frequently Asked Questions
Everything you need to know about using this application.
What is a Maurer Rose?
A Maurer Rose is a type of mathematical curve generated by drawing lines between points on a rose curve. The shape is defined by the polar coordinate formula r = sin(n * theta), connecting points at specific angular intervals determined by the input constant d. This tool allows you to manipulate the 'n' (number of petals) and 'd' (angle multiplier) variables in real-time, instantly visualizing how changing these mathematical constants creates complex, symmetric patterns. It is an excellent educational aid for exploring trigonometry and polar coordinate systems.
How does this online spirograph drawer work?
This tool utilizes the high-performance HTML5 Canvas API to render complex vector-like paths directly within your browser. By mapping polar coordinates to Cartesian points, the application calculates the trajectory of the geometry based on your custom slider inputs. All calculations are performed in real-time using optimized Vanilla JavaScript, ensuring smooth animations and immediate visual feedback. Because the application runs entirely client-side without any server-side dependencies, it remains fast, secure, and fully functional without an internet connection.
Can I export my geometric creations?
Yes, the tool features a built-in 'Download as PNG' function that captures your current canvas state and renders it into a high-quality image file. You can save your unique geometric artwork to your local device instantly for use in digital design projects, print media, or personal collections. Simply configure your desired geometry using the control panel, click the export button, and the application will trigger a local browser download. No server-side processing is required, ensuring that your generated artwork remains completely private.
Why does this app not use cookies or local storage?
This application follows a privacy-first, stateless architecture designed for maximum compatibility and security. By relying solely on in-memory computation, the tool avoids the need for cookies, local storage, or persistent databases, ensuring zero tracking of user activity. This architecture also ensures seamless operation within sandboxed environments, such as secure iFrames or restricted browser containers. The workspace resets cleanly whenever you refresh the page, providing a distraction-free, privacy-conscious environment for mathematical and artistic exploration.
