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