Mysore-pak

#frontendchallenge #devchallenge #css

Inspiration

For this challenge, I chose Mysore Pak, a traditional South Indian sweet and one of my favourite comfort foods.

I wanted to recreate something that feels familiar and nostalgic using CSS as the main creative medium. The golden colour, ghee-rich texture, soft edges, and layered pieces of Mysore Pak gave me a lot of small details to experiment with.

Demo

[https://splendorous-heliotrope-dc872c.netlify.app/]

Journey

I started by breaking Mysore Pak down into simple visual elements — rectangular sweet pieces, golden gradients, ghee highlights, crumbs, shadows, and a serving plate.

Instead of using an image, I created the artwork primarily with CSS gradients, pseudo-elements, shadows, transforms, and animations.

I also added subtle animations to make the artwork feel alive:

✨ Floating and rotating sparkles
🧈 Ghee highlights and shimmer effects
🍯 Gentle movement of the Mysore Pak pieces
🍽️ Plate light reflection
💫 Small floating crumbs
🌟 Smooth entrance animations

One of the things I'm most proud of is turning a simple sweet into a detailed CSS illustration without depending on an image asset.

This challenge also reminded me that frontend development can be a creative medium, not just a way to build interfaces.

Made with ❤️, CSS, ghee, gram flour, sugar, and a little South Indian nostalgia.