Yesterday you could learn how to make a doughnut in Adobe Illustrator, however, if you are not familiar with Illustrator you can create a doughnut on your website using CSS!

We’ll add some movements to the doughnut:
To see the live output click here.
What do you need to do?
You need to have an image of the sweet top of the doughnut in png. format (you can use mine below),

and follow three steps below:
- Add HTML
- Add CSS
- Add CSS Animation
Step 1.
Add HTML
We need to create a container, add doughnut, sweet top, and some sprinkles.
<div class="container">
<img src="https://lenadesign.org/wp-content/uploads/2020/02/sugar.png?w=640" id="sugar">
<div class="doughnut"></div>
<div class="sprinkle">
<div class="sprinkle1"></div>
<div class="sprinkle2"></div>
<div class="sprinkle3"></div>
<div class="sprinkle4"></div>
<div class="sprinkle5"></div>
<div class="sprinkle6"></div>
<div class="sprinkle7"></div>
<div class="sprinkle8"></div>
<div class="sprinkle9"></div>
<div class="sprinkle10"></div>
</div>
</div>
Step 2.
Add CSS
Set the colour of the background:
body {
background-color: #F9E79F;
}
Create a container, add a doughnut and sugar (sweet top):
.container {
top: 0;
position: relative;
left: 40%;
}
.doughnut {
position: relative;
border: 120px solid #D68438;
border-radius: 50%;
box-shadow: 5px 5px 1px brown;
height:150px;
width:150px;
z-index: 1;
top: -350px;
}
#sugar{
position: relative;
z-index: 2;
max-width: auto;
height: 360px;
top: 30px;
left: -50px;
animation: spin 4s;
}
Note: To the #sugar I added an animation – spin.

Add sprinkles:
.sprinkle {
position: absolute;
z-index: 3;
top: 190px;
left: 200px;
}
.sprinkle1 {
height: 45px;
width: 15px;
background-color: green;
border-radius: 500px;
transform: rotate(-20deg);
position: absolute;
top: 80px;
animation: bounceInDown .5s;
}
.sprinkle2 {
height: 45px;
width: 15px;
background-color: yellow;
border-radius: 500px;
transform: rotate(-40deg);
position: absolute;
top: 35px;
left: 115px;
animation: bounceInDown .5s;
animation-delay: 0.1s;
}
.sprinkle3 {
height: 45px;
width: 15px;
background-color: blue;
border-radius: 500px;
transform: rotate(40deg);
position: absolute;
top: -15px;
left: 100px;
animation: bounceInDown .5s;
animation-delay: 0.2s;
}
.sprinkle4 {
height: 45px;
width: 15px;
background-color: red;
border-radius: 500px;
transform: rotate(90deg);
position: absolute;
top: -15px;
left: -100px;
animation: bounceInDown .5s;
animation-delay: 0.3s;
}
.sprinkle5 {
height: 45px;
width: 15px;
background-color: lightblue;
border-radius: 500px;
transform: rotate(70deg);
position: absolute;
top: 55px;
left: -110px;
animation: bounceInDown .5s;
animation-delay: 0.4s;
}
.sprinkle6 {
height: 45px;
width: 15px;
background-color: orange;
border-radius: 500px;
transform: rotate(-30deg);
position: absolute;
top: -80px;
left: -110px;
animation: bounceInDown .5s;
animation-delay: 0.5s;
}
.sprinkle7 {
height: 45px;
width: 15px;
background-color: green;
border-radius: 500px;
transform: rotate(40deg);
position: absolute;
top: -110px;
left: -40px;
animation: bounceInDown .5s;
animation-delay: 0.6s;
}
.sprinkle8 {
height: 45px;
width: 15px;
background-color: lightblue;
border-radius: 500px;
transform: rotate(-40deg);
position: absolute;
top: -130px;
left: -5px;
animation: bounceInDown .5s;
animation-delay: 0.7s;
}
.sprinkle9 {
height: 45px;
width: 15px;
background-color: red;
border-radius: 500px;
transform: rotate(-80deg);
position: absolute;
top: -90px;
left: 55px;
animation: bounceInDown .5s;
animation-delay: 0.8s;
}
.sprinkle10 {
height: 45px;
width: 15px;
background-color: orange;
border-radius: 500px;
transform: rotate(80deg);
position: absolute;
top: 90px;
left: 55px;
animation: bounceInDown .5s;
animation-delay: 0.9s;
}
Note: To each of sprinkle I added an animation – bounceInDown and animation-delay.

Step 3.
Add CSS Animation
To make sweet top spin:
@keyframes spin {
from{
}
to{
transform:rotate(360deg);
}
}
To make sparkles bounceInDown:
@keyframes bounceInDown {
0% {
opacity: 0;
transform: translateY(-1000px);
}
60% {
opacity: 1;
transform: translateY(10px);
}
80% {
transform: translateY(10px);
}
100% {
transform: translateY(0);
}
}
To see the live output visit lenastanley.com (in the modified version to the blogger post).
Enjoy coding!