The Dosa Family: My Favourite Comfort Food, Cooked Entirely in CSS

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.

Inspiration

Dosa has always been one of my favourite comfort foods. It also comes in so many forms that each type almost feels like it has its own personality.

That inspired The Dosa Family, a CSS art experience featuring eight dosa variants made from the same batter, but with radically different life choices. 😌

The family includes masala dosa, paper roast, ghee roast, onion rava, set dosa, Mysore masala, cheese dosa, and podi dosa.

Demo

Pick a dosa and watch it being cooked on the tawa.

The experience includes:

• 8 dosa variants
• 1 CSS cooking animation loop
• 0 lines of JavaScript

Journey

I wanted to create an actual cooking animation rather than a static illustration of a finished dosa.

The artwork follows the dosa from the moment the batter is poured onto the tawa. It then moves through the spreading, cooking, topping, folding, rolling, or stacking stages needed for the selected variant.

Every visual element was drawn using HTML and CSS, including the tawa, ladle, batter, dosa shapes, fillings, toppings, textures, and the tiny icons in the selector.

The biggest challenge was making eight visibly different cooking sequences work within a shared animation structure. Each dosa needed its own final form and preparation style. Paper roast had to become a long roll, set dosa needed to form a soft stack, masala dosa required its familiar fold and potato filling, while onion rava and podi dosa needed their own textures and toppings.

I used CSS custom properties, pseudo-elements, gradients, shadows, transforms, and keyframe animations to build the artwork and control each transformation. The variant selector also works without JavaScript, using HTML controls and CSS selectors to switch the animation, artwork, colours, and accompanying content.

I am particularly proud that the entire experience is made with CSS. Creating food that feels warm, dimensional, and alive using simple shapes was a fun challenge, especially once those shapes began turning into a full cooking sequence.

This project involved one hot tawa, many border radii, and an unreasonable amount of transform. ✨