Bitten Doughnut Animation

Some time ago I posted the tutorial CSS Doughnut Animation where I used the only CSS to create it. Today, I created similar Doughnut, but to animate “bites” I used jQuery.

The doughnut has been bitten 🙂

*animation opened in the Safari browser.
To see the live output of the animation click here.

What do you need to do?

Add HTML
Add CSS
Add jQuery/JS

Step1.

Add HTML

Draw your Doughnut:

<div class="container">
  <div class="content">
    <div class="doughnut"></div>
    <div class="sugar"></div>
    <div class="sugar1"></div>
    <div class="right"></div>
    <div class="sprinkles">
      <div class="sprinkle1"></div>
      <div class="sprinkle2"></div>
      <div class="sprinkle3"></div>
    </div>
    <div class="bite">
      <div class="bite1"></div>
      <div class="bite2"></div>
      <div class="bite3"></div>
      <div class="bite4"></div>
      <div class="bite5"></div>
      <div class="bite6"></div>
      <div class="bite7"></div>
  
    </div>
    <div class="crumbs">
      <div class="crumb1"></div>
      <div class="crumb2"></div>
    </div>
    <div class="shadow"></div>
  </div>
</div>

Step2.

Add CSS

Set the position and the color of the background, the container, and the content:

body {
  background-color: #720026;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  
}
.container {
  position: relative;
  top:-50px;
}

.content {
  position: relative;
}

Style the doughnut:

.doughnut { 
    position: relative;
    border: 120px solid #FF9B54;
    border-radius: 50%;
    box-shadow: inset 5px 5px 1px #FF7F51, 5px 5px 1px #FF7F51;
    height:150px;
    width:150px;
    
}

.doughnut:after {
  content:"";
  position: absolute;
  height: 170px;
  width: 170px;
  border-top:100px solid #CE4257;
	border-right:100px solid #CE4257;
  border-left:100px solid #CE4257;
  border-bottom: 100px solid transparent;
	border-radius:50%;
  top:-115px;
  left:-110px;
  z-index:1;
  
  
}
.doughnut:before {
  content:"";
  position: absolute;
  width:115px;
  height:110px;
  background-color: #FF9B54;
  left:-90px;
  top:100px;
  z-index:2;
  transform: skew(23deg);
}
.sugar {
  position: absolute; 
  background-color: #CE4257;
  width: 40px;
  height: 50px;
  border-radius:100px;
  top:190px;
  z-index:3;
  left:74px;
  transform: skew(15deg);
  box-shadow: 0 5px 0 rgba(255, 255, 255, 0.3);
  
}
.sugar:after {
  content:"";
  position: absolute; 
  background-color: #FF9B54;
  width: 40px;
  height: 50px;
  border-radius:100px;
  left:-40px;
  box-shadow:inset 0 5px 0 rgba(255, 255, 255, 0.3);
  
}
.sugar:before {
  content:"";
  position:absolute;
  background-color: #CE4257;
  width:23px;
  height:35px;
  top:15px;
  left:-63px;
  border-radius:100px;
  transform: skew(-5deg);
  box-shadow: 0 5px 0 rgba(255, 255, 255, 0.3);
  
}
.sugar1 {
  position: absolute;
  width:120px;
  height:80px;
  background-color: #FF9B54;
  left:230px;
  top:258px;
  z-index:2;
  transform: skew(-30deg);
}

.sugar1:after {
  content:"";
  position: absolute;
  width:40px;
  height:40px;
  background-color: #CE4257;
  border-radius:100px;
  top:-25px;
  left:-2px;
  transform: skew(10deg);
  box-shadow:0 5px 0 rgba(255, 255, 255, 0.3);
  
}
.sugar1:before {
  content:"";
  position: absolute; 
  width:40px;
  height:40px;
  background-color: #FF9B54;
  z-index:3;
  border-radius:100px;
  left:39px;
  top:-20px;
  box-shadow:inset 0 5px 0 rgba(255, 255, 255, 0.3);
}
.right {
  position: absolute;
  background-color: #CE4257;
  width:36px;
  height:40px;
  left:331px;
  top:238px;
  z-index:4;
  border-radius:100px;
  transform: skew(-25deg);
  box-shadow:0px 5px 0 rgba(255, 255, 255, 0.3);
}

Add some sprinkles:

.sprinkles {
  position: absolute;
  z-index:5;
}

.sprinkle1 {
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #FEE440;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-260px;
  left:50px;
  transform: rotate(20deg);
}
.sprinkle1:after {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #F15BB5;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-60px;
  left:50px;
  transform: rotate(20deg);
}

.sprinkle1:before {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #00BBF9;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-110px;
  left:100px;
  transform: rotate(-60deg);
}

.sprinkle2 {
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #00F5D4;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-260px;
  left:340px;
  transform: rotate(70deg);
}

.sprinkle2:after {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #00F5D4;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:200px;
  left:-160px;
  transform: rotate(30deg);
}

.sprinkle2:before {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #9B5DE5;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:100px;
  left:-160px;
  transform: rotate(30deg);
}

.sprinkle3 {
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #FEE440;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-210px;
  left:300px;
  transform: rotate(-40deg);
}

.sprinkle3:before {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #9B5DE5;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-90px;
  left:30px;
  transform: rotate(30deg);
}

.sprinkle3:after {
  content:"";
  position: absolute; 
  border-radius:100px;
  height: 30px;
  width: 10px;
  background-color: #F15BB5;
  box-shadow:inset -3px 3px 0 rgba(0,0,0,0.07), 4px 4px 1px rgba(255, 255, 255, 0.3);
  top:-120px;
  left:60px;
  transform: rotate(-180deg);
}

Shadow and crumbs:

.crumbs {
  position: absolute;
  
}

.crumb1 {
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset 5px 5px 0 #FF7F51;
  width:30px;
  height:30px;
  
}

.crumb1:after {
  content:"";
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset 5px 5px 0 #FF7F51;
  width:20px;
  height:20px;
  left:-30px;
  top:-30px;
  
}

.crumb1:before {
  content:"";
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset 5px 5px 0 #FF7F51;
  width:10px;
  height:10px;
  left:-50px;
  top:10px;
  
}

.crumb2 {
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset -5px -5px 0 #FF7F51;
  width:30px;
  height:30px;
  top:-20px; 
  left:350px;
}

.crumb2:after {
  content:"";
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset -5px -5px 0 #FF7F51;
  width:20px;
  height:20px;
  left:-40px;
  top:40px;
}

.crumb2:before {
  content:"";
  position: absolute;
  background-color: #FF9B54;
  border-radius:50%;
  box-shadow: inset -5px -5px 0 #FF7F51;
  width:10px;
  height:10px;
  left:60px;
  top:30px;
}

.shadow {
  position: absolute;
  width:500px;
  height:100px;
  background-color: rgba(0,0,0,0.07);
  border-radius:50%;
  left:-50px;
  top:350px;
  z-index:-2;
}

Create the bites:

.bite {
  position: absolute;
  z-index:100;
}

.bite1 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:250px;
  top:-380px;
 
}
.bite1:after {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:40px;
  left:60px;
}

.bite1:before {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:-40px;
  left:-30px;
}

.bite2 {
  position: absolute;
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  top:-400px;
  left:90px;  
}

.bite2:after {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:65px;
  top:0;
}

.bite2:before {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:-65px;
  top:0;
}

.bite3 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:310px;
  top:-220px;
}

.bite3:after {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:15px;
  top:-50px;
}

.bite3:before {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:15px;
  top:60px;
}

.bite4 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:210px;
  top:-320px;
}

.bite4:after {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:55px;
  top:35px;
}

.bite4:before {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:-35px;
  top:-35px;
}

.bite5 {
  position: absolute;
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:50px;
  top:-330px;
}

.bite5:before {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:75px;
  top:5px;
}

.bite5:after {
  content:"";
  position: absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  left:-70px;
  top:0px;
}
.bite6 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:-10px;
  top:-220px;
 
}
.bite6:after {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:50px;
  left:10px;
}

.bite6:before {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:-40px;
  left:0;
}

.bite7 {
  position: absolute; 
  background-color: #720026;
  width:100px;
  height:100px;
  border-radius:50%;
  left:50px;
  top:-220px;
 
}
.bite7:after {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:50px;
  left:30px;
}

.bite7:before {
  content:"";
  position:absolute;
  background-color: #720026;
  width:90px;
  height:90px;
  border-radius:50%;
  top:-40px;
  left:15px;
}

Step3.

Add jQuery /JS

(function($){ 
    
    var el = $('.bite1, .bite2, .bite3, .bite4, .bite5, .bite6, .bite7');
    var animationLength = 400;
    var duration = el.length * animationLength + animationLength;
    var clearAfter = 100;
    var animation;
    
    function fadeNext(collection){
        collection.eq(0).fadeIn(animationLength, function(){
            (collection=collection.slice(1)).length 
            && fadeNext(collection)
        });
    }
    
    function play(){
        fadeNext(el);
        animation = setTimeout(function(){
            el.hide();
            play();
        }, duration);
    }
    play();
    
    setTimeout(function(){
         clearTimeout(animation);   
    }, duration * clearAfter);
})(jQuery)

To see the live output of the animation go to lenastanley.com.

Enjoy coding!

Share this: