This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
Inspiration
My comfort food is a bowl of Eba & Egusi a smooth, perfectly rolled eba (made from garri) alongside rich, melon-seed egusi soup loaded with greens, tender beef, and tripe, it's a Nigerian dish. I wanted to recreate that warm "walk into the restaurant, it's ready for you" feeling, so I built it as an interactive storefront: hover or click the door of 'Île Ounje' and it swings open, walking you in to the bowl.
Demo
https://emeka-ugbanu-hub.github.io/css-art/
Journey
- All CSS, no images: the egusi bowl is built entirely from layered gradients, border-radius morphing, box-shadows, and clip-path — the fufu ball's scalloped silhouette is even a polygon computed at runtime and applied as a real CSS clip-path.
- Procedurally generated ingredients: 150 leafy greens, 820+ egusi seeds, and fringe clusters are placed by a deterministic PRNG, so the soup looks full and organic but is exactly reproducible on every refresh.
- Shading & depth with color-mix: oklch colors blended through color-mix() give the beef chunk, tripe roll, and bowl soft, food-like shading instead of flat fills.
- A scene, not just a drawing: the art lives behind a restaurant facade — walls, a door frame with a true 3D perspective swing, a parallax zoom-in, and staggered entrances for the title, starburst, and bowl, all pure CSS transitions.
What I'm proudest of: the door opens exactly when you choose hover or tap the door itself, never automatically. Next I'd love to add a second dish (Jollof? Suya?) behind the door or improve responsiveness.
Top comments (0)