The latest articles on DEV Community by Ankit Sharma (@ankit_sharma_016b0df58d7d). https://dev.to/ankit_sharma_016b0df58d7d https://media2.dev.to/dynamic/image/width=90,height=90,fit=cover,gravity=auto,format=auto/https:%2F%2Fdev-to-uploads.s3.us-east-2.amazonaws.com%2Fuploads%2Fuser%2Fprofile_image%2F2090085%2F0f96b0d9-9db6-4a01-a09e-937781cad6ff.jpg https://dev.to/ankit_sharma_016b0df58d7d en Ankit Sharma Mon, 10 Aug 2026 09:23:11 +0000 https://dev.to/ankit_sharma_016b0df58d7d/daal-bhaath-chokha-home-jharkhand-css-art-251 https://dev.to/ankit_sharma_016b0df58d7d/daal-bhaath-chokha-home-jharkhand-css-art-251 <p><em>This is a submission for <a href="https://dev.to/challenges/frontend-2026-07-29">Frontend Challenge - Comfort Food Edition, CSS Art</a>.</em></p> <h2> Inspiration </h2> <p>When nothing else will do, I make <strong>daal bhaath chokha</strong>, the plate I grew up with in Jharkhand. It is easy, simple, nutritious, and my true go-to comfort food.</p> <p>A steel thali, steamed rice on one half, warm turmeric daal poured on the other, and a scoop of mashed-potato chokha mixed with onion and green chili. That is home on a plate. I wanted the CSS art to feel like that everyday serving, not a fancy restaurant dish, just the food that always works.</p> <h2> Demo </h2> <p><iframe height="600" src="https://codepen.io/editor/ghogbhch-the-bashful/embed/019feae6-feef-74d5-ae55-359ca28872aa?height=600&amp;default-tab=result&amp;embed-version=2"> </iframe> </p> <p><strong>Live demo:</strong> <a href="https://codepen.io/editor/ghogbhch-the-bashful/pen/019feae6-feef-74d5-ae55-359ca28872aa" rel="noopener noreferrer">CodePen</a></p> <p>What’s on the plate (pure CSS, no images, no JavaScript):</p> <ul> <li>Steel thali with specular rim light</li> <li>Split base: <strong>bhaath</strong> (rice) on one half with individually visible grains, turmeric-gold <strong>daal</strong> poured on the other</li> <li>A wavy seam where they meet, with the rice casting a shadow onto the daal</li> <li>Jeera (cumin) seeds scattered through the daal</li> <li>A small circular scoop of mashed-potato <strong>chokha</strong> on the daal, flecked with onion and green chili</li> <li>Steam wisps and mustard-oil shimmer (respects <code>prefers-reduced-motion</code>)</li> </ul> <h2> Journey </h2> <p>I started with separate mounds and a daal katori, then reworked the composition into a more honest home plating: rice and daal as one base layer filling the thali, and chokha as a small topping on the daal, the way it actually lands on my plate.</p> <p>The hardest part was making the rice <em>read</em> as rice. Tiny round stipples over near-white just washed out into a flat blob. I rebuilt it as three overlapping layers of elongated gradient tiles, each grain with a lit edge over an offset shadow, rotated at different angles so the pile feels organic. Getting that contrast right took more iteration than the plate itself.</p> <p>Other craft I’m proud of:</p> <ul> <li>An irregular <code>clip-path</code> seam plus <code>drop-shadow</code> so the rice appears to sit <em>in</em> the poured daal</li> <li>Hand-placed jeera seeds and onion/chili flecks as tiny absolute nodes</li> <li>Light motion (steam + oil shimmer) that freezes under <code>prefers-reduced-motion</code> </li> <li>An earthy Jharkhand kitchen palette via CSS custom properties, with no purple gradients and no image assets</li> </ul> <p>Built with vanilla HTML + CSS for <a href="https://dev.to/challenges/frontend-2026-07-29">#frontendchallenge</a>. License: MIT</p> frontendchallenge css cssart comfortfood