This is a submission for Frontend Challenge - Comfort Food Edition, CSS Art.
Inspiration
Bánh mì is one of those foods that can make an ordinary moment feel complete. The first crackle of the baguette, the savory layers inside, the brightness of pickled carrot and daikon, the cool cucumber, fresh coriander, and a small flash of chili all arrive in one bite. It is practical, generous, full of contrast, and often the easiest answer to a very familiar question: “What should we eat?”
That feeling became the starting point for this artwork. I did not want to draw only a sandwich. I wanted the page to feel like a small love letter to Vietnam: something warm, familiar, slightly nostalgic, and immediately recognizable even before a reader notices every detail.
The central idea is “A journey in every bite.” A large, cut-open bánh mì crosses a north-to-south silhouette of Vietnam. The map is rendered as a dark charcoal-lacquer serving board, while the sandwich sits above it in toasted gold, orange, green, cream, and chili red. The contrast keeps the bread as the focal point while allowing the shape of the country to remain clearly visible behind it.
The composition borrows the mood of an aged Vietnamese street poster. The background uses warm parchment tones, faint grid lines, tiny imperfections, double borders, corner ornaments, restrained sea-wave marks, and a mixture of serif and compact uppercase typography. I wanted it to feel printed and handled rather than perfectly digital.
Behind the map is a stationary, Đông Sơn-inspired bronze drum. It is not intended as an exact historical reproduction. Instead, its central multi-ray star, concentric engraved rings, geometric rhythm, and burnished copper palette act as a visual reference to Vietnamese decorative heritage. Earlier versions used a simple orange sun, but the drum gave that large circle a more meaningful role in the story while staying quiet enough to support the sandwich.
Geography is part of the composition rather than an afterthought. Hà Nội and TP. Hồ Chí Minh appear as red blinking markers, positioned near their locations on the map. Hoàng Sa, Trường Sa, and Phú Quốc are represented with small island forms and visible labels. The ingredients are not presented as claims about regional origins; they form a visual flavor journey inside the bánh mì itself.
At the bottom left, the page includes a playful dictionary-style definition:
Bánh mì · noun
Vietnam’s crisp, crackly answer to “What should we eat?”—a baguette packed with savory fillings, bright pickles, fresh herbs, and inevitable crumbs.
That line captures the tone I wanted for the whole piece: respectful, affectionate, and a little bit fun.
Demo
If the embed is not available in your reader, open the live Bánh Mì CSS artwork on CodePen.
Journey
Choosing a strict CSS-art constraint
I built the final artwork with pure HTML and CSS. There is no JavaScript, SVG, canvas, image asset, CSS library, dependency, or external font. Keeping that constraint made every visual decision more interesting: each shape had to come from ordinary browser primitives.
The Vietnam mainland is a percentage-based clip-path polygon placed inside a responsive map container. A slightly offset copy creates the shadow, and layered gradients add the charcoal-lacquer depth and grain. Browsers without polygon clip-path support receive a simpler rounded fallback silhouette instead of a broken composition.
The bánh mì is assembled from nested elements and pseudo-elements. Gradients form the toasted crust and soft highlights. Rounded borders create the baguette halves. Narrow rotated shapes become crust scores, carrot, and daikon. Repeating radial gradients suggest slices of pork and pâté texture. Conic gradients create cucumber sections. Small circles become chili rings, and groups of rounded leaves create coriander. Even the crumbs and steam are CSS shapes.
The bronze drum also uses only CSS. Repeating radial and conic gradients produce engraved rings and geometric divisions. A clip-path polygon forms the central star, while inset shadows and layered copper colors make the disc feel aged rather than flat.
Designing the motion
The entrance sequence is deliberately simple. The poster fades in, the map arrives with opacity and a small translation, and the sandwich settles into place. These transforms do not collapse or expand element height, so the composition stays stable during loading.
After the entrance, the ambient movement is restrained: steam drifts, coriander sways, crumbs fall, and the two city markers pulse. The bronze drum remains stationary. Removing its loop was an important decision because movement in such a large background shape competed with the food.
For visitors who prefer less motion, prefers-reduced-motion: reduce shortens animations, removes delays, and limits iteration. Decorative groups are hidden from assistive technology, the page keeps semantic heading order, and the complete artwork has a concise screen-reader description.
Making one poster work at several sizes
Responsiveness was one of the hardest parts because this is an illustration, not a normal stack of page sections. The stage uses percentage positioning, clamp(), viewport-aware sizes, and mobile-specific adjustments. The map keeps its tall aspect ratio, while the bánh mì scales down and recenters so neither end is cut off on a narrow screen. Typography, the definition card, island labels, city markers, and the drum all reduce without losing their hierarchy.
I repeatedly checked the design at desktop, tablet, and phone proportions. I also removed horizontal overflow and avoided external requests, which keeps the CodePen self-contained.
Refining the story by removing things
The final page came from many small corrections. The map silhouette was redrawn to make its north-to-south curve more recognizable. Hà Nội and TP. Hồ Chí Minh were repositioned. Phú Quốc was moved closer to its geographic relationship with the mainland, and the Hoàng Sa, Trường Sa, and Phú Quốc labels were restored after an overly aggressive cleanup.
Early versions included a yellow dotted route, a cut-looking route marker, pickles, herbs, pork, pâté, and a chili scattered across the map. Individually those details were charming, but together they made the geography feel busy. Removing them gave the map space to breathe and made the bánh mì the unquestioned focal point. The sea marks were also limited to the right and lower areas so they would not visually pull the map westward.
What I am proud of
I am most proud that the image reads at two distances. From far away, it is a bold bánh mì crossing Vietnam. Up close, it rewards inspection: the bread scoring, cucumber wedges, tiny seeds, herb leaves, lacquer grain, island clusters, city pulses, crumbs, poster borders, and engraved drum rings all have their own small construction story.
This project reminded me that effective CSS art is not only about adding clever shapes. It is also about hierarchy, subtraction, cultural care, responsive composition, and knowing when an animation should stop. The most technical solution is not always the best visual solution.
If I continue the project, I would refine a few intermediate breakpoints and create a short making-of view that separates the map, drum, bread, and fillings into layers. For this challenge, though, I like that the final result remains a single dependency-free poster: Vietnamese comfort, drawn entirely in CSS.
Top comments (0)