DEV Community

Cover image for The Frontend Challenge: 🍩 Donut eat my favorite snack!
Temani Afif
Temani Afif

Posted on

The Frontend Challenge: 🍩 Donut eat my favorite snack!

This is a submission for DEV Challenge v24.03.20, CSS Art: Favorite Snack.


I think the cover image is more than explicit. I will be drawing a Donut which is the favorite snack of many of you.

To draw this snack, I invited a Donut expert to help me get the perfect output and make sure my art is so realistic that you want to eat it but donut eat it!

I know, I know. You are excited to see the result, so let's jump straight to the demo.

drum roll


Ladies and gentlemen here is my CSS Art: A Beautiful Donut 🥳

Noooooooooooo 😱

He was supposed to help me draw a Donut not eat it. I spent a lot of time making a perfect donut but now it's over... 😩

Sorry for this inconvenience, instead of a Donut my entry will be "Homer Simpson ate my Donut".

I was really proud of my Donut...


Wait a minute, nothing is lost! I have tried to make a few donuts before he came. Yes, I am saved!

Well, they are not as perfect as the one Homer ate but still good ones.

Hurry Up and select one before he eats them as well!


I wanted something a bit surprising and creative so I hope you liked this plot twist 😁

The donut is a single-element implementation and can be easily adjusted to get as many variations as you want. I used an <input> tag to get that "eating" effect on click.

Drawing Homer Simpson was more complicated but it was a good opportunity to get back to some CSS Arts so thank you for this challenge!

The demos are best viewed in Chrome (or Firefox).

Please, don't ask me about Safari

Top comments (14)

alvaromontoro profile image
Alvaro Montoro

There goes my donut idea...

afif profile image
Temani Afif

I also made a 3D one with a lot of beautiful effects but unfortunately ... 🥲

The only ones left are the simple 2D ones

ben profile image
Ben Halpern


sarahokolo profile image
sahra 💫

My oh my. That's amazing 🤩

dorothyjay profile image

WOW what fun !🥳

anmolbaranwal profile image
Anmol Baranwal

I was hooked the moment I saw the thumbnail.
Really loved your awesome work! The twist as well 😆

erinao profile image
Erin A Olinick

Love it!

link2twenty profile image
Andrew Bone

You didn't disappoint 😉

ngdangtu profile image
Đăng Tú

This challenge sure knows how to bring out some hidden talents in both professional and side-skill like comedian huh...

Anway, Temani Afif, about safari... could you... you know...

jak2k profile image

Safari is the new internet explorer.

ngdangtu profile image
Đăng Tú

shh, it won't be secret if ya say it aloud, ya know -_-

jitendrachoudhary profile image
Jitendra Choudhary

Amazing, Temani !!

pizofreude profile image

Genius, har har har har :D

chrisburkssn profile image
Chris Burks

That was pretty cool!