.wrap
  .sootball
    .left-leg
    .right-leg
    .arms
    .body
    .hair-wrap
      .hair
        .hair
          .hair
            .hair
              .hair
                .hair
                  .hair
                    .hair
                      .hair
                        .hair
                          .hair
                            .hair
                              .hair
                                .hair
                                  .hair
                                    .hair
                                      .hair
                                        .hair
    .eyes
    .coal
      .dark
      .medium
      .medium2
      .light
      
      
.ccc
  |Made by 
  a(href='http://chilliconcode.com', target='_blank') chilliconcode.com
View Compiled
//---------------------
//  Resize the soot ball here: 
$size:100px;
//---------------------

body {
  margin:0;
  overflow:hidden;
}

div, div:after, div:before {
  position:absolute;
  content:"";
}

.wrap {
  width:100%;
  height:100%;  
  background: radial-gradient(circle, #885853, #3c2b30);
}

.sootball {
  position: relative;
  top: 50%;
  transform: translateY(-50%);
  height:0;
  width:$size;
  margin:auto;
}

.hair {
  width:$size*1.3;
  height:$size*0.01;
  background:#221c1e;
  transform:rotate(10deg);
}

.hair-wrap {
  top:$size*0.5;
  left:$size*-0.15
}

.body {
  width:$size;
  height:$size;
  border-radius:50%;
  background:#2e2127;
}

.eyes {
  background:#d5b39d;
  width:$size*0.32;
  height:$size*0.35;
  border-radius:50%;
  top:$size*0.3;
  left:$size*0.1;
  box-shadow: $size*0.48 0 0 0 #d5b39d;
}

.eyes:after {
  background:#221c1e;
  width:$size*0.05;
  height:$size*0.05;
  border-radius:50%;
  top:$size*0.15;
  left:$size*0.2;
  box-shadow: $size*0.35 0 0 0 #221c1e;
}

.left-leg {
  width:$size*0.6;
  height:$size;
  top:$size*0.6;
  left:$size*-0.1;  
  border-bottom:$size*0.03 solid #221c1e;
  border-left:$size*0.03 solid #221c1e;
  border-right:$size*0.03 solid transparent;
  border-radius:0 0 0 $size*0.6;
  transform:rotate(50deg);
}
.left-leg:after {
  width:$size*0.2;
  height:$size*0.03;
  background:#221c1e;
  bottom:$size*-0.1;
  right:$size*-0.06;
  transform:rotate(-50deg);
}

.right-leg {
  width:$size*0.6;
  height:$size;
  top:$size*0.6;
  left:$size*0.4;  
  border-right:$size*0.03 solid #221c1e;
  border-bottom:$size*0.03 solid #221c1e;
  border-left:$size*0.03 solid transparent;
  border-radius:0 0 $size*0.6 0;
  transform:rotate(-50deg);  
}
.right-leg:after {
  width:$size*0.2;
  height:$size*0.03;
  background:#221c1e;
  bottom:$size*-0.1;
  left:$size*-0.06;
  transform:rotate(50deg);
}

.arms {
  width:$size*2;
  height:$size*1;  
  border:$size*0.03 solid #221c1e;
  border-radius:0 0 $size*2 $size*2;
  top:$size*-0.6;
  left:$size*-0.55;
}

.coal{
  width:$size;
  height:$size;
  top:$size*-1.29;
  left:$size*-0.05;
}

.dark {
  width:$size*1;
  height:$size*0.8;
  background:#251420;
  border-radius:$size*0.15;
  transform:skewy(10deg);
  left:$size*-0.7;
  box-shadow:$size*1 $size*-0.8 0 0 #251420;
}
.dark:after {
  width:$size*1.2;
  height:$size*0.9;
  background:#251420;
  border-radius:$size*0.15;
  transform:skewy(-30deg);
  left:$size*0;
  top:$size*-0.5;
  box-shadow:$size*1.3 $size*0.95 0 0 #251420;
}
.dark:before {
  width:$size*1;
  height:$size*1.1;
  background:#251420;
  border-radius:$size*0.15;
  left:$size*1.4;
  top:$size*-0.85;
  box-shadow:$size*-1 $size*0.7 0 0 #251420;
}

.medium {
  width: $size*0.9;
  height: $size*0.4;
  background: #463038;
  border-radius: $size*0.15;
  top: $size*-0.63;
  left: $size*0.4;
  transform: skewy(10deg) skewx(-60deg);
  box-shadow:inset $size*-0.2 $size*0.02 0 0 #775c65;
}

.medium:after {
  width: $size;
  height: $size*0.6;
  background: #463038;
  border-radius: $size*0.15 $size*0.15 $size*0.15 $size*0.3;
  top: $size*0.05;
  left: $size*-0.25;
  box-shadow: inset $size*-0.2 $size*0.03 0 0 #775c65;
}

.medium2 {
  width: $size*1.15;
  height: $size*0.8;
  background:#463038;
  box-shadow:inset $size*-0.2 $size*-0.05 0 0 #775c65;
  border-radius: 0 $size*0.15 $size*0.15 $size*0.3;
  top: $size*-0.02;
  left: $size*0.6;
  transform: skewy(-22deg) skewx(0deg);
}
.medium2:after {
  width: $size*0.8;
  height: $size*0.8;
  background: #463038;
  border-radius: $size*0.2 $size*0.2 $size*0.2 $size*0.3;
  top: $size*-0.25;
  left: $size*-0.3;
  box-shadow:0 $size*0.08 0 0 #251420, inset $size*-0.1 0 0 0 #775c65; 
}


.ccc, .ccc a {
  bottom:0px;
  right:0px;
  font-family:Tahoma;
  font-size:10pt;
  padding:5px;
  background:#eb5252;
  border-radius:5px 0 0 0;
  color:white;
}
View Compiled
/*-------------------------------------
See all in the Ghibli CSS series: 

https://codepen.io/chilliconcode/pens/tags/?selected_tag=ghibli

-------------------------------------*/
Rerun