DEV Community

HappyBug
HappyBug

Posted on

Golgappe / Pani Puri: Pure CSS Comfort Food Art & The AI Review Loop

#frontendchallenge #devchallenge #webdev #css

Frontend Challenge CSS Art Submission 🍲🥧

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

Golgappe in a plate and the street cart as CSS Art

Inspiration

For me, comfort food has always been Golgappe (also known as Pani Puri or Puchka).

Whether it was celebrating acing an exam, buying a new gadget, having a rough day and needing to let things go, or sharing festive sweets during Diwali, a plate of crisp, golden puris loaded with spiced potatoes, sprouts, chickpeas, sweet tamarind chutney, and fiery mint-coriander water has always been the ultimate reset button.

I wanted to capture that nostalgic street-cart experience entirely in HTML and CSS—without SVGs, raster images, or canvas.

Live Demo & Code

How It's Built: 100% Pure CSS Art

The entire scene is constructed from semantic HTML elements and styled exclusively with modern CSS techniques:

  1. Dual-Layer Scene Composition:

    • Background: The iconic street-side food cart with its striped awning, wooden posts, hand-painted sign, glass display showcase with stacked puris, and a cloth-draped terracotta matka (earthen pot) filled with chilled mint water.
    • Foreground: A traditional steel serving plate featuring four crisp whole puris, a sliced lemon wedge, pickled red onion rings, chickpea masala, a glass of spiced pudina water, and a hero broken puri showing off its layered fillings.

  2. Lighting Model & Material Shading:

    • Consistent upper-left key light token (--key-x: 28%, --key-y: 18%).
    • Layered radial-gradient(), conic-gradient(), and linear-gradient() combinations simulate fried blistered dough, glistening tamarind chutney, and metallic plate reflections.

  3. Pure CSS Motion & Accessibility:

    • Atmospheric steam wisps rising from the freshly dressed puri via @keyframes steam-rise.
    • Keyboard navigable with :focus-visible and interactive hover specular glints.
    • Respects user accessibility preferences with @media (prefers-reduced-motion: reduce).

The AI Iteration & Audit Workflow

Full transparency: I am not a seasoned digital artist, and designing high-fidelity CSS art from scratch manually is daunting. To create this artwork, I built an automated Generator-Critic Architecture using dedicated GitHub prompt definitions:

  • The Builder (.github/prompts/css-food-art.prompt.md): Role-plays a Senior CSS Artist & Lighting Director that strictly generates structural plans (PLAN.md) and writes semantic, pure CSS illustrations following rigorous lighting and texture principles.
  • The Judge / Critic (.github/prompts/css-art-audit.prompt.md): Role-plays a veteran CSS Art Competition Judge that inspects rendered screenshots and audits the code against a 10-point scoring rubric (1–10 scale across visual fidelity, lighting consistency, composition, contrast, and accessibility).

AI loop for CSS Art Execution

The Evolution Across 6 Audit Iterations

Through 6 structured audit rounds, the artwork progressed from a flat baseline into a competition-ready street food scene:

TimeLine of Iterations and their details

What Changed: Before vs. After Fine-Tuning

Dimension Initial AI Output (Iteration 1) Fine-Tuned Final Output (Iteration 6)
Plating & Perspective Flat top-down circle pasted onto angled canvas 3D elliptical stainless steel thali with raised rim lip, inner well shadow, and symmetric puri placement
Hero Puri Filling Muddy brown silhouette with flat icon dots Visible individual chickpeas, potato cubes, crispy sev nest, cilantro, and glistening overhanging tamarind chutney drip
Street-Cart Atmosphere Static background with no motion Animated rising steam wisps, gentle canopy sway, and shimmering pudina water ripple
Lighting Consistency Random shadow angles (downward and centered) Mathematically unified upper-left key light (--key-x: 28%, --key-y: 18%) with coherent lower-right cast shadows
Cart Props & Midground Floating matka, empty counter gaps, rigid waffle-grid puris Grounded terracotta matka with draped cloth & garland, 2 condiment counter bowls (chopped onions & lemons), organic mini-puri stack
Perspective Scale Uniformly sized puris in both foreground and background Depth-aware scaling: small puris in background cart box; balanced proportion on serving plate
Code & Architecture 20 repeating DOM spans + runtime JavaScript dependency 100% Pure CSS (0 JS), semantic HTML, CSS tokens (:root), and complete @media (prefers-reduced-motion) support

Tech Stack

  • HTML5: Semantic tags, ARIA attributes, and accessible structure.
  • CSS3: Custom Properties, complex gradient stacks, CSS Grid/Flexbox, Keyframe animations, and @media queries.
  • JavaScript: 0 KB (Pure CSS, zero runtime script overhead).

Top comments (0)