Çay & Simit — a Turkish Tea Break in Pure CSS
This is a submission for Frontend Challenge: Comfort Food Edition , CSS Art: Comfort Food. Inspiration For me, comfort food isn't a dish — it's a ritual. A tulip-shaped glass of çay (Turkish tea), brewed dark "tavşan kanı" (rabbit's blood red, as we say), served on a red-and-white saucer with two sugar cubes, and a simit — the sesame-crusted bread ring sold on every street corner in Türkiye. It's…
This is a story about creating a realistic Turkish tea break scene using only HTML and CSS. The author aimed to replicate the experience of a traditional Turkish tea break, complete with a tulip-shaped glass of dark rabbit blood red tea, a sesame-crusted simit bread ring, and a porcelain demlik teapot. The entire scene is achieved through CSS gradients, shadows, masks, and clip-paths without the use of images, SVGs, data URIs, or icon fonts.
A JavaScript script is included only to toggle classes and reset state on replay, making it a small orchestrator that doesn't animate anything. The pour choreography is the most impressive aspect, with the entire sequence running on a single 9-second CSS animation duration shared by all elements. Keyframe percentages are used to encode each element's action window, ensuring perfect synchronization without JavaScript timing code.
The tea level's keyframes are based on the same Bézier polygon as the glass silhouette, creating a constant-volume illusion. The tulip glass is constructed using two polygons sampled from Bézier curves, with the glass wall created through a clip-path: polygon(). The simit twist is achieved by building it from 7 repeating-conic-gradient strips with the conic phase advancing as the radius grows.
The interactions are discoverable through interactive CSS art techniques, such as leader lines, pulsing prop glows, and hover or keyboard focus cues.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
