<div class='center'>
  <div class='circle'>
    <div id="b1" class='base'>
      <div class='red'></div>
    </div>
    
    <div id="b2" class='base'>
      <div class='red'></div>
    </div>
    
    <div id="b3" class='base'>
      <div class='red'></div>
    </div>
    
    <div id="b4" class='base'>
      <div class='red'></div>
    </div>
    
    <div id="b5" class='base'>
      <div class='red'></div>
    </div>
    
    <div id="b6" class='base'>
      <div class='red'></div>
    </div>
    
    <div id="b7" class='base'>
      <div class='red'></div>
    </div>
    
    <div id="b8" class='base'>
      <div class='red'></div>
    </div>
    
    <div id="b9" class='base'>
      <div class='red'></div>
    </div>
    
    <div id="b10" class='base'>
      <div class='red'></div>
    </div>
    
    <div id="b11" class='base'>
      <div class='red'></div>
    </div>
    
    <div id="ball1" class="ball"></div>
    <div id="ball2" class="ball"></div>
    <div id="ball3" class="ball"></div>
    <div id="ball4" class="ball"></div>
    <div id="ball5" class="ball"></div>
    <div id="ball6" class="ball"></div>
    <div id="ball7" class="ball"></div>
    <div id="ball8" class="ball"></div>
    <div id="ball9" class="ball"></div>
    <div id="ball10" class="ball"></div>
    <div id="ball11" class="ball"></div>
    
    <div class='blood' id="bl1"></div>
    <div class='blood' id="bl2"></div>
    <div class='blood' id="bl3"></div>
    <div class='blood' id="bl4"></div>
  </div>
</div>
.center{
  display: flex; 
  align-items: center; 
  justify-content: center; 
  width:100%;
  height:100%;
  position:absolute;
  animation:rotate ease 2.5s 1s, rotate linear .2s infinite 3.5s;
}

@keyframes rotate{
  0%{transform:rotate(0deg);}
  100%{transform:rotate(360deg);}
}

.circle{
  width:80px;
  height:80px;
  border-radius:50%;
  position:relative;
}

.base{
  width:27px;
  height:27px;
  border:1px solid black;
  border-radius:43% 43% 50% 50% / 50% 50% 50% 50%;
  position:absolute;
  overflow:hidden;
}

.red{
  background-color:#ff6b6b;
  height:12px;
  border-bottom:1px solid black;
  border-radius:50%;
  width:30px;
  position:relative;
}

.red:after{
  content:"";
  position:absolute;
  width:10px;
  height:4px;
  border-radius:50%;
  background-color:white;
  left:8px;
  top:3px;
}

#b1{
  background-color:#feca57;
  top:-54px;
  left:10px;
  transform:rotate(-10deg);
}

#b2{
  background-color:#feca57;
  top:-35px;
  left:-27px;
  transform:rotate(-50deg);
}

#b3{
  background-color:#feca57;
  top:-1px;
  left:-51px;
  transform:rotate(-70deg);
}

#b4{
  background-color:#54a0ff;
  top:41px;
  left:-54px;
  transform:rotate(-95deg);
}

#b5{
  background-color:#b8e994;
  top:101px;
  left:0px;
  transform:rotate(-163deg);
}

#b6{
  background-color:#b8e994;
  top:105px;
  left:41px;
  transform:rotate(-200deg);
}

#b7{
  background-color:#b8e994;
  top:87px;
  left:80px;
  transform:rotate(-210deg);
}

#b8{
  background-color:#9c88ff;
  top:52px;
  left:103px;
  transform:rotate(-250deg);
}

#b9{
  background-color:#9c88ff;
  top:10px;
  left:106px;
  transform:rotate(85deg);
}

#b10{
  background-color:#cf6a87;
  top:-28px;
  left:87px;
  transform:rotate(55deg);
}

#b11{
  background-color:#cf6a87;
  top:-51px;
  left:52px;
  transform:rotate(20deg);
}

.ball{
  border:1px solid black;
  position:absolute;
  z-index:10;
}

