It's a DONUT!

This is a submission for Frontend Challenge - June Celebrations, CSS Art: June Celebrations.

Inspiration

I wanted to celebrate the joy and playfulness of National Donut Day through a purely CSS-driven illustration. Donuts are universally loved and instantly recognizable, so recreating one with only HTML and CSS felt like a fun test of creativity and technique. Drawing a frosted donut with colorful sprinkles allowed me to experiment with CSS gradients, shape techniques (using border-radius), and pseudo-elements for sprinkles. The challenge to avoid any images or JavaScript pushed me to think deeply about how CSS alone can convey a rich, mouth-watering design.

Demo

Journey

When I began, I sketched a basic donut shape on paper to figure out proportions: a circular base, a slightly larger ring of icing, and scattered sprinkles. Translating that into HTML/CSS meant:

1. Creating the Donut Base

   • I used a <div class="donut-base"> with border-radius: 50% and a soft dough color.
   • Centering it with Flexbox made responsiveness easier (using relative vw units to scale).

2. Forming the Hole and Icing

   • The hole is another circle inside (<div class="donut-hole">) with a background matching the page, giving the illusion of a cut-out.
   • The icing layer (<div class="icing">) sits on top with a custom border-radius to mimic dripped frosting and a radial gradient for depth.

3. Sprinkles with Pseudo-Elements and Keyframes

   • I placed multiple <div class="sprinkle"> elements, each styled with different colors.
   • Each sprinkle uses transform: rotate(...) to tilt it and a subtle animation: fall to create a gentle “bobbing” effect—bringing the scene to life.

4. Responsiveness & Accessibility

   • By using width: 80vw; max-width: 500px; for the container, the donut stays proportionate on mobile and desktop.
   • I added role="img" and aria-label="CSS art of a frosted donut with colorful sprinkles for National Donut Day" on the wrapper to ensure screen readers describe the art.

Throughout development, balancing realism (icing drips, sprinkle placement) with clean, performant CSS was rewarding. I learned how creative use of gradients and pseudo-elements can replace images entirely. Going forward, I’d like to explore adding more dynamic animations—perhaps a gentle rotation or interactive hover states that cause sprinkles to “bounce” when hovered.