Categories
CSS JQuery Web development

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.

CSS Bitten Doughnut

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?

  1. Add HTML
  2. Add CSS
  3. 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);
}
CSS Doughnut

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);
}
CSS Sprinkle

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;
}
CSS Doughnut

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;
}
Bitten doughnut

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!

Categories
CSS Web development

CSS Doughnut Animation

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!

Doughnut

We’ll add some movements to the doughnut:

*animation opened in the Safari browser.
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),

sugar.png

and follow three steps below:

  1. Add HTML
  2. Add CSS
  3. 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!

Categories
Adobe Illustrator

How to make a doughnut in Adobe Illustrator?

Let’s have some fun with doughnuts! Today, in this tutorial step by step you’ll learn how to make a doughnut in Adobe Illustrator (CS6) using basic shapes and filters (watch also the video tutorial).

Doughnut

Step 1.

Create a new document, and using Eclipse Tool draw a circle, and draw another smaller circle inside. Duplicate both paths.

Step 2.

Remove stroke from the bigger circles, make the front circle smaller, and set the light brown colour to the front circle and darker brown to the back circle.

We’ll do now similar thing to the small circles. Remove stroke from the smaller circles, make the front circle smaller, and set the white colour to the front circle and pink to the back one.

Step 3.

Using Eclipse Tool draw a circle, and fill it pink.

Go to Effects->Distort & Transform->Zig Zag.

Set the size 3mm, ridges per segment 4, and points Smooth.

Move the new shape on the doughnut and adjust the size (if necessary reorder the layers in the Layers Panel).

Step 4.

Use Rounded Rectangle Tool and put small colourful rectangles all over the new shape.

Doughnut is ready! Fast and easy. Isn’t it? 🙂

Watch also the video tutorial: