Developer builds interactive Turkish tea scene using only HTML and CSS

A frontend developer named Melik Baryanık created a fully interactive Turkish tea and simit scene for DEV Community's Frontend Challenge: Comfort Food Edition, using only HTML and CSS with no images or SVG. The artwork depicts a traditional Turkish çay setup — a tulip-shaped tea glass, saucer, sugar cubes, spoon, and sesame bread ring — rendered entirely through gradients, shadows, clip-paths, and masks. When loaded, an animated teapot pours tea into the glass in a physics-accurate sequence, after which users can click individual elements to trigger animations like sugar cubes dissolving or a spoon stirring the tea. The entire opening animation runs on a single 9-second CSS duration shared across all elements, with JavaScript serving only as a class toggler rather than handling any animation logic. The project comprises roughly 1,050 lines of CSS and just 15 lines of JavaScript, and gracefully degrades to a static finished illustration when JavaScript is disabled or reduced-motion is preferred.