#ball1{
  background-color:#b8e994;
  width:30px;
  height:45px;
  border-radius:45%;
  left:-42px;
  bottom:-40px;
  transform:rotate(50deg);
}

#ball2{
  background-color:#b8e994;
  width:30px;
  height:38px;
  border-radius:50%;
  left:-79px;
  bottom:2px;
  transform:rotate(120deg);
}

#ball3{
  background-color:#b8e994;
  width:30px;
  height:38px;
  border-radius:60% 40% 82% 18% / 57% 37% 63% 43%;
  left:-79px;
  bottom:80px;
  transform:rotate(-25deg);
}

#ball4{
  background-color:#78e08f;
  width:30px;
  height:38px;
  border-radius:75% 25% 84% 16% / 64% 19% 81% 36%;
  left:-16px;
  top:-100px;
  transform:rotate(35deg);
}

#ball5{
  background-color:#78e08f;
  width:30px;
  height:42px;
  border-radius:45%;
  left:64px;
  top:-115px;
  transform:rotate(90deg);
}

#ball6{
  background-color:#78e08f;
  width:25px;
  height:37px;
  border-radius:45%;
  left:137px;
  top:-82px;
  transform:rotate(-50deg);
}

#ball7{
  background-color:#38ada9;
  width:34px;
  height:34px;
  border-radius:56% 52% 52% 48% / 50% 54% 44% 51%;
  left:170px;
  top:-12px;
  transform:rotate(-50deg);
}

#ball8{
  background-color:#38ada9;
  width:30px;
  height:35px;
  border-radius:50%;
  left:156px;
  bottom:-19px;
  transform:rotate(-80deg);
}

#ball9{
  background-color:#38ada9;
  width:31px;
  height:40px;
  border-radius:46%;
  left:107px;
  bottom:-77px;
  transform:rotate(-70deg);
}

#ball10{
  background-color:#82ccdd;
  width:25px;
  height:28px;
  border-radius:46%;
  left:51px;
  bottom:-88px;
  transform:rotate(-15deg);
}


#ball11{
  background-color:#82ccdd;
  width:30px;
  height:37px;
  border-radius:46%;
  left:-10px;
  bottom:-78px;
  transform:rotate(20deg);
}



.blood{
  position:absolute;
  background-color:#ff6b6b;
  z-index:0;
}

#bl1{
  width:15px;
  height:20px;
  bottom:-63px;
  left:52px;
  transform:rotate(-15deg);
}

#bl2{
  width:7px;
  height:30px;
  bottom:-60px;
  left:104px;
  border-radius:10px;
  transform:rotate(-35deg);
}

#bl2:after{
  position:absolute;
  content:"";
  width:7px;
  height:20px;
  top:0;
  left:9px;
  border-radius:10px;
  transform:rotate(-15deg);
  background-color:#ff6b6b;
}


#bl3{
  width:5px;
  height:30px;
  bottom:-5px;
  left:142px;
  border-radius:10px;
  transform:rotate(-83deg);
}

#bl3:after{
  position:absolute;
  content:"";
  width:4px;
  height:5px;
  top:4px;
  left:-7px;
  border-radius:50%;
  transform:rotate(-15deg);
  background-color:#ff6b6b;
}

#bl3:before{
  position:absolute;
  content:"";
  width:7px;
  height:13px;
  top:13px;
  left:-7px;
  border-radius:40%;
  transform:rotate(-6deg);
  background-color:#ff6b6b;
}

#bl4{
  width:5px;
  height:10px;
  bottom:57px;
  left:157px;
  border-radius:78% 27% 62% 6% / 64% 19% 79% 51%;
  transform:rotate(-110deg);
}

#bl4:after{
  position:absolute;
  content:"";
  width:4px;
  height:5px;
  top:10px;
  left:7px;
  border-radius:50%;
  transform:rotate(-15deg);
  background-color:#ff6b6b;
}

#bl4:before{
  position:absolute;
  content:"";
  width:6px;
  height:8px;
  top:15px;
  left:-3px;
  border-radius:50%;
  transform:rotate(-15deg);
  background-color:#ff6b6b;
}
//Inspiration
//https://dribbble.com/shots/7918738-Phenakistoscope

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.