标签：#ha

This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art. Inspiration For me comfort food has never really been about the plate. It's about who's sitting around it. I grew up in Pakistan, and the memory that comes back first is everyone crowded around the dastarkhwan over a steaming handi of chicken biryani. Someone always grabs the serving spoon before anyone else. Someone asks for more raita. The jalebis are gone before the meal even properly starts, and there's a glass of chilled lassi at every place. So I didn't want to draw a dish. I wanted to draw that — the small ritual of the first plate being served — using only HTML and CSS. Demo Live Demo : https://waasilaasif.github.io/Dastarkhwan/ Source Code : https://github.com/WaasilaAsif/Dastarkhwan Journey This went well past drawing static shapes. The centerpiece is a brass handi overflowing with biryani, framed by the usual suspects: raita, jalebis, lassi, an empty plate, and the serving spoon resting beside the pot. All of it is HTML and CSS — gradients, layered pseudo-elements, border-radius pushed to its limits, CSS-only shadows, and a fairly stubborn amount of keyframe choreography. The animation was the part I actually cared about. I didn't want things to just move. I wanted a sequence. A hand comes in, picks up the spoon, scoops from the handi, serves onto the plate, adds a spoonful of raita, sets the spoon back down, and the whole table settles into its idle state before the loop starts again. Getting the food recognizable was harder than getting it to look nice. Making a lump of gradients read as "that's a chicken leg" or "that's clearly biryani and not just yellow rice" took a lot more fiddling than the playful final result suggests. Like a lot of people in this challenge, I used AI in the process — I worked with Claude to iterate on the harder animation timing. It's a tool in the workflow, not a shortcut past the thinking. What stuck with me is that CSS can carry a story, not just sty