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 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 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.