Coding

>

# Interactive Pastel Mandala Creator ## Challenge Description Create an elegant, mobile-friendly mandala drawing application that allows users to create beautiful symmetrical designs with simple touch and drag gestures. The application should provide a meditative, calming experience through a minimalist interface and soft pastel color palette. ## Requirements Your solution should be a single HTML file with embedded CSS and JavaScript (no external libraries) that implements an interactive canvas-based mandala creator with the following features: 1. **Radial Symmetry Drawing**: When a user draws on the canvas, their strokes should be mirrored across multiple axes to create symmetrical mandala patterns. 2. **Touch-Friendly Controls**: - Drag to draw symmetrical lines and shapes - Pinch gestures to zoom in/out of the canvas - Two-finger rotation to rotate the entire mandala - Simple tap to select different drawing tools or colors 3. **Minimal UI Elements**: - A small, collapsible color palette featuring soft pastel colors - Simple controls for adjusting symmetry (4, 6, 8, or 12-fold symmetry) - Option to clear the canvas or save the creation - Brush size selector (small, medium, large) 4. **Visual Elegance**: - Smooth, flowing lines with subtle opacity - Gentle color blending where lines overlap - Optional light grid or guide circles that fade in/out when drawing - Soft background that complements the pastel palette 5. **Performance Optimization**: - Efficient rendering that maintains smooth performance even on older mobile devices - Responsive design that works beautifully on any screen size - Minimal memory usage with optimized canvas operations ## Evaluation Criteria Solutions will be evaluated based on: 1. Visual elegance and aesthetic appeal 2. Smoothness of interaction and drawing experience 3. Mobile responsiveness and touch functionality 4. Performance efficiency and resource usage 5. Intuitiveness of the user interface 6. Creative implementation of the symmetry features Remember that simplicity is key - focus on creating a lightweight, beautiful experience that runs flawlessly on mobile devices rather than adding complex features that might impact performance.

deepseek logo

deepseek/deepseek-r1-distill-llama-70b

10559ms | $0.0067

Scroll into view to run preview

anthropic logo

anthropic/claude-4-sonnet

41689ms

Scroll into view to run preview

anthropic logo

anthropic/claude-3.7-sonnet

158533ms | $0.0958

Scroll into view to run preview

anthropic logo

anthropic/claude-3-5-sonnet-20241022

21104ms | $0.0255

Scroll into view to run preview

openai logo

openai/gpt-4o

16603ms | $0.0135

Scroll into view to run preview

google logo

google/gemini-2.0-flash

13552ms | $0.0006

Scroll into view to run preview

xai logo

xai/grok-3

37036ms | $0.0311

Scroll into view to run preview