That's Gradient Studio. Open it, design something in 30 seconds, export it, done.
Three Creative Modes
π Gradient Mode -
Add up to 5 color stops, pick Linear / Radial / Conic, drag the angle slider, and watch the canvas update live. There's a randomize button for when you want inspiration, and an AI color suggestion button that calls MeDo to generate beautiful palette ideas.
⬑ Symmetric Mode -
This is the one I'm most proud of. Choose from shapes like circles, hexagons, triangles, diamonds, or waves. Then layer on symmetry types β Mirror X/Y, Rotational Γγ°γ€ or Γγ°γ€, Radial Burst. Pick your colors, adjust density and size, and get a pattern background that looks like it took hours in Illustrator.
π Emoji Mode -
Add up to 6 emojis, choose a grid / diagonal / scatter pattern, set size and density, and tile your entire screen with them. Great for fun wallpapers, social media backgrounds, or just a good laugh.
How I Used MeDo
MeDo powered two key features:
AI Color Suggestions β When a user clicks the sparkle button, the app sends a prompt to MeDo asking for 3 beautiful gradient color combinations based on mood or season. MeDo returns structured color data that gets applied to the canvas instantly.
Development Assistance β I used MeDo's multi-turn chat to architect the entire canvas rendering system. Explaining the symmetric pattern math (rotational transforms, canvas save/restore loops) in plain language and getting working code back was genuinely impressive. It handled the createConicGradient API, the SVG export serialization, and the iOS-style auto-hide UI logic.
Technical Highlights
Single HTML file β no build step, no framework, runs anywhere
Canvas 2D API for all rendering, with requestAnimationFrame debouncing for live updates
Custom glassy dropdowns β replaced all native elements with frosted-glass custom components so the UI stays consistent across all browsers
Auto-hide UI β top nav and bottom control panel fade out after 6 seconds of inactivity using a setTimeout / mousemove reset pattern
LocalStorage gallery β saves thumbnails (Γγ°γ€112 base64 JPEG) + full config JSON, max 20 items
SVG export β Gradient mode exports a proper / SVG; Symmetric mode serializes all shapes as , , elements with correct transforms
The hardest part was the symmetric canvas math. Getting rotational Γγ°γ€ symmetry to work perfectly β especially combined with a tiled pattern β took several back-and-forth turns with MeDo to get the ctx.translate + ctx.rotate loop right. Once it clicked, it felt like magic.
I also learned that custom dropdown components are worth the effort. The native element on a fullscreen canvas with a dynamic background looks jarring β building a glassy custom one took an hour but made the whole app feel polished.
Try It Out
π Live app: https://app-bnpu8ry8qv41.appmedo.com/