SOURCE

<div class="cat-head bg-blue">
  <div class="cat-face bg-white">
    <div class="cat-eye bg-white eye1"></div>
    <div class="cat-eye bg-white eye2"></div>
    <div class="cat-nose bg-red"></div>
    <div class="cat-nose1"></div>
    <div class="cat-mouse"></div>
    <div class="cat-beard beard1"></div>
    <div class="cat-beard beard2"></div>
    <div class="cat-beard beard3"></div>
    <div class="cat-beard beard4"></div>
    <div class="cat-beard beard5"></div>
    <div class="cat-beard beard6"></div>
  </div>
</div>
<div class="cat-alarm bg-yellow"></div>
<div class="cat-neck bg-red"></div>
<div class="cat-body bg-blue">
  <div class="cat-xiong bg-white"></div>
  <div class="cat-arm arm1 bg-blue"></div>
  <div class="cat-arm arm2 bg-blue"></div>
  <div class="cat-hand hand1 bg-white"></div>
  <div class="cat-hand hand2 bg-white"></div>
  <div class="cat-foot foot1 bg-white"></div>
  <div class="cat-foot foot2 bg-white"></div>
</div>

div{
  border: 2px solid;
  position: absolute;
  z-index: 2;
}
.bg-blue{
  background-color: rgb(0,111,226);
}
.bg-white{
  background-color: #fff;
}
.bg-red{
  background-color: #f00;
}
.bg-yellow{
  background-color: yellow;
}
.cat-head{
  width: 200px;
  height: 200px;
  position:relative;
  margin: 0 auto;
  border-radius: 50%;
}
.cat-face{
  width: 160px;
  height: 160px;
  border-radius:50%;
  left: calc(50% - 80px);
  bottom: 0;
}
.cat-eye{
  width: 25px;
  height: 50px;
  top: -20px;
  border-radius: 40%;
}
.eye1{
  left: 50px;
  transform: rotate(-5deg);
}
.eye1:before{
  content: "·";
  font-size: 40px;
  font-weight: bold;
  position: absolute;
  right: 0;
}
.eye2{
  left: 80px;
  transform: rotate(5deg);
}
.eye2:before{
  content: "^";
  font-size: 20px;
  font-weight: bold;
  position: absolute;
  left: 2px;
  bottom: 6px;
}
.cat-nose{
  width: 25px;
  height: 25px;
  left: 66px;
  border-radius: 50%;
  top: 29px;
}
.cat-nose1{
  height: 38px;
  left: 78px;
  top: 56px;
}
.cat-mouse{
  width: 120px;
  height: 80px;
  border-radius: 50%;
  left: 20px;
  top: 16px;
  border-top: 0;
  border-left: 0;
  border-right: 0;
}
.cat-beard{
  width: 28px;
}
.beard1{
  transform: rotate(20deg);
  left: 20px;
  top: 44px;
}
.beard2{
  left: 16px;
  top: 62px;
}
.beard3{
  transform: rotate(-18deg);
  left: 20px;
  top: 76px;
}
.beard4{
  transform: rotate(-20deg);
  left: 110px;
  top: 44px;
}
.beard5{
  left: 114px;
  top: 62px;
}
.beard6{
  transform: rotate(18deg);
  left: 110px;
  top: 76px;
}
.cat-neck{
  width: 160px;
  height: 12px;
  top: -70px;
  z-index: 3;
  position: relative;
  margin: 0 auto;
}
.cat-body{
  position: relative;
  width: 160px;
  height: 120px;
  margin: 0 auto;
  top: -72px;
}
.cat-alarm{
  width: 25px;
  height: 25px;
  border-radius: 50%;
  top: -41px;
  z-index: 4;
  position: relative;
  margin: 0 auto;
}
.cat-xiong{
  width: 120px;
  height: 120px;
  border-radius:50%;
  top: -12px;
  left: calc(50% - 62px);
  z-index: 1;
}
.cat-arm{
  width: 40px;
  height: 40px;
  transform: rotate(45deg);
  top: 8px;
}
.arm1{
  left: -22px;
  border-top:0;
  border-right:0;
  border-top-right-radius: 50%;
}
.arm2{
  left: 140px;
  border-left:0;
  border-bottom:0;
  border-bottom-left-radius: 50%;
}
.cat-hand{
  width: 40px;
  height: 40px;
  border-radius:50%;
  top: 20px;
}
.hand1{
  left: -34px;
}
.hand2{
  left: 150px;
}
.cat-foot{
  width: 100px;
  height: 20px;
  bottom: -25px;
}
.foot1{
  border-top-left-radius: 40%;
  border-bottom-left-radius: 40%;
  left: -23px;
}
.foot2{
  border-top-right-radius: 40%;
  border-bottom-right-radius: 40%;
  right: -23px;
}