అమ్మ చేతి భోజనం - My Mother's Sunday Meal, All 16 Dishes, in CSS on a Banana Leaf.

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

Inspiration

On a banana leaf, nothing is placed randomly. The leaf tip points left toward the guest. The wet dishes stay above the midrib, the rice below it. Perugu comes at the end of the meal but sits ready from the start. And before anyone touches anything, a spoon of neyyi goes over the hot rice. Ghee first, always. That is the rule in my mother's kitchen and in most Telugu homes.

So I did not draw a dish for this challenge. I drew the whole system: my mother's Sunday meal, all sixteen items, each one sitting exactly where tradition puts it. Mango pappu, gongura pulihora, dondakaya pakodi, munakkaya jeedipappu kura, dappalam. If you grew up eating this, you already know where everything is on the leaf before you look.

Tap any dish and it tells you its name in Telugu. Watch the rice for a few seconds and the ghee spoon does its job.

Demo

Things to try: tap (or Tab and Enter through) every dish for its Telugu name, wait for the neyyi pour over the rice, and turn on reduced motion to see the calm version. Everything you see is CSS. The JavaScript is about 35 lines and does exactly one thing: show you the names.

Journey

Sixteen dishes sounds like sixteen problems, but it collapsed into three reusable patterns:

The mound. A soft irregular shape via border-radius slash syntax, and then the texture trick that carries half the piece: every rice grain is one box-shadow. Two pseudo-elements act as grain sprayers at opposite rotations, and each shadow entry is a tiny pill in a slightly different shade. The same pattern became gongura pulihora in greens with peanut dots, and veg pulav in golds with peas and carrot bits. Three rices, one technique.

The clay pot. One .pot class draws the terracotta rim, and each bowl only supplies its liquid as stacked radial-gradients: cashews and raisins floating in paramannam, a raw mango wedge in the pappu, a striped drumstick piece in the sambar. Five bowls, one pattern.

The flat fried disc. Masala vada, aratikaya bajji, and the appadam beside the banana, gradients for the browning, scattered blister dots and darker patches for the uneven fry.

Some things that fought back:

• My leaf was a pill. Early on the leaf rendered as a rounded rectangle because my vertical border-radius values were flattening the sides. A banana leaf is a soft ellipse, and it took embarrassingly long to see that the fix was smaller numbers, not more code.
• My vada was a cinnamon roll. I textured it with a repeating-radial-gradient ring, and the concentric circles read as a swirl instead of a fry. Irregular radial patches fixed it. Making food look accidental is harder than making it look neat.
• An unclosed brace ate a third of my stylesheet. For two days my name tags rendered as unstyled text and I blamed my clipboard, my browser, and CodePen. It was one missing closing brace after a box-shadow list, silently swallowing every rule after it. Brace-balance checking is now part of my workflow.
• The steam was a metronome. Three wisps on one shared animation looked mechanical. Splitting them into three keyframe variants with different drift directions and durations (3.4s, 4.1s, 3.7s) made the plume feel alive.

The perugu has a small technique moment I like: a low-contrast conic-gradient masked into a soft ring, which reads as the swirl on the surface of curd. Subtle on purpose. Curd is quiet.

And a late accessibility retrofit that another entry in this challenge shamed me into: my tap targets were divs with click handlers, invisible to a keyboard. Now every dish is focusable with a visible ring, Enter and Space work, each one carries an aria-label with both names, and the tab order walks the meal in serving order. The ghee animation also respects prefers-reduced-motion: the spoon rests, and a gentle permanent glisten stays on the rice.

What I'm proud of: Anyone can draw food. The thing I wanted to get right is that this leaf is arranged the way a real one is served, and the Telugu names are there because the dish and its name are the same memory. My mother has never written a line of CSS, but she art-directed this piece thirty years in advance.

What's next: a second leaf for festival meals, where the sweet moves to the front. And maybe the sound of the appadam.

This work is licensed under the MIT License.

So, what is on your leaf, thali, or plate at home, and where does it sit? I have a feeling everyone's mother has rules.