.container
  .body
    .ears
    .eyebrows
      .left
      .right
    .eyes
      .left
      .right
    .nose
    .mouth
    .whiskers
      .left
      .right
    .tongue
    .bandana
      .top
      .bottom
    .stomach
  .legs
    .lfront
    .lback
    .rfront
    .rback
  .tail
    
View Compiled
@background: #b6fefc;
@ltorange: #ffa500;
@dkorange: #ee6000;
@oshadow: #e24b00;
@bandana: #00bcb8;
@tongue: #ff7977;
@dark:#512e27;
@bshadow:#00a2a0;
@white: #FFFFFF;
@grey: #dedede;

body {
  background: @background;
  height: 100%;
  width: 100%;
}


.container {
  position: absolute;
  left: 50%;
  bottom: 30%;
}

.body {
  position: relative;
  background: @ltorange;
  border-radius: 300px 300px 200px 200px;
  height: 200px;
  width: 125px;
}

.ears {
  position: absolute;
  z-index: -1;
  top: -15px;
  &:after,
  &:before {
    content: "";
    display: inline-block;
    background: @dkorange;
    box-shadow: inset -5px -5px @oshadow;
    width: 40px;
    height: 70px;
    border-radius: 100% 100% 0 0;
    transform: translateX(40px);
    border: 10px solid @ltorange;
    box-sizing: border-box;
  }
    &:before{
    transform:translateX(5px;)
    }
 
}

.eyebrows{
  .left{
    border-radius: 10px;
    position: absolute;
    background: @white;
    top: 15px;
    left: 25px;
    width: 15px;
    height: 10px;
  }
  .right{
    border-radius: 10px;
    position: absolute;
    background: @white;
    top: 15px;
    left: 80px;
    width: 15px;
    height: 10px;
  }
}
.eyes {
  .left {
    position: absolute;
    width: 20px;
    height: 10px;
    top: 10px;
    left: 150px;
    transform: translate(50%, -50%);
    z-index: 4;
    box-sizing: border-box;
    border-radius: 0 0 60px 60px;
    border: 4px solid black;
    border-top: 0;
    background: @ltorange;
    transform: rotate(180deg);
    left: 30px;
    top: 30px;
  }
  .right {
    position: absolute;
    width: 20px;
    height: 10px;
    top: 10px;
    left: 150px;
    transform: translate(50%, -50%);
    z-index: 4;
    box-sizing: border-box;
    border-radius: 0 0 60px 60px;
    border: 4px solid black;
    border-top: 0;
    background: @ltorange;
    transform: rotate(180deg);
    left: 75px;
    top: 30px;
  }
}
.mouth{
  width: 20px;
  height: 20px;
  background: @dark;
  position: absolute;
  top:60px;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 120px 120px 0 0;
  transform: rotate(180deg);
}
  
 .tongue{
  width: 18px;
  height:8px;
  background:@tongue;
  position: absolute;
  z-index:4;
  margin: auto;
  top:70px;
  left: 0px;
  right: 0;
  border-radius: 120px 120px 0 0;
  transform: rotate(180deg);
 
}
.whiskers{
  .left{
    position: absolute;
    width: 20px;
    height: 10px;
    top: 10px;
    left: 150px;
    transform: translate(50%, -50%);
    box-sizing: border-box;
    border-radius: 0 0 60px 60px;
    border: 3px solid black;
    border-top: 0;
    background: @ltorange;
    //transform: rotate(180deg);
    left: 53px;
    top: 65px;
  }
  .right{
    position: absolute;
    width: 20px;
    height: 10px;
    top: 10px;
    left: 150px;
    transform: translate(50%, -50%);
    box-sizing: border-box;
    border-radius: 0 0 60px 60px;
    border: 3px solid black;
    border-top: 0;
    background: @ltorange;
    left: 33px;
    top: 65px;
  }
}
.nose{
  background: @dark;
  width: 20px;
  height: 10px;
  border-radius: 0 0 30px 30px;
  position: relative;
  top: 40px;
  left: 53px;
  box-sizing: border-box;
}

.bandana{
  height: 10px;
  background: @bandana;
  position: relative;
  z-index: 4;
  top:80px;
  box-shadow: inset -5px -5px @bshadow;
  .top{
  position:relative;
  top:-20px;
  z-index: -4;
  left:122px;
  width: 25px; height: 25px;
  background-color: @bandana; 
  -moz-border-radius: 25px 0px;
  -webkit-border-radius:25px 0px;
  border-radius: 25px 0px;
  box-shadow: inset -5px -5px @bshadow;
  }
  .bottom{
  position:relative;
  top:-35px;
  z-index: -4;
  left:122px;
  width: 25px; height: 25px;
  background-color: @bandana; 
  -moz-border-radius: 25px 0px;
  -webkit-border-radius:25px 0px;
  border-radius: 25px 0px;
  transform: rotate(40deg);
    box-shadow: inset -5px -5px @bshadow;
  }
}

.stomach {
  width: 70px;
  height: 70px;
  background: #fff;
  position: absolute;
  top:85px;
  bottom: 0;
  left: 0;
  right: 0;
  margin: auto;
  border-radius: 120px 120px 0 0;
  transform: rotate(180deg);
  box-shadow: inset -5px -5px @grey;
}


.tail {
  background: @ltorange;
  width: 14px;
  height: 70px;
  position: absolute;
  z-index: -1;
  left: 15px;
  bottom: 25px;
  transform: rotate(-30deg);
  border-radius: 14px;
  transform-origin: bottom;
  transition: 300ms;
  animation: wag .2s infinite alternate;
}

.legs {
  .lfront{
    position:absolute;
    height:20px;
    width:40px;
    left:20px;
    top:180px;
    border-radius: 90px 90px 0 0;
    background:@white;
    box-shadow: inset -5px -5px @grey;
  }
   .lback{
    z-index:-1;
    position:absolute;
    height:20px;
    width:40px;
    top:180px;
    left:-10px;
    border-radius: 90px 90px 0 0;
    background: @white;
    box-shadow: inset -5px -5px @grey;
    
  }
  .rfront{
    position:absolute;
    height:20px;
    width:40px;
    top:180px;
    left:70px;
    border-radius: 90px 90px 0 0;
    background:@white;
    box-shadow: inset -5px -5px @grey;
  }
   .rback{
    z-index:-1;
    position:absolute;
    height:20px;
    width:40px;
    top:180px;
    right:-10px;
    border-radius: 90px 90px 0 0;
    background:@white;
    box-shadow: inset -5px -5px @grey;
    
  }
}
 @keyframes wag {
  0% {
    transform: rotate(-30deg);
  }
  100% {
    transform: rotate(-40deg);
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.