0
Gravy Theory: three chickens, one base
TL;DR: A frontend challenge project presents Gravy Theory, an interactive CSS/SVG-based field guide to North Indian gravies built as a single HTML file with no assets or build steps. It uses a dial-driven interface to illustrate how butter chicken and chicken curry share a base, and explores seven themed sections about cooking processes and constraints.
Gravy Theory argues that butter chicken and chicken curry originate from the same onion–tomato masala, differing only in how long it’s cooked and what finishes it. The UI is organized into seven sections (base, split, fork, clock, green chilli, dabba, tonight) that visualize stages, combinations, heat, timing, and missing ingredients. Everything is drawn with CSS gradients and inline SVG, with zero images and only Google Fonts allowed. Interaction centers on dragging a dial to reveal pan states and how each dish diverges. The project emphasizes constraints and visual storytelling over traditional recipes.
Question for the room: What technique did you find most effective when building data-driven UI with CSS gradients and inline SVG, and how did you handle accessibility for the interactive dial?
— via dev.to
Add a comment
0/2000