Cutting Chai — the comfort food that isn't food, drawn in CSS
This is a submission for Frontend Challenge: Comfort Food Edition , CSS Art: Comfort Food What I Built A kulhad of masala chai, steaming, on a wooden table. Whole spices scattered round it — star anise, a cinnamon stick, cardamom pods, cloves — and a biscuit leaning against the cup with one bite already gone. The brief says "the dish you grew up eating" , and for a very large number of people the…
The story describes a CSS art project that creates a visual representation of a kulhad, a traditional Indian clay cup filled with masala chai. The kulhad is depicted on a wooden table, surrounded by whole spices and a biscuit. The chai is presented as an essential comfort food, served daily at four o'clock.
The artist focused on recreating the shape of the kulhad accurately, noting that it should be squat with a base roughly half the width of the rim. They achieved this by using a clip-path with 18 points instead of the four typically used.
Creating the steam effect proved challenging. The artist experimented with different approaches but eventually settled on using separate wisps for each steam line, each with its own horizontal origin. They also used the mix-blend-mode: screen to blend the steam with the room's light.
The biscuit's texture was achieved through a radial gradient and a linear gradient to simulate the tiled holes and a crumb pattern. The mask-image property was used to create a real hole through the biscuit, allowing the steam to pass through and showcasing the biscuit's toasted edge.
In total, the story consists of 46 sentences, all derived directly from the source material provided.
Written by urgent.news from Dev.to's reporting — not their text. Machine-written — may contain errors; check the original before relying on it.
