A Day on a Plate: Hand-Drawn CSS Food Art

PS H — Mon, 17 Aug 2026 07:33:22 +0000

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

Inspiration

When thinking of "comfort food," I couldn't pick just one dish. To me, ultimate comfort is "Ghar Ka Khaana" (home-cooked food), which is less about a specific recipe and more about the comforting rhythm of a day at home.

This interactive piece represents the timeline of my comfort: the fresh start of Appam & Chutney at 7:00 AM, a celebratory feast of Chicken Biryani at 1:00 PM, a nostalgic pause for Chai & Toast at 5:00 PM, and the ultimate warm hug of Tadka Khichdi at 11:00 PM.

Demo

You can click the clock to cycle through the timeline of meals!

Journey

After procrastinating for long, I decided to build this project with Zero JavaScript. The clickable clock and the changing meals all work using a pure CSS trick (the radio-button hack).

For the aesthetic, I wanted a hand-drawn, sticker-like look with thick marker lines. I used this specific cute pancake sticker illustration as my main reference to guide the playful, sketched vibe.

These days, we are used to relying on heavy frameworks and libraries for the things we build. It was a really fun challenge to step away from all that, go back to the basics, and see what I could bring to life using just plain CSS!

DEV Community: PS H

A Day on a Plate: Hand-Drawn CSS Food Art

Inspiration

Demo

Journey