Donut Panic 🍩 — Building an Interactive CSS-Only Donut

This work is a submission for the Frontend Challenge - Comfort Food Edition, CSS Art. The author, who typically writes about WordPress plugins and PHP standards, decided to build a donut for the challenge. The twist was to let users create their own donuts by selecting various toppings and glazes, all done using CSS and JavaScript kept to a minimum.

The demo shows users picking a glaze, loading it up with toppings, and then serving the donut. The animation is entirely driven by checkbox/radio inputs and the :has() selector. For instance, .kitchen:has(#serve:checked) .donut lets a parent element react to the checked state of an input hidden inside it. This means that the "Serve" button, the topping toggles, and the glaze picker are all styled labels tied to hidden inputs. JavaScript only comes in to smooth-scroll the stage into view on mobile after hitting "Serve."

The donut itself is made up of layered rings, not a single flat shape. There's a base dough circle with a radial gradient for color and lighting, a glaze layer on top clipped to a perfect circle, a hole punched through, and a shine layer that gives the donut a glossy appearance. The glaze is a custom property swap, so picking a different glaze updates both the lighting and depth together.

Toppings are independently toggleable layers, such as sprinkles, extra drizzle, and powdered sugar. Each topping is positioned absolutely and fades in or out using opacity and scale transitions tied to their own checkboxes. This allows for mixing and matching various glazes and toppings without any rule fighting another.

The "Serve" animation moves the donut from the prep station to the plate using top, width, and transform properties with a bouncy cubic-bezier easing. The button text flips from "Serve the Donut" to "Served! Enjoy 🎉" using a checked-state trick, and the topping menu locks visually so you can't edit a donut that's already left the kitchen.

The author is proud of creating a multi-step interaction using only :has(), custom properties, and transitions. They hope to add more glaze and topping combinations and possibly a "box of donuts" view that remembers everything built across a session in the future.