SOURCE

<div id="mike">
  <div class="head"></div>
  <div class="horns"></div>
  <div class="smile"></div>
  <div class="arms"></div> 
  <div class="legs"></div>  
</div>

$color-cream:#fcf9d5;
$color-green:#9acd90;
$color-brown:#f0d2b4;
$color-pink:#f7a293;
$color-darkGray:#58585b;

@mixin rotate($rotate) {
  -webkit-transform: rotate($rotate);
     -moz-transform: rotate($rotate);
      -ms-transform: rotate($rotate);
       -o-transform: rotate($rotate);
          transform: rotate($rotate);
}

body { 
  text-align:center;  
  height: 100%; 
  margin: 0px; 
  background-color: $color-cream;
}
#mike{  
  margin: 20px auto;
  position: relative;
  height:510px;
  width:510px;
  
  div { 
    position:absolute;
  }
  
  div::before, div::after {
  content:'';
  position:absolute;
  display:block;
  }
  
}

.head{
  width:246.49px;
  height:242.49px;
  background-color:$color-green;
  border-radius:50%;
  left:131.756px;
  top:99.597px;
  &::before{
    width:135.95px;
    height:123.308px;
    border-radius: 50% / 60% 60% 40% 40%;
    background-color:white;
    left:55.269px;
    top:40.218px;
  }
  &::after{
    width:30.343px;
    height:39.559px;
    border-radius:50%;
    background-color:$color-darkGray;
    left:106.794px;
    top:95.679px;
    
  }
}
.horns{
  top:105.60px;
   &::before{
    width:48px;
    height:48px;
    border-top-left-radius:48px;
    background-color:$color-brown;    
    left:135px;
    @include rotate(-45deg);
  }
   &::after{
    width:48px;
    height:48px;
    border-top-right-radius:48px;
    background-color:$color-brown;    
    left:328.441px;
    @include rotate(45deg);
  }
   
}
.smile{
  width:147.95px;
  height:135.308px;
  border-radius: 50% / 60% 60% 40% 40%;
  border:solid 4px transparent;
  border-top:solid 4px $color-darkGray;  
  left:177.4px;
  top:125px;
  &::before{
    width:199.784px;  
    height:199.784px;
    border-radius:50%;
    border-top:solid 4px transparent;
    border-left:solid 4px transparent;
    border-bottom:solid 4px $color-darkGray;
    border-right:solid 4px $color-darkGray;
    left:-30px;
    top:-12px;
    @include rotate(45deg)
  }
  &::after{
    width:23.045px;
    height:13px;
    border-radius:50%;
    background-color:$color-pink;
    box-shadow: 196px 0px $color-pink;
    top:80px;
    left:-36px;
  }
}
.arms{
  z-index:-1;
  width:108.174px;
  height:50.017px;
  border-radius:50%;
  border:solid 26px $color-green;
  top:225.99px;
  left:110px;
  @include rotate(-28deg);
  &::before {
    width:108.174px;
    height:50.017px;
    border-radius:50%;
    border:solid 26px $color-green;   
    top:36px;
    left:88px;
    @include rotate(56deg); 
  }  
  &::after{
    width:32.65px;     
    height:32.65px;
    border-radius:50%;
    background-color:$color-green;
    box-shadow: 90px 50px $color-green;
    top:64px;
    left:24px;       
  }
}
.legs {
  z-index:-1;
  width:390px;
  height:38px;
  border-radius:50%;
  background-color:$color-brown;
  top:408px;
  left:68px;
  &::before{
  height:108.174px;
  width:20px;
  border-radius:50% ;
  border: solid 26px $color-green;
  border-bottom: solid 26px transparent;
  top:-124px;  
  left:150px;
  }
  &::after{
    width:60.998px;
    height:30.499px;
    border-radius: 30px 30px 0 0;
    background-color:$color-green;
    box-shadow: 67px 0 $color-green ;
    top:-10.4px;
    left:122px;
  }
}