Create account

DEV Community

𝗝𝗼𝗵𝗻

Posted on Aug 11

Żurek: A Bowl of Polish Soul - 100% Pure CSS Art 🍲

#frontendchallenge #devchallenge #css

Frontend Challenge CSS Art Submission 🍲🥧

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

Inspiration

When thinking about comfort food, global classics like ramen, mac and cheese, or tomato soup naturally come to mind. But across Central Europe, the undisputed king of soul-warming comfort is Żurek (sour rye soup).

Dating back over 700 years to medieval Poland, Żurek is culinary alchemy made from:

Zakwas: A living starter of stone-ground whole rye flour, spring water, and crushed garlic naturally fermented in unglazed clay crocks.
Biała Kiełbasa: Fresh unsmoked artisanal pork sausage seasoned with fragrant wild forest marjoram.
Pasture Farm Egg: Soft-boiled for precisely 6 minutes with a velvety, rich golden yolk.
Chleb Żurkowy: Served piping hot inside a hollowed-out, crusty sourdough boule so the soup bowl itself becomes part of the feast!

It is eaten on freezing winter mornings, festive family gatherings, and Easter celebrations. I wanted to pay homage to this deeply rooted heritage by recreating it in the browser as 100% Pure CSS Art.

Demo

🌐 Live Demo (GitHub Pages): https://johnnylemonny.github.io/zurek-css-art/
🐙 GitHub Repository: https://github.com/johnnylemonny/zurek-css-art

johnnylemonny / zurek-css-art

100% Pure CSS Art celebrating traditional Polish Żurek (sour rye soup) in a sourdough bread bowl. Created for the DEV.to Frontend Challenge 2026.

Żurek: A Bowl of Polish Soul 🍲 (100% Pure CSS Art)

DEV.to Frontend Challenge (Comfort Food Edition) — CSS Art Category Submission
Author: johnnylemonny

📖 Inspiration & Cultural Context

When thinking about comfort food, global classics like ramen, mac and cheese, or pancakes immediately spring to mind. But in Central Europe, the undisputed king of soul-warming comfort is Żurek (sour rye soup).

Dating back over 700 years to medieval Poland, Żurek is culinary alchemy made from:

Zakwas: A living starter of fermented whole rye flour and crushed garlic.
Biała Kiełbasa: Fresh unsmoked pork sausage seasoned with wild marjoram.
Farm Egg: Soft-boiled with a luscious golden yolk.
Chleb Żurkowy: Served inside a hollowed-out, crusty sourdough boule so the soup bowl itself becomes part of the feast.

It is eaten during freezing winter mornings, festive Easter breakfasts, and family reunions. This project transforms this underappreciated…

View on GitHub

Interactive Micro-Interactions:

🥄 Stir Soup: Click the rustic wooden spoon or the "Stir Soup" button to watch the spoon lift, dip directly into the broth, and trigger realistic concentric liquid wave ripples.
♨️ Boost Steam: Toggle turbulent rising aromatic steam wisps simulated with multi-layered blurred pseudo-elements.
🔍 Inspect Ingredients: Activate radar spotter beacons to inspect each component (Zakwas, Biała Kiełbasa, Farm Egg, Skwarki, Marjoram, Garlic, and Sourdough Bowl) with a live HUD lore card.
🕯️ Hearth Glow: Shift the ambiance into a warm candlelit evening beside a crackling hearth.

Journey

1. The Purity Rule (Zero SVGs, Zero Canvas, Zero Images)

The entire illustration is built strictly with semantic HTML and modern CSS. Every crust crevice, flour dusting, golden yolk reflection, sausage sear mark, herb fleck, and steam particle is rendered using:

Complex Gradient Stacks: Layered radial-gradient(), conic-gradient(), and linear-gradient() stops.
Doppelrand & Concentric Depth: Concentric box-shadow geometry providing realistic 3D lighting and soft ambient table reflections.
Organic Clipping: Multi-point clip-path: polygon() shaping rustic herb leaves, wood grains, and uneven bread cracks.

2. Tactile JS Budget (<30 Lines)

In strict alignment with the CSS Art spirit, JavaScript is under 30 lines and purely serves to orchestrate micro-interactions (handling state classes for stirring physics, steam simmer, and HUD lore updates).

3. Accessibility & Motion Safety

Full @media (prefers-reduced-motion: reduce) support instantly disables all continuous keyframe loops (steam turbulence and spoon orbits).
WCAG AA compliant contrast and semantic role="img" accessibility tags.
Verified 98/100 Accessibility and 100/100 SEO & Best Practices in Lighthouse audits.

What's Next

I would love to explore adding subtle interactive web-audio sound effects (gentle broth simmer bubbling and tactile spoon taps) to elevate the sensory comfort experience even further.