समोसा — Pure CSS Comfort Food in an Indian Kitchen

#frontendchallenge #devchallenge #css #webdev

Frontend Challenge CSS Art Submission 🍲🥧

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

For me, comfort food means samosas — crispy, golden, still warm from the fryer, with mint and tamarind chutney on the side. Rainy evenings, chai breaks, street stalls, family gatherings: a samosa shows up in all of them.

This project recreates that feeling with no images, no SVG, and no JavaScript — only HTML and CSS.

Demo

Try it live on CodePen — kitchen scene, cooking steps, and the full animation loop:

CodePen: https://codepen.io/sumit_mishra_cb22d5be5f02/pen/jEyXMLo

Live demo: https://css-samosa-kitchen.vercel.app

Open index.html locally, or deploy the folder to any static host.

What you're looking at

Panel 1 — Kitchen scene

A flat illustration of a home kitchen:

Wall & backsplash — cream plaster, subway tiles, red/green border bands, warm window light
Props — matkas on the wall, spice jars, masala dabba, hanging ladle, chakla-belan, chai glass, folded napkin
The plate — oval rim, inner ring, shadow, lemon wedge, coriander, pickle slice
Three samosas — clip-path triangles with fold lines, crimped bases, oil blisters, side shading
Chutney — semicircle sauce in katori bowls on tiny saucer plates (mint green + tamarind red)
Details — rising steam, crumbs, oil spots, diagram-style labels, rain on the kitchen window
Bitten samosa — one samosa with a potato filling cross-section, as if someone already took a bite

A 7-second CSS loop brings samosas and chutney onto the plate with staggered entrance keyframes, a dip-into-chutney-and-bite beat on the left samosa, screen-shatter effects, and steam on a shared timeline.

Panel 2 — Cooking steps

Scroll down for a 5-step cooking illustration (knead → fill → fold → fry → serve) — also built entirely in CSS with a 25-second step cycle. The final serve frame mirrors Panel 1: same oval plate, katori chutney bowls, and golden samosa tones.

The title uses Yatra One for Devanagari (समोसा) with an English subtitle — the only external assets are Google Fonts.

Inspiration

I grew up treating samosas as the default answer to "what should we eat?" They are street food and home food at once. I wanted the page to feel like a cross-section of an Indian kitchen — not a dark 3D render, but the kind of warm, labeled illustration you'd see in a cookbook margin.

Technical highlights

Samosa shape

Each samosa uses clip-path: polygon() for the triangle, layered linear and radial gradients for the fried crust, a vertical fold line, and a repeating gradient crimp at the base.

Chutney bowls

Chutney is a semicircle fill inside a CSS katori (open bowl curve), sitting on a small oval saucer — so it reads as sauce in a dish, not a flat green/red dot.

Kitchen background

Every prop is divs and pseudo-elements: window panes on a grid, shelf boards, jar lids, a brass-toned ladle, wood-grain table stripes. No icon fonts, no PNGs.

Animation

Entrance keyframes, dip-and-bite motion, screen shake, crack lines, and glass-shatter shards are pure CSS. prefers-reduced-motion is respected throughout.

Journey / lessons

Placement matters. Chutney looked wrong until the bowls moved inside the plate container and sat at the correct inset — percentages relative to the plate, not the full viewport.
Layer order tricks you. A white "bowl rim" div on top of the sauce looked like a lid; swapping to a border on the sauce fixed it instantly.
Reference helps. A flat illustration reference pushed the scene from moody 3D toward a clearer, warmer kitchen diagram — which fit the comfort-food brief better.

What I'd do next: ~~rain streaks on the kitchen window~~ ✓ added — overcast sky, falling streaks, and glass-pane sheen for the rainy-evening mood in the intro.