Mysore-pak

Maha Darshini — Thu, 13 Aug 2026 18:04:06 +0000

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.

Biryani Tales - A Deliciously Illustrated History

Maha Darshini — Thu, 13 Aug 2026 17:56:25 +0000

What I Built

Biryani Tales — A Deliciously Illustrated History

For this challenge, I chose one of my favourite comfort foods: biryani.

I built an interactive landing page that takes visitors on a visual journey through the history, regional varieties, and cultural stories behind biryani.

The page includes:

🍚 An illustrated hero section featuring a realistic biryani handi
📜 An interactive timeline exploring the history of biryani
🌶️ Regional biryani varieties from across India
🗺️ A "Biryani Flavour Atlas" highlighting regional styles
🃏 Flip cards containing interesting biryani trivia
🎡 An interactive "Spin the Pot" wheel that randomly picks a biryani
✨ Scroll animations and interactive UI elements
📱 Responsive design for different screen sizes

I wanted the page to feel warm, playful, and food-focused rather than like a traditional informational website.

Demo

[https://delicate-sunburst-b67e2e.netlify.app/]

Repo Link:
[https://github.com/Mahadarshini/briyani]

Journey

The main idea was to turn something as familiar as biryani into a small interactive storytelling experience.

I started with the visual direction first — warm cream, saffron, chilli, and masala-inspired colours — and then built the different sections around the story of biryani.

One of the parts I enjoyed most was creating the biryani handi using CSS, rather than simply using a static image. I experimented with gradients, shadows, layering, rice grains, herbs, meat pieces, metallic textures, steam, and animation to make the pot feel more like a real restaurant-style handi.

I also wanted the page to have small interactions that make people want to explore, so I added the flip-card trivia section and the interactive biryani wheel.

What I learned

This challenge helped me think beyond simply making a page "look good." I focused more on:

Creating a visual hierarchy
Making interactions feel purposeful
Using CSS to create illustrated elements
Building a consistent visual language
Making a storytelling experience through frontend design

I'm particularly proud of how the biryani pot evolved from a simple CSS illustration into a more detailed restaurant-style handi.

What's next?

I'd like to take this further by adding:

More regional biryani stories
Real photographs and recipes
Sound effects and subtle food animations
A recipe section
Better mobile interactions
More interactive storytelling elements

Built with ❤️, CSS, JavaScript, and a lot of biryani cravings.

DEV Community: Maha Darshini

Mysore-pak

Biryani Tales - A Deliciously Illustrated History