<body>
  <div class="box-canvas">
    <div class="leg-left leg"></div>
    <div class="leg-right leg"></div>
    <div class="fluff-left fluff"></div>
    <div class="fluff-right fluff"></div>
    <div class="head">
      <div class="eye-left eye"></div>
      <div class="eye-right eye"></div>
      <div class="mouth"></div>
    </div>
  </div>
</body>
body{
  background: #54A865;
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 180px;
  height: 180px;
}

.fluff {
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: white;
}

.fluff-left {
  top: 50px;
}

.fluff-right {
  top: 50px;
  left: 110px;
}

.fluff::before {
  content: '';
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: white;
  top: -35px;
}

.fluff-left::before {
  left: 35px;
}

.fluff-right::before {
  left: -35px;
}

.fluff::after {
  content: '';
  top: 35px;
  position: absolute;
  width: 70px;
  height: 70px;
  border-radius: 50%;
  background: white;
}

.fluff-left::after {
  left: 35px;
}

.fluff-right::after {
  left: -35px;
}

.head {
  position: absolute;
  left: 50%;
  top: 30px;
  transform: translateX(-50%);
  width: 70px;
  height: 70px;
  background: black;
  border-radius: 50%;
}

.head::before {
  content: '';
  position: absolute;
  background: black;
  width: 15px;
  height: 20px;
  border-radius: 50%;
  top: -5px;
  left: 5px;
}

.head::after {
  content: '';
  position: absolute;
  background: black;
  width: 15px;
  height: 20px;
  border-radius: 50%;
  top: -5px;
  right: 5px;
}

.eye {
  position: absolute;
  background: black;
  border: 5px solid white;
  height: 10px;
  width: 10px;
  border-radius: 50%;
  top: 15px;
}

.eye-left {
   left: 10px;
}

.eye-right {
  right: 10px;
}

.mouth {
  position: absolute;
  background: white;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  width: 30px;
  height: 30px;
  clip-path: circle(50% at 50% 0);
}

.leg {
  position: absolute;
  top: 120px;
  height: 50px;
  width: 15px;
  background: black;
  border-radius: 30%;
}

.leg-left {
  left: 30%;
  transform: translateX(-30%);
}

.leg-right {
  right: 30%;
  transform: translateX(30%);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.