.wrap
  .jiji
    .tail-base
    .tail-tip
    .body
    .left-leg
    .right-leg
    .arms
    .ears
      .left-ear
        .l-e-purple
        .l-e-black
      .right-ear
        .r-e-purple
        .r-e-black
    .head
    .mouth
      .tongue
      .teeth
    .eyes
    .nose
    .whiskers
    
.ccc
     |Made by 
     a(href='http://chilliconcode.com', target='_blank') chilliconcode.com
View Compiled
//---------------------
//  Resize Jiji here: 
$size:100px;
//---------------------

body {
  margin:0;
}

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

.wrap {
  width:100%;
  height:100%;  
  background: radial-gradient(circle, #d0b192, #bc849f);
}

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

.head {
  width:$size*1.1;
  height:$size*0.9;
  background:#1c1a26;
  border-radius:45%;
  left:$size*-0.05;
}

.l-e-black {
  width:0;
  height:0;
  border-bottom:$size*0.8 solid #1c1a26;
  border-right:$size*0.2 solid transparent;
  top:$size*-0.7;
  left:$size*0.2;
  transform:rotate(-10deg);
}

.l-e-purple {
  width:0;
  height:0;
  border-bottom:$size*0.8 solid #372f58;
  border-left:$size*0.2 solid transparent;
  border-right:$size*0.2 solid transparent;
  top:$size*-0.6;
  transform:rotate(-5deg);
}
.l-e-purple:after {
  width:$size*0.24;
  height:$size*0.9;
  background:#765990;
  border-radius:50%;
  left:$size*-0.24;
  top:$size*-0.08;
  transform:rotate(9deg);
}

.r-e-black {
  width:0;
  height:0;
  border-bottom:$size*0.8 solid #1c1a26;
  border-left:$size*0.2 solid transparent;
  top:$size*-0.7;
  left:$size*0.6;
  transform:rotate(10deg);
}

.r-e-purple {
  width:0;
  height:0;
  border-bottom:$size*0.8 solid #372f58;
  border-left:$size*0.2 solid transparent;
  border-right:$size*0.2 solid transparent;
  top:$size*-0.6;
  left:$size*0.6;
  transform: rotate(5deg);
}
.r-e-purple:after {
  width:$size*0.24;
  height:$size*0.9;
  background:#765990;
  border-radius:50%;
  top:$size*-0.08;
  transform:rotate(-9deg);
}

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

.eyes:after {
  width:$size*0.08;
  height:$size*0.15;
  border-radius:50%;
  background:#1c1a26;
  top:$size*0.1;
  left:$size*0.15;
  box-shadow:$size*0.4 0 0 0 #1c1a26;
}

.nose {
  width:$size*0.1;
  height:$size*0.06;
  border-radius:50%;
  top:$size*0.42;
  left:$size*0.45;
  background:#935964;
}

.mouth {
  width:$size*0.6;
  height:$size*0.25;
  border-radius: 20% 20% 50% 50%;
  top:$size*0.57;
  left:$size*0.2;
  background:#d33660;
  overflow:hidden;
}
.mouth:after {
  width:$size*0.6;
  height:$size*0.25;
  border-radius: 50%;
  top:$size*-0.2;
  background:#1c1a26;  
}

.tongue {
  width:$size*0.5;
  height:$size*0.25;
  border-radius: 30%;
  top:$size*0.12;
  left:$size*0.05;
  background:#ed6181;  
}

.teeth {
  width:0;
  height:0;
  border-top:$size*0.1 solid #f7dce7;
  border-left:$size*0.05 solid transparent;
  border-right:$size*0.05 solid transparent;
  left:$size*0.05;
}

.teeth:after {
  width:0;
  height:0;
  border-top:$size*0.1 solid #f7dce7;
  border-left:$size*0.05 solid transparent;
  border-right:$size*0.05 solid transparent;
  left:$size*0.34;
  top:$size*-0.1;
}

.body {
  width:$size;
  height:$size*2;
  background:#1c1a26;
  border-radius:50% 50% 20% 20%;
  top:$size*0.8;
  box-shadow:inset 0 $size*-0.8 0 0 #131313;
}

.left-leg {
  width:$size*0.5;
  height:$size*0.8;
  background:#1c1a26;
  border-radius:50% 50% 50% 50%;
  left:$size*-0.15;
  top:$size*2;
  transform:rotate(-15deg);
  box-shadow:inset $size*-0.1 $size*-0.2 0 0 #131313;
}
.right-leg {
  width:$size*0.5;
  height:$size*0.8;
  background:#1c1a26;
  border-radius:50% 50% 50% 50%;
  left:$size*0.65;
  top:$size*2;
  transform:rotate(15deg);
  box-shadow:inset $size*0.1 $size*-0.2 0 0 #131313;
}

.arms {
  width:$size*0.25;
  height:$size;
  background:#1c1a26;
  border-radius:0 0 20% 20%;
  left:$size*0.2;
  top:$size*1.8;  
  box-shadow: $size*0.35 0 0 0 #1c1a26;
}

.tail-tip {
  width:$size*0.5;
  height:$size*1;
  border-radius:50% 50% 0% 0%;
  left:$size*1.3;
  top:$size*0.8; 
  border:$size*0.2 solid transparent;
  border-top:$size*0.2 solid #1c1a26;
  border-left:$size*0.2 solid #1c1a26;
}
.tail-tip:after{
  width:$size*0.185;
  height:$size*0.185;
  border-radius:50%;
  background:#1c1a26;
  right:$size*-0.06;
  top:$size*-0.06;
}

.tail-base {
  width:$size*0.5;
  height:$size*1;
  border-radius:0% 0% 50% 0%;
  left:$size*0.6;
  top:$size*1.36; 
  border:$size*0.2 solid transparent;
  border-bottom:$size*0.2 solid #1c1a26;
  border-right:$size*0.2 solid #1c1a26;
}

.whiskers {
  background:black;
  width:$size*0.4;
  height:$size*0.01;
  top:$size*0.5;
  left:$size*-0.3;
  box-shadow:$size*1.2 0 0 0 black;
}

.whiskers:after {
  background:black;
  width:$size*0.4;
  height:$size*0.01;
  box-shadow:$size*1.2 0 0 0 black;
  transform:rotate(10deg);
  top:$size*-0.1;
}
.whiskers:before {
  background:black;
  width:$size*0.4;
  height:$size*0.01;
  box-shadow:$size*1.2 0 0 0 black;
  transform:rotate(-10deg);
  top:$size*0.1;
}

.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