This is a submission for Frontend Challenge: Comfort Food Edition, CSS Art: Comfort Food.
What I Built
A pure CSS art scene of the ultimate Hong Kong comfort food: a steaming bowl of wonton noodle soup (雲吞麵) at a late-night dai pai dong.
Nothing says "home" to me like a midnight bowl of wonton noodles under a glowing paper lantern — so I recreated that feeling entirely in CSS: no images, no SVG, just divs, gradients, border-radius tricks, and keyframe animations.
The scene includes:
🥣 A classic HK porcelain bowl with the iconic blue rim stripe pattern (repeating-linear-gradient)
🍜 Golden broth with a noodle nest built from repeating-radial-gradient concentric arcs
🥟 Four pleated wontons, half-submerged at the broth line
🥢 Wooden chopsticks resting across the rim (tapered with clip-path)
♨️ Soft, organic steam wisps — blurred gradient blobs on staggered transform/opacity loops
🏮 A swaying red paper lantern casting a warm light cone
🌙 Moon, twinkling stars, bokeh lights, a flickering pink neon 雲吞麵 sign, chili oil saucer, and a cup of tea
Demo
👆 Live full-screen demo — watch the steam rise, the lantern sway, and the neon sign flicker. View page source to see the full CSS — every technique is commented!
Journey
Design goal: I wanted the warmth of the lantern light to contrast against the cool indigo night, with a subtle purple dusk at the horizon — the exact feeling of sitting at a Hong Kong street stall at 1am.
Techniques I'm proud of:
The steam was the hardest part. Thin wisps disappeared against the sky, so I layered blurred radial-gradient blobs (13% wide, filter: blur) with keyframes that hold a long visible opacity plateau (0 → .7 → .65 → .38 → 0). Four wisps run on two different periods (6s / 7.2s) with delays locked 25% of a cycle apart, so at least one wisp is always near peak — the bowl never stops steaming.
The bowl is a single div with border-radius: 0 0 50% 50% / 0 0 100% 100% for the porcelain body; the broth ellipse's own border doubles as the near rim, which lets the wontons straddle the rim line and read as half-submerged.
The wonton pleats are a repeating-linear-gradient texture on a crimped-knot pseudo-element.
Everything scales in vmin/% inside a 100vmin square stage, so the scene stays intact in any embed pane or phone screen.
Accessibility: the scene is wrapped in role="img" with a descriptive aria-label, and prefers-reduced-motion disables all animation while keeping a static steam hint.
What I learned: restraint with JavaScript (8 lines, only to randomize star twinkle timing) forced me to push CSS timing functions and negative animation delays much further than I expected. CSS art is basically time-travel debugging. 😄
Thanks for looking — feedback welcome! 🍜
Top comments (0)