雲吞麵 Midnight Wonton Noodle — Pure CSS Art

Frontend Challenge CSS Art Submission 🍲🥧 This is a submission for Frontend Challenge: Comfort Food Edition, CSS Art: Comfort Food. 前端挑戰 CSS 藝術作品提交 🍲🥧 這是為「前端挑戰：療癒美食版」所提交的 CSS 藝術作品：療癒美食。

What I Built A pure CSS art scene of the ultimate Hong Kong comfort food: a steaming bowl of wonton noodle soup (雲吞麵) at a late-night dai pai dong. Nothing says “home” to me like a midnight bowl of wonton noodles under a glowing paper lantern — so I recreated that feeling entirely in CSS: no images, no SVG, just divs, gradients, border-radius tricks, and keyframe animations. 我製作了什麼：這是一個純 CSS 繪製的藝術場景，呈現了香港終極療癒美食：深夜大排檔裡一碗熱氣騰騰的雲吞麵。對我來說，沒有什麼比在發光的紙燈籠下吃一碗深夜雲吞麵更能代表「家」的感覺了——所以我完全用 CSS 重現了這種氛圍：沒有圖片，沒有 SVG，只有 div、漸層、border-radius 技巧和關鍵影格動畫。

The scene includes: 🥣 A classic HK porcelain bowl with the iconic blue rim stripe pattern (repeating-linear-gradient) 🍜 Golden broth with a noodle nest built from repeating-radial-gradient concentric arcs 🥟 Four pleated wontons, half-submerged at the broth line 🥢 Wooden chopsticks resting across the rim (tapered with clip-path) ♨️ Soft, organic steam wisps — blurred gradient blobs on staggered transform/opacity loops 🏮 A swaying red paper lantern casting a warm light cone 🌙 Moon, twinkling stars, bokeh lights, a flickering pink neon 雲吞麵 sign, chili oil saucer, and a cup of tea 場景包含：🥣 經典的港式瓷碗，帶有標誌性的藍色條紋邊緣（使用 repeating-linear-gradient）；🍜 金黃色的湯底，麵條是用重複的徑向漸層同心圓弧堆疊而成；🥟 四顆褶皺雲吞，半浸在湯面下；🥢 架在碗緣的木筷（使用 clip-path 製作錐形效果）；♨️ 柔和、自然的蒸氣——透過模糊的漸層色塊，配合交錯的變形與透明度循環動畫；🏮 搖曳的紅色紙燈籠，投射出溫暖的光錐；🌙 月亮、閃爍的星星、散景光點、閃爍的粉紅色「雲吞麵」霓虹燈招牌、辣椒油碟和一杯茶。

Demo zsp67x2nfnudg.kimi.page 👆 Live full-screen demo — watch the steam rise, the lantern sway, and the neon sign flicker. View page source to see the full CSS — every technique is commented! 演示連結 zsp67x2nfnudg.kimi.page 👆 全螢幕即時演示——觀看蒸氣升起、燈籠搖曳以及霓虹燈閃爍。查看頁面原始碼即可看到完整的 CSS——每一項技術都有註解說明！

Journey Design goal: I wanted the warmth of the lantern light to contrast against the cool indigo night, with a subtle purple dusk at the horizon — the exact feeling of sitting at a Hong Kong street stall at 1am. 創作歷程與設計目標：我希望燈籠的暖光能與冷色調的靛藍夜空形成對比，地平線上帶有淡淡的紫色暮色——這正是凌晨一點坐在香港街頭大排檔的感覺。

Techniques I’m proud of: The steam was the hardest part. Thin wisps disappeared against the sky, so I layered blurred radial-gradient blobs (13% wide, filter: blur) with keyframes that hold a long visible opacity plateau (0 → .7 → .65 → .38 → 0). Four wisps run on two different periods (6s / 7.2s) with delays locked 25% of a cycle apart, so at least one wisp is always near peak — the bowl never stops steaming. 我引以為傲的技術：蒸氣是最困難的部分。細薄的蒸氣在夜空中容易消失，所以我將模糊的徑向漸層色塊（寬度 13%，使用 filter: blur）進行堆疊，並透過關鍵影格設定了較長的透明度維持區間（0 → .7 → .65 → .38 → 0）。四縷蒸氣以兩種不同的週期（6秒 / 7.2秒）運行，並鎖定 25% 週期的延遲，確保至少有一縷蒸氣處於高峰狀態——讓碗裡的熱氣永不間斷。

The bowl is a single div with border-radius: 0 0 50% 50% / 0 0 100% 100% for the porcelain body; the broth ellipse’s own border doubles as the near rim, which lets the wontons straddle the rim line and read as half-submerged. The wonton pleats are a repeating-linear-gradient texture on a crimped-knot pseudo-element. Everything scales in vmin/% inside a 100vmin square stage, so the scene stays intact in any embed pane or phone screen. 碗本身是一個單一的 div，透過 border-radius: 0 0 50% 50% / 0 0 100% 100% 製作出瓷碗的形狀；湯底橢圓形的邊框同時作為碗緣，讓雲吞可以跨在邊緣線上，呈現出半浸泡的視覺效果。雲吞的褶皺是透過偽元素上的重複線性漸層紋理製作的。所有元素都在 100vmin 的正方形舞台內以 vmin/% 進行縮放，因此無論是在嵌入視窗還是手機螢幕上，場景都能保持完整。

Accessibility: the scene is wrapped in role=“img” with a descriptive aria-label, and prefers-reduced-motion disables all animation while keeping a static steam hint. 無障礙設計：場景被包裹在 role="img" 中並附有描述性的 aria-label。當使用者設定 prefers-reduced-motion 時，所有動畫會被停用，但會保留靜態的蒸氣提示。

What I learned: restraint with JavaScript (8 lines, only to randomize star twinkle timing) forced me to push CSS timing functions and negative animation delays much further than I expected. CSS art is basically time-travel debugging. 😄 Thanks for looking — feedback welcome! 心得：對 JavaScript 的節制使用（僅用了 8 行來隨機化星星閃爍的時間）迫使我將 CSS 時間函數和負延遲動畫發揮到了超乎預期的程度。CSS 藝術基本上就是一場穿越時空的除錯之旅。😄 感謝觀看——歡迎提供回饋！