This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
Inspiration
The Brazilian hot dog (cachorro-quente) isn't just bread, sausage, ketchup and mustard... It's a whole toppings culture: quail egg, crispy potato sticks (batata-palha), corn, mashed potatoes, and the eternally controversial raisins.
My personal connection to this one is a little silly: my wife nicknamed our dog "hot dog" because she's so warm she basically doubles as a space heater in bed.
That nickname is what actually clicked something for me (we both already love hot dogs), and I realized the version I grew up with, the loaded, toppings-everywhere Brazilian one, is basically unknown outside Brazil. So this became my excuse to finally show it to the rest of the world.
I set the scene on Copacabana beach in Rio: sky, Sugarloaf and Christ the Redeemer in the background, sailboats drifting by, and a vira-lata caramelo (the "caramel mutt," one of Brazil's most-loved street dogs) sitting next to the stand, a little tribute to the real one who started this.
Clicking through the toppings became the whole interaction: each one gets a little pixel-art icon and a real fact about where in Brazil it shows up.
Demo
Live demo: https://the-best-brazilian-hot-dog-css.vercel.app/
Video walkthrough:
(if the embed doesn't render: https://youtu.be/vMl0N9eqd4E)Source code: https://github.com/icaromol/the-best-brazilian-hot-dog-css
Journey
Every shape in the scene — the mountains, the boats, the food, the dog — is CSS: gradients, clip-path, and pixel art drawn with box-shadow (each sprite is a big list of x y color shadows, basically a matrix).
No raster images, no SVG. There's a thin layer of vanilla JavaScript (~300 lines total, no framework) for the click interactions — opening ingredient cards, the START gate, a responsive "dual-screen" layout on portrait viewports — but it's purely interaction, kept intentionally small so it stays a "sprinkle," never the thing producing the visuals.
None of that pixel art was hand-typed as box-shadow values, though — for this challenge I ended up building an entire second tool to make that possible:
A local pixel-art editor with a brush/eraser, a locked color palette, and a live CSS preview, plus a CLI path for turning a reference image into pixel art automatically. Every sprite (the boats, the clouds, the dog's four walk/stand frames, the hot dog, all ten ingredient icons) was painted or imported there, saved as a pixel grid, then compiled into CSS with one generated box-shadow entry per pixel.
That's the actual source of the ~121,000 lines of pixel-art code in this repo. I'm glad I never wrote a shadow coordinate by hand.
Quick note since this is a CSS Art challenge: I wrote the styles in SCSS, but think of SCSS as a writing tool, not a runtime one — nothing SCSS-specific ever reaches the browser. Before anything ships, a compiler (sass) turns all my .scss files into one plain css/style.css file, and that's the only thing the browser ever loads and renders.
I only used SCSS to keep those ~121,000 lines of pixel-art code split into 56 organized files instead of one giant unreadable stylesheet — no clever logic, no loops, barely any variables. So when it's judged, what's actually running is 100% plain CSS.
The trickiest part was the responsive "dual-screen" mode: below a portrait ~900px breakpoint, popups dock into a dedicated panel above the scene instead of overlaying it, so nothing on a phone gets covered by its own popup.
Proudest of: the whole scene renders with zero images and zero SVG, and it still holds up scaled from a phone to a wide desktop.
What's next: probably more regional toppings, and maybe sound — though that'll be the tricky part to pull off using only CSS 😄
License: MIT
Huge thanks to the DEV community and to dev.to for such an inspiring challenge — building this in just one weekend and having it come together made me genuinely happy.
I've also been having a blast scrolling through everyone else's submissions.
Top comments (0)