.wrap
  .noface
    .body
    .face
      .face-cheeks
      .face-paint
      .eyes
        .eye-bags
      .mouth
 
.ccc
  |Made by 
  a(href='http://chilliconcode.com', target='_blank') chilliconcode.com
View Compiled
//---------------------
//  Resize No-Face here:
$size:100px;
//---------------------

body {
  margin:0;
}

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


.wrap {
  width:100%;
  height:100%;  
  background: radial-gradient(circle, #b291b0, #6f5151);
}

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

.body {
  height:$size*3;
  width:$size;
  background:black;
  background:linear-gradient(black 60%, transparent 100%);
  top:$size*0.7;
}

.body:after {
  border-radius:45%;
  top:-$size*0.7;
  background:black;
  width:$size;
  height:$size*1.5;
}

.face {
  width:$size*0.8;
  height:$size;
  background:#ffe0dd;
  border-radius:50%;
  top:$size*0.1;
  left:$size*0.1;
}
.face:before {
  width:$size*0.36;
  height:$size*0.15;
  background:#ffe0dd;
  border-radius:50%;
  top:$size*0.98;
  left:$size*0.22;
}
.face-cheeks {
  width:$size*0.61;
  height:$size*0.2;
  background:#ffe0dd;
  border-radius:50%;
  top:$size*0.73;
  left:$size*-0.13; 
  transform:rotate(65deg);
}
.face-cheeks:after {
  width:$size*0.61;
  height:$size*0.2;
  background:#ffe0dd;
  border-radius:50%;
  top:$size*-0.41;
  left:$size*0.19; 
  transform:rotate(50deg);
}

.eyes {
  width:$size*0.2;
  height:$size*0.12;
  background:black;
  border-radius:40%;
  top:$size*0.37;
  left:$size*0.05;
  box-shadow: $size*0.49 0 0 0 black;
}

.eye-bags {
  width:$size*0.15;
  height:$size*0.05;
  background:#60545c;
  border-radius: 20% 20% 50% 50%;
  top:$size*0.16;
  left:$size*0.03;
  box-shadow: $size*0.48 0 0 0 #60545c;
}

.mouth {
  width:$size*0.25;
  height:$size*0.08;
  background:black;
  border-radius:30% 30% 50% 50%;
  top:$size*0.9;
  left:$size*0.275;
}

.mouth:after {
  width:$size*0.15;
  height:$size*0.05;
  background:#998191;
  border-radius:20% 20% 50% 50%;
  top:$size*0.12; 
  left:$size*0.05;
}

.face-paint {
  width:$size*0.6;
  height:$size*0.9;
  background:#998191;
  border-radius:50%;
  left:$size*0.1;
  top:$size*0.05;
  overflow:hidden;
}

.face-paint:after {
  width:$size*0.3;
  height:$size*1.5;
  left:$size*0.15;
  background:#ffe0dd;
}
.face-paint:before {
  width:$size*1.3;
  height:$size*0.3;
  top:$size*0.27;
  background:#ffe0dd;  
}



.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