I Built a Background Image Creator for the #BuiltWithMeDo Hackathon

Live app:[ https://app-bnpu8ry8qv41.appmedo.com/]

What I Built
Gradient Studio is a browser-based background and wallpaper creator. No sign-up, no installs — just open it and start designing. You can create beautiful gradient backgrounds, geometric symmetric patterns, or emoji-filled wallpapers, then export them as JPG or SVG and drop them straight into your website or desktop.

Why I Built It
Every time I start a new project — a landing page, a portfolio, a presentation — I waste 20 minutes hunting for a background that's almost right. Stock sites are too generic. Figma feels like overkill for one background. I wanted something in-between: powerful but instant.
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 4× or 6×, 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 (200×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 6× 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/