Developer builds pure CSS animated boiling egg scene for frontend challenge

A developer created a fully CSS-based animated illustration of soft-boiling eggs as an entry for the DEV Community Frontend Challenge, Comfort Food Edition. The piece depicts a glass bowl on an induction hob, with no SVG or images used — only divs, gradients, and shadows. A key technical challenge was simulating realistic heat lag, where the water and eggs respond to the hob element with a natural delay rather than snapping instantly. The developer used CSS registered custom properties via @property to animate heat and water movement as interpolatable numeric values. Design choices like a glass bowl and glowing induction ring were made deliberately to showcase transparency effects and a warm light source within an otherwise grey scene.