<!-- Single Div -->
<div class="head"></div>

body {
  height: 100vh;
  background-color: #fcfcfc;
  display: flex;
  justify-content: center;
  align-items: center;
}
$hair: #7b4730;
$skin: #f0cfc4;
$lips: #fab6d2;
@function staticColor($color) {
  @return $color 50%, transparent 50%;
}
.head {
  width: 280px;
  height: 280px;
  background: 
    // eyeball
    radial-gradient(staticColor(#000)) 50% 61% / 6px 6px,
    radial-gradient(staticColor(#000)) 43% 61% / 6px 6px,
    // eyes
    radial-gradient(#fff 50%, #000 50%, #000 55%, transparent 55%) 50% 62% / 26px 26px,
    radial-gradient(#fff 50%, #000 50%, #000 55%, transparent 55%) 42% 62% / 26px 26px,
    // ears
    radial-gradient(staticColor($skin)) 6% 84% / 30px 30px,
    radial-gradient(staticColor($skin)) 87% 86% / 25px 25px,
    // face
    radial-gradient(at 50% 90%, staticColor($skin)) 100% -250% / 290px 272px,
    // hair
    radial-gradient(staticColor($hair)) 53% 2% / 90px 80px,
    radial-gradient(staticColor($hair)) 80% 12% / 85px 80px,
    radial-gradient(staticColor($hair)) 95% 32% / 88px 75px,
    radial-gradient(staticColor($hair)) 102% 54% / 85px 75px,
    radial-gradient(staticColor($hair)) 102% 75% / 80px 70px,
    radial-gradient(staticColor($hair)) 96% 90% / 60px 60px;
  background-repeat: no-repeat;
  position: relative;
}
// lips
.head:before {
  content: '';
  position: absolute;
  bottom: 20px;
  left: 25px;
  width: 210px;
  height: 16px;
  border-radius: 24px;
  background: 
    linear-gradient(staticColor(#000)) 5% 50% / 43% 1px,
    linear-gradient(staticColor(#000)) 95% 50% / 43% 1px,
    radial-gradient(circle at 50% 0%, transparent 50%, #000 50%, #000 53%, transparent 53%) 50% -30% / 20px 20px,
    $lips;
  background-repeat: no-repeat;
}