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.

Inspiration

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

Demo

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...

facepalm


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!

Journey

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)

Collapse
 
alvaromontoro profile image
Alvaro Montoro

There goes my donut idea...

Collapse
 
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

Collapse
 
ben profile image
Ben Halpern

Wow

Collapse
 
sarahokolo profile image
sahra 💫

My oh my. That's amazing 🤩

Collapse
 
dorothyjay profile image
Dorothy_Jay

WOW what fun !🥳

Collapse
 
anmolbaranwal profile image
Anmol Baranwal

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

Collapse
 
erinao profile image
Erin A Olinick

Love it!

Collapse
 
link2twenty profile image
Andrew Bone

You didn't disappoint 😉

Collapse
 
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...

Collapse
 
jak2k profile image
Jak2k

Safari is the new internet explorer.

Collapse
 
ngdangtu profile image
Đăng Tú

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

Collapse
 
jitendrachoudhary profile image
Jitendra Choudhary

Amazing, Temani !!

Collapse
 
pizofreude profile image
Pizofreude

Genius, har har har har :D