CodePen Embed - Pure CSS Woman With Sunglasses

<div class="hair-1"></div>
<div class="hair-2"></div>
<div class="hair-3"></div>
<div class="hair-4"></div>
<div class="hair-5"></div>
<div class="hair-6"></div>
<div class="hair-7"></div>
<div class="hair-8"></div>

<div class="face-1"></div>
<div class="face-2"></div>
<div class="face-3"></div>
<div class="face-4"></div>
<div class="face-5"></div>
<div class="face-6"></div>
<div class="face-7"></div>
<div class="face-8"></div>

<div class="ear-right"></div>
<div class="ear-left"></div>

<div class="body-1"></div>
<div class="body-2"></div>
<div class="body-3"></div>
<div class="body-4"></div>
<div class="body-5"></div>

<div class="eyebrow-right-1"></div>
<div class="eyebrow-right-2"></div>
<div class="eyebrow-left-1"></div>
<div class="eyebrow-left-2"></div>

<div class="sunglasses-center"></div>
<div class="sunglasses-top"></div>

<div class="sunglasses-right-1"></div>
<div class="sunglasses-right-2"></div>
<div class="sunglasses-right-inner">
<div class="sunglasses-right-cloud-1"></div>
<div class="sunglasses-right-cloud-2"></div>
<div class="sunglasses-right-cloud-3"></div>

<div class="sunglasses-right-plane-1"></div>
<div class="sunglasses-right-plane-2"></div>
<div class="sunglasses-right-plane-3"></div>
<div class="sunglasses-right-plane-4"></div>
<div class="sunglasses-right-plane-5"></div>
<div class="sunglasses-right-plane-6"></div>
</div>

<div class="sunglasses-left"></div>
<div class="sunglasses-left-inner">
<div class="sunglasses-left-cloud-1"></div>
<div class="sunglasses-left-cloud-2"></div>
<div class="sunglasses-left-cloud-3"></div>
<div class="sunglasses-left-cloud-4"></div>
</div>

<div class="nose-1"></div>
<div class="nose-2"></div>

<div class="mouth-1"></div>
<div class="mouth-2"></div>
<div class="mouth-3"></div>
<div class="mouth-4"></div>
<div class="mouth-5"></div>
<div class="mouth-6"></div>
<div class="mouth-7"></div>

<div class="cloud-1"></div>
<div class="cloud-2"></div>
<div class="cloud-3"></div>
<div class="cloud-4"></div>
<div class="cloud-5"></div>
<div class="cloud-6"></div>
<div class="cloud-7"></div>
<div class="cloud-8"></div>
<div class="cloud-9"></div>
<div class="cloud-10"></div>

// colors
$bg-color: #0171bb;
$skin-color: #feead2;
$skin-dark-color: #f9b341;
$hair-color: #f9b341;
$hair-dark-color: #ea4d22;
$dress-color: #0e3a6b;
$eyebrow-color: #ea4d22;
$glass-color: #feead2;
$glass-dark-color: #0171bb;
$glass-darken-color: #0e3a6b;
$cloud-color: #feead2;
$plane-color: #ffebd3;
$nose-color: #eb4e21;
$mouth-color: #ea4d22;
$mouth-light-color: #ffe5d8;

html,
body {
  width: 100%;
  height: 100%;
  background: $bg-color;
  overflow: hidden;

  * {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    margin: auto;
    box-sizing: border-box;

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

.hair {
  &-1 {
    width: 60vmin;
    height: 60vmin;
    background: $hair-color;
    top: -37.3vmin;
    left: -2vmin;
    border-radius: 25.5vmin 34.5vmin 0 64%;

    &::before {
      width: 39vmin;
      height: 70.5vmin;
      background: $hair-dark-color;
      top: 5.3vmin;
      left: 26vmin;
      transform: rotate(-10.5deg);
      border-radius: 50%;
    }

    &::after {
      width: 29vmin;
      height: 35vmin;
      background: $hair-dark-color;
      top: 1.2vmin;
      left: 13.8vmin;
      transform: rotate(5deg);
      border-radius: 50%;
    }
  }

  &-2 {
    width: 31vmin;
    height: 12vmin;
    background: $hair-dark-color;
    top: -80.1vmin;
    left: 12vmin;
    transform: rotate(17deg);
    border-radius: 50%;

    &::before {
      width: 15vmin;
      height: 4vmin;
      background: $hair-dark-color;
      top: 3vmin;
      left: 21.2vmin;
      transform: rotate(27deg);
      border-radius: 50%;
    }

    &::after {
      width: 0.7vmin;
      height: 15vmin;
      background: $hair-color;
      top: 0.5vmin;
      left: 8.8vmin;
      transform: rotate(-17deg);
    }
  }

  &-3 {
    width: 0.6vmin;
    height: 10vmin;
    background: $hair-color;
    top: -72vmin;
    left: -0.4vmin;
    transform: rotate(-4.5deg);

    &::before {
      width: 25vmin;
      height: 15vmin;
      background: $skin-dark-color;
      top: 15.8vmin;
      left: -3.55vmin;
      transform: rotate(36deg) skewX(31deg);
    }

    &::after {
      width: 0.6vmin;
      height: 10vmin;
      background: $hair-color;
      top: 3vmin;
      left: 0.2vmin;
      transform: rotate(-3deg);
    }
  }

  &-4 {
    z-index: 2;
    width: 19.5vmin;
    height: 20vmin;
    background: $hair-dark-color;
    top: -50.6vmin;
    left: 22.1vmin;
    transform: skewY(3deg);
    border-radius: 0 0 0 80%;

    &::before {
      width: 2vmin;
      height: 8vmin;
      background: $hair-dark-color;
      top: 2.3vmin;
      left: -0.05vmin;
      transform: rotate(-12deg);
      border-radius: 5% 50%;
    }

    &::after {
      width: 12.5vmin;
      height: 11.5vmin;
      background: $skin-dark-color;
      top: 7.1vmin;
      left: 8.3vmin;
      transform: skewX(10.5deg);
      border-radius: 0 0 0 65%;
    }
  }

  &-5 {
    z-index: 2;
    width: 6vmin;
    height: 17vmin;
    background: $hair-dark-color;
    top: -40vmin;
    left: 47.2vmin;

    &::before {
      width: 20vmin;
      height: 10vmin;
      background: $hair-dark-color;
      top: -6vmin;
      left: -15vmin;
      transform: rotate(32deg);
    }
  }

  &-6 {
    width: 3vmin;
    height: 1.5vmin;
    background: $skin-dark-color;
    top: -67vmin;
    left: -2.7vmin;
    transform: rotate(-35deg);

    &::before {
      width: 2.5vmin;
      height: 1vmin;
      background: $hair-dark-color;
      top: -0.65vmin;
      left: -0.05vmin;
      border-radius: 50%;
    }

    &::after {
      width: 22.7vmin;
      height: 35vmin;
      background: $hair-dark-color;
      top: 57.2vmin;
      left: -30vmin;
      transform: rotate(35deg);
    }
  }

  &-7 {
    width: 7.5vmin;
    height: 19vmin;
    background: $bg-color;
    top: 63.9vmin;
    left: 65.4vmin;
    border-radius: 0 0 0 98%;

    &::before {
      width: 2vmin;
      height: 10vmin;
      background: $bg-color;
      top: 13vmin;
      left: 4.95vmin;
      transform: rotate(-37.5deg);
      border-radius: 50%;
    }

    &::after {
      width: 8vmin;
      height: 2vmin;
      background: $bg-color;
      top: -1.55vmin;
      left: 0vmin;
    }
  }

  &-8 {
    width: 2vmin;
    height: 5vmin;
    background: $hair-dark-color;
    top: 40vmin;
    left: 57.15vmin;
    transform: rotate(30deg);
    border-radius: 50%;

    &::before {
      width: 20vmin;
      height: 30vmin;
      background: $hair-color;
      left: -48vmin;
      transform: rotate(-45.5deg);
    }
  }
}

.face {
  &-1 {
    width: 21.6vmin;
    height: 40vmin;
    background: $skin-color;
    top: -21.5vmin;
    left: -25.2vmin;
    transform: skewY(-25deg);
    border-radius: 9vmin 50% 0 52%;

    &::before {
      width: 20vmin;
      height: 30vmin;
      background: $skin-color;
      top: 31.3vmin;
      left: 3.2vmin;
      transform: skewX(4.5deg);
      border-radius: 0 0 0 100%;
    }

    &::after {
      width: 8vmin;
      height: 10vmin;
      background: $skin-dark-color;
      top: 54.6vmin;
      left: 16vmin;
      transform: skewY(45deg);
    }
  }

  &-2 {
    width: 27vmin;
    height: 30vmin;
    background: $skin-dark-color;
    top: -32.6vmin;
    left: -3.9vmin;
    transform: rotate(-8deg) skewY(-5deg);
    border-radius: 0 100% 0 100%;

    &::before {
      width: 19vmin;
      height: 5vmin;
      background: $skin-dark-color;
      top: -2.1vmin;
      transform: rotate(-2deg);
      border-radius: 50%;
    }

    &::after {
      width: 3vmin;
      height: 0.5vmin;
      background: $skin-dark-color;
      top: -0.7vmin;
      left: -0.05vmin;
      transform: rotate(-18deg);
      border-radius: 50%;
    }
  }

  &-3 {
    width: 22.3vmin;
    height: 30vmin;
    background: $skin-dark-color;
    top: -11vmin;
    left: 18.7vmin;
    border-radius: 0 0 40% 0;

    &::before {
      width: 23vmin;
      height: 8vmin;
      background: $skin-dark-color;
      top: -6.6vmin;
      left: -1vmin;
      transform: rotate(32deg);
    }

    &::after {
      width: 10vmin;
      height: 10vmin;
      background: $skin-dark-color;
      top: -10vmin;
      left: -6vmin;
    }
  }

  &-4 {
    width: 10vmin;
    height: 17vmin;
    background: $skin-dark-color;
    top: 30vmin;
    left: 6vmin;

    &::before {
      width: 18vmin;
      height: 24vmin;
      background: $skin-dark-color;
      top: -7.25vmin;
      left: 2.85vmin;
      transform: rotate(-2.5deg) skewX(-7deg);
      border-radius: 0 0 57% 0;
    }
  }

  &-5 {
    width: 14.25vmin;
    height: 17vmin;
    background: $skin-dark-color;
    top: 50vmin;
    left: 12.3vmin;

    &::before {
      width: 2vmin;
      height: 3.5vmin;
      background: $skin-dark-color;
      top: -12.3vmin;
      left: -2.15vmin;
      transform: skewY(-15deg);
      border-radius: 2vmin 0 0 0;
    }

    &::after {
      width: 4vmin;
      height: 2.05vmin;
      background: $skin-dark-color;
      top: -9.45vmin;
      left: -4.1vmin;
      border-radius: 2vmin;
    }
  }

  &-6 {
    width: 6vmin;
    height: 7vmin;
    background: $skin-color;
    top: 41vmin;
    left: -10vmin;

    &::before {
      width: 1.5vmin;
      height: 0.5vmin;
      background: $skin-color;
      top: -10vmin;
      left: 3.35vmin;
    }

    &::after {
      width: 8.1vmin;
      height: 5.5vmin;
      background: $skin-color;
      top: 5.15vmin;
      left: -0.3vmin;
      transform: rotate(2deg);
      border-radius: 0 0 67% 23%;
    }
  }

  &-7 {
    z-index: 2;
    width: 5.2vmin;
    height: 3.4vmin;
    background: $skin-dark-color;
    top: 40.2vmin;
    left: -6.7vmin;
    border-radius: 50%;

    &::before {
      width: 10vmin;
      height: 3vmin;
      background: $skin-dark-color;
      top: 1.6vmin;
      left: 1.4vmin;
      transform: rotate(16.5deg);
    }

    &::after {
      width: 15.2vmin;
      height: 10vmin;
      background: $skin-color;
      top: -30.5vmin;
      left: -11.1vmin;
      transform: skewX(1deg);
      border-radius: 0 65% 0 0;
    }
  }

  &-8 {
    z-index: 2;
    width: 2vmin;
    height: 4vmin;
    background: $skin-dark-color;
    top: 45vmin;
    left: 1.6vmin;
    transform: rotate(-1deg);
  }
}

.ear-right {
  width: 4.5vmin;
  height: 10vmin;
  background: $skin-dark-color;
  top: -9.4vmin;
  left: 44.4vmin;
  transform: rotate(24deg);
  border-radius: 3vmin 3vmin 0 0;

  &::before {
    width: 2.75vmin;
    height: 7.5vmin;
    background: $skin-dark-color;
    top: 7.5vmin;
    left: 2.3vmin;
    transform: rotate(-15deg);
    border-radius: 3vmin;
  }

  &::after {
    width: 12vmin;
    height: 5vmin;
    background: $hair-dark-color;
    top: 0.4vmin;
    left: -1.8vmin;
    transform: rotate(40deg);
    border-radius: 50%;
  }
}

.ear-left {
  width: 3.7vmin;
  height: 14vmin;
  background: $skin-color;
  top: -11.4vmin;
  left: -50.8vmin;
  transform: rotate(-15deg);
  border-radius: 50%;

  &::before {
    width: 3.8vmin;
    height: 8.2vmin;
    background: $skin-color;
    top: 10.5vmin;
    left: 0.7vmin;
    transform: rotate(4deg) skewY(-5deg);
    border-radius: 50%;
  }

  &::after {
    width: 2.1vmin;
    height: 4.5vmin;
    background: $skin-color;
    top: 0.25vmin;
    left: 1.55vmin;
    transform: skewY(30deg);
    border-radius: 1vmin 2vmin 0 0;
  }
}

.body {
  &-1 {
    width: 20.3vmin;
    height: 28vmin;
    background: $skin-dark-color;
    top: 85vmin;
    left: 6.3vmin;

    &::before {
      width: 5vmin;
      height: 4vmin;
      background: $skin-color;
      top: -1vmin;
      left: -3.15vmin;
      transform: rotate(27deg);
    }
  }

  &-2 {
    width: 9.8vmin;
    height: 20vmin;
    background: $skin-color;
    top: 50vmin;
    left: -24vmin;
    transform: skewX(-4deg);

    &::before {
      width: 3vmin;
      height: 3vmin;
      background: $skin-color;
      top: 11vmin;
      left: -0.45vmin;
      transform: rotate(22deg);
    }

    &::after {
      width: 27vmin;
      height: 30vmin;
      background: $dress-color;
      top: 12vmin;
      left: -17.6vmin;
      transform: skewX(4deg);
    }
  }

  &-3 {
    width: 11.8vmin;
    height: 29vmin;
    background: $skin-color;
    top: 89vmin;
    left: -10.75vmin;
    transform: rotate(-19deg);

    &::before {
      width: 10vmin;
      height: 29vmin;
      background: $skin-color;
      top: -1vmin;
      left: -0.45vmin;
      transform: rotate(2deg);
    }

    &::after {
      width: 8.5vmin;
      height: 5.5vmin;
      background: $skin-color;
      top: -5.9vmin;
      left: 0.1vmin;
      transform: rotate(1.5deg);
    }
  }

  &-4 {
    width: 13vmin;
    height: 26vmin;
    background: $bg-color;
    top: 59.8vmin;
    left: -62vmin;
    transform: rotate(56deg);
    border-radius: 0 20% 90% 0;

    &::before {
      width: 0.5vmin;
      height: 1.8vmin;
      background: $bg-color;
      left: 11.5vmin;
      transform: rotate(-25deg) skewY(45deg);
    }
  }

  &-5 {
    width: 80vmin;
    height: 10vmin;
    background: $bg-color;
    top: 116vmin;
  }
}

.eyebrow-right {
  &-1 {
    width: 14.5vmin;
    height: 4vmin;
    background: $eyebrow-color;
    top: -23.5vmin;
    left: 25vmin;
    transform: rotate(-5deg);
    border-radius: 50%;

    &::before {
      width: 5vmin;
      height: 2.5vmin;
      background: $eyebrow-color;
      top: 1vmin;
      left: -2.2vmin;
      border-radius: 50%;
    }

    &::after {
      width: 5vmin;
      height: 2vmin;
      background: $skin-dark-color;
      top: 0.4vmin;
      left: -4vmin;
      transform: rotate(-35deg);
    }
  }

  &-2 {
    width: 14vmin;
    height: 3vmin;
    background: $skin-dark-color;
    top: -19.6vmin;
    left: 26.4vmin;
    transform: rotate(-11deg);
    border-radius: 0 0 100% 0;
  }
}

.eyebrow-left {
  &-1 {
    z-index: 2;
    width: 14.7vmin;
    height: 4vmin;
    background: $eyebrow-color;
    top: -23.3vmin;
    left: -26.6vmin;
    transform: rotate(6deg) skewX(-10deg);
    border-radius: 50%;

    &::before {
      width: 3.6vmin;
      height: 2vmin;
      background: $eyebrow-color;
      top: 1.55vmin;
      left: 12.6vmin;
      transform: rotate(30deg);
    }

    &::after {
      width: 15vmin;
      height: 3vmin;
      background: $skin-color;
      top: 2.5vmin;
      left: -0.5vmin;
      transform: rotate(5deg);
    }
  }

  &-2 {
    z-index: 2;
    width: 3vmin;
    height: 2vmin;
    background: $skin-color;
    top: -17.2vmin;
    left: -11.9vmin;
    transform: skewY(-15deg);

    &::before {
      width: 3vmin;
      height: 2vmin;
      background: $skin-color;
      top: -0.2vmin;
      transform: skewY(15deg);
    }
  }
}

.sunglasses-center {
  width: 6vmin;
  height: 1.9vmin;
  background: $glass-color;
  top: -14.5vmin;
  left: 0.2vmin;
  transform: rotate(5deg);
  border-radius: 50%;

  &::before {
    width: 5vmin;
    height: 1.9vmin;
    background: $skin-dark-color;
    top: 0.85vmin;
    left: 0.4vmin;
    transform: rotate(1deg);
    border-radius: 50%;
  }

  &::after {
    width: 2vmin;
    height: 4vmin;
    background: $glass-color;
    top: 0.8vmin;
    left: 5vmin;
    transform: rotate(-4deg);
  }
}

.sunglasses-top {
  z-index: 2;
  width: 22vmin;
  height: 0.65vmin;
  background: $glass-color;
  top: -24.9vmin;

  &::before {
    width: 2.5vmin;
    height: 1.2vmin;
    background: $glass-color;
    left: -1.5vmin;
    border-radius: 1vmin 0 0 0;
  }

  &::after {
    width: 2.5vmin;
    height: 1.2vmin;
    background: $glass-color;
    left: 20.5vmin;
    border-radius: 0 1vmin 0 0;
  }
}

.sunglasses-right {
  &-1 {
    width: 19.9vmin;
    height: 19.6vmin;
    background: $glass-color;
    top: -4.5vmin;
    left: 23.5vmin;
    border-radius: 50%;

    &::before {
      width: 16.75vmin;
      height: 16.25vmin;
      background: $glass-darken-color;
      top: 1.7vmin;
      left: 1.6vmin;
      border-radius: 50%;
    }

    &::after {
      width: 15.9vmin;
      height: 7.85vmin;
      background: $glass-dark-color;
      top: 9.1vmin;
      left: 0.05vmin;
      transform: rotate(31deg);
      border-radius: 0 0 7.85vmin 7.85vmin;
    }
  }

  &-2 {
    width: 16.15vmin;
    height: 2vmin;
    background: $glass-darken-color;
    top: -5.5vmin;
    left: 24vmin;
    transform: rotate(30deg);
    border-radius: 1vmin 1vmin 0 0;
  }

  &-inner {
    width: 15.8vmin;
    height: 15.3vmin;
    background: transparent;
    top: -4.5vmin;
    left: 23.5vmin;
    border-radius: 50%;
    overflow: hidden;
  }

  &-cloud {
    &-1 {
      width: 2vmin;
      height: 4.2vmin;
      background: $cloud-color;
      top: 2.9vmin;
      left: 14.45vmin;
      transform: rotate(40deg);
      border-radius: 50%;

      &::before {
        width: 2vmin;
        height: 2vmin;
        background: $cloud-color;
        top: 3.35vmin;
        left: 1vmin;
        border-radius: 50%;
      }

      &::after {
        width: 2vmin;
        height: 3vmin;
        background: $cloud-color;
        top: 4.9vmin;
        left: 1.3vmin;
        transform: rotate(35deg);
      }
    }

    &-2 {
      width: 3.3vmin;
      height: 3vmin;
      background: $cloud-color;
      top: 11vmin;
      left: 7.7vmin;
      border-radius: 50%;

      &::before {
        width: 2.3vmin;
        height: 2vmin;
        background: $cloud-color;
        top: 2vmin;
        left: -1.1vmin;
        border-radius: 50%;
      }

      &::after {
        width: 2vmin;
        height: 1.5vmin;
        background: $cloud-color;
        top: 2.7vmin;
        left: -2.8vmin;
      }
    }

    &-3 {
      width: 2.2vmin;
      height: 1.5vmin;
      background: $cloud-color;
      top: 14vmin;
      left: -0.1vmin;
      border-radius: 50%;

      &::before {
        width: 2vmin;
        height: 2vmin;
        background: $cloud-color;
        top: 0.5vmin;
        left: -1vmin;
        transform: rotate(-27deg);
      }

      &::after {
        width: 2.2vmin;
        height: 0.5vmin;
        background: $glass-dark-color;
        top: 0.15vmin;
        left: -1.55vmin;
        transform: rotate(-30deg);
        border-radius: 50%;
      }
    }
  }

  &-plane {
    &-1 {
      width: 5.3vmin;
      height: 0.6vmin;
      background: $cloud-color;
      top: -0.1vmin;
      left: -10.25vmin;

      &::before {
        width: 5.5vmin;
        height: 1vmin;
        background: $glass-dark-color;
        top: -0.7vmin;
        transform: rotate(5deg);
      }
    }

    &-2 {
      width: 0.3vmin;
      height: 1.6vmin;
      background: $plane-color;
      top: -1vmin;
      left: -5.1vmin;
      transform: rotate(-10deg);

      &::before {
        width: 0.3vmin;
        height: 1.6vmin;
        background: $plane-color;
        top: -0.05vmin;
        left: 0.45vmin;
        transform: rotate(-32deg);
      }

      &::after {
        width: 0.6vmin;
        height: 1.05vmin;
        background: $plane-color;
        top: 0.5vmin;
        left: 0.15vmin;
        transform: rotate(-15deg);
        border-radius: 0 30% 0 0;
      }
    }

    &-3 {
      width: 5.2vmin;
      height: 0.5vmin;
      background: $plane-color;
      top: 0.15vmin;
      left: 1vmin;
      border-radius: 0 1vmin 0 0;

      &::before {
        width: 3vmin;
        height: 0.45vmin;
        background: $plane-color;
        top: 0.4vmin;
        left: -0.45vmin;
        transform: rotate(6deg);
        border-radius: 50%;
      }

      &::after {
        width: 0.25vmin;
        height: 0.65vmin;
        background: $plane-color;
        top: 0.2vmin;
        left: 5.05vmin;
        transform: rotate(50deg);
        border-radius: 50%;
      }
    }

    &-4 {
      width: 3.5vmin;
      height: 0.4vmin;
      background: $plane-color;
      top: 0.85vmin;
      left: 2.3vmin;
      border-radius: 0 0 10% 0;

      &::before {
        width: 0.4vmin;
        height: 0.55vmin;
        background: $plane-color;
        top: -0.25vmin;
        left: 3.3vmin;
        transform: rotate(35deg);
        border-radius: 0 0 30% 0;
      }

      &::after {
        width: 0.35vmin;
        height: 1.05vmin;
        background: $plane-color;
        top: 0.2vmin;
        left: 1vmin;
        transform: rotate(48deg) skewY(-48deg);
      }
    }

    &-5 {
      width: 0.7vmin;
      height: 0.6vmin;
      background: $plane-color;
      top: 1.5vmin;
      left: 0.7vmin;
      transform: rotate(-20deg);

      &::before {
        width: 0.3vmin;
        height: 0.45vmin;
        background: $glass-dark-color;
        top: 0.1vmin;
        left: -0.25vmin;
        transform: rotate(10deg);
        border-radius: 50%;
      }

      &::after {
        width: 0.35vmin;
        height: 1.5vmin;
        background: $plane-color;
        top: -2.2vmin;
        left: -0.5vmin;
        transform: rotate(-20deg) skewY(40deg);
      }
    }

    &-6 {
      width: 0.45vmin;
      height: 2vmin;
      background: $plane-color;
      top: -0.95vmin;
      left: -1vmin;
      transform: rotate(-57deg);
      border-radius: 50% 5% 0 0;
    }
  }
}

.sunglasses-left {
  z-index: 2;
  width: 19.9vmin;
  height: 19.6vmin;
  background: $glass-color;
  top: -4.4vmin;
  left: -25vmin;
  border-radius: 50%;

  &::before {
    width: 16.6vmin;
    height: 16.25vmin;
    background: $glass-darken-color;
    top: 1.65vmin;
    left: 1.6vmin;
    border-radius: 50%;
  }

  &::after {
    width: 15.85vmin;
    height: 7.85vmin;
    background: $glass-dark-color;
    top: 9.1vmin;
    transform: rotate(31deg);
    border-radius: 0 0 7.85vmin 7.85vmin;
  }

  &-inner {
    z-index: 2;
    width: 15.6vmin;
    height: 15.3vmin;
    background: transparent;
    top: -4.55vmin;
    left: -25vmin;
    border-radius: 50%;
    overflow: hidden;
  }

  &-cloud {
    &-1 {
      width: 17vmin;
      height: 8vmin;
      background: $cloud-color;
      top: 11vmin;
      left: -6vmin;
      transform: rotate(30deg);

      &::before {
        width: 4.4vmin;
        height: 3vmin;
        background: $glass-dark-color;
        top: -1.35vmin;
        left: 8.7vmin;
        border-radius: 50%;
      }

      &::after {
        width: 5.8vmin;
        height: 6.7vmin;
        background: $cloud-color;
        top: -5.75vmin;
        left: 4.7vmin;
        transform: rotate(-5deg);
        border-radius: 50%;
      }
    }

    &-2 {
      width: 8vmin;
      height: 10.5vmin;
      background: $cloud-color;
      top: -5.8vmin;
      left: -7.5vmin;
      transform: rotate(-2deg);
      border-radius: 50%;

      &::before {
        width: 8vmin;
        height: 0.4vmin;
        background: $cloud-color;
        top: 8.3vmin;
        left: 9vmin;
        border-radius: 50%;
      }

      &::after {
        width: 8vmin;
        height: 0.3vmin;
        background: $cloud-color;
        top: 8.5vmin;
        left: 9vmin;
        transform: rotate(2deg);
      }
    }

    &-3 {
      width: 3vmin;
      height: 3.1vmin;
      background: $cloud-color;
      top: 6.2vmin;
      left: 5.8vmin;
      border-radius: 50%;

      &::before {
        width: 1.9vmin;
        height: 4vmin;
        background: $cloud-color;
        top: -1.35vmin;
        left: 2.35vmin;
        transform: rotate(-45deg);
        border-radius: 1vmin;
      }

      &::after {
        width: 8vmin;
        height: 2.2vmin;
        background: $cloud-color;
        top: 0.25vmin;
        left: 1.15vmin;
        transform: rotate(-48deg);
        border-radius: 50%;
      }
    }

    &-4 {
      width: 4vmin;
      height: 5vmin;
      background: $cloud-color;
      top: 10vmin;
      left: 9.7vmin;
    }
  }
}

.nose {
  &-1 {
    width: 2.1vmin;
    height: 1.4vmin;
    background: $nose-color;
    top: 15.6vmin;
    left: -7.9vmin;
    border-radius: 50%;

    &::before {
      width: 2vmin;
      height: 1vmin;
      background: $nose-color;
      top: 0.35vmin;
      left: 1vmin;
      transform: rotate(22deg);
    }

    &::after {
      width: 2vmin;
      height: 1vmin;
      background: $skin-dark-color;
      top: 0.8vmin;
      left: 1.65vmin;
      transform: skewX(-57deg);
    }
  }

  &-2 {
    width: 2.1vmin;
    height: 1.4vmin;
    background: $nose-color;
    top: 15.6vmin;
    left: 6vmin;
    border-radius: 50%;

    &::before {
      width: 2vmin;
      height: 1vmin;
      background: $nose-color;
      top: 0.35vmin;
      left: -0.9vmin;
      transform: rotate(-22deg);
    }

    &::after {
      width: 2vmin;
      height: 1vmin;
      background: $skin-dark-color;
      top: 0.8vmin;
      left: -1.5vmin;
      transform: skewX(57deg);
    }
  }
}

.mouth {
  &-1 {
    z-index: 2;
    width: 12.5vmin;
    height: 6.9vmin;
    background: $mouth-color;
    top: 33.2vmin;
    left: -0.1vmin;
    transform: rotate(-2deg);
    border-radius: 50%;

    &::before {
      width: 2.5vmin;
      height: 3vmin;
      background: $mouth-color;
      top: 1.9vmin;
      left: 12vmin;
    }

    &::after {
      width: 5vmin;
      height: 3vmin;
      background: $mouth-color;
      top: 0.8vmin;
      left: -2.4vmin;
    }
  }

  &-2 {
    z-index: 2;
    width: 4.7vmin;
    height: 3vmin;
    background: $mouth-color;
    top: 28.9vmin;
    left: 4vmin;
    transform: skewX(10deg);
    border-radius: 50%;

    &::before {
      width: 5vmin;
      height: 3vmin;
      background: $mouth-color;
      left: -4.6vmin;
      border-radius: 50%;
    }

    &::after {
      width: 3vmin;
      height: 0.5vmin;
      background: $mouth-color;
      top: 1.1vmin;
      left: 3.3vmin;
      transform: rotate(40deg);
      border-radius: 50% 0 0 0;
    }
  }

  &-3 {
    z-index: 2;
    width: 2.4vmin;
    height: 2vmin;
    background: $skin-dark-color;
    top: 25.1vmin;
    left: -0.75vmin;
    border-radius: 50%;

    &::before {
      width: 9vmin;
      height: 4.5vmin;
      background: $skin-color;
      top: 0.1vmin;
      left: -11.55vmin;
      transform: skewX(-20deg);
      border-radius: 0 0 10vmin 0;
    }

    &::after {
      width: 4vmin;
      height: 2vmin;
      background: $skin-color;
      top: 0.2vmin;
      left: -5.25vmin;
      transform: rotate(-30deg);
    }
  }

  &-4 {
    z-index: 2;
    width: 4vmin;
    height: 2vmin;
    background: $skin-dark-color;
    top: 30.25vmin;
    left: 14.5vmin;
    transform: skewX(10deg) rotate(3deg);
    border-radius: 0 0 0 100%;

    &::before {
      width: 3vmin;
      height: 3vmin;
      background: $skin-dark-color;
      top: 1.9vmin;
      left: 0.55vmin;
      transform: skewX(-45deg) skewX(-5deg) rotate(4deg);
      border-radius: 30% 0 0 0;
    }

    &::after {
      width: 8.6vmin;
      height: 1vmin;
      background: $mouth-light-color;
      top: 1.9vmin;
      left: -10vmin;
      transform: rotate(-3deg);
    }
  }

  &-5 {
    z-index: 2;
    width: 4vmin;
    height: 1.5vmin;
    background: $mouth-color;
    top: 30.1vmin;
    left: 5.5vmin;
    transform: rotate(12deg);

    &::before {
      width: 4vmin;
      height: 1.5vmin;
      background: $mouth-color;
      top: 1.35vmin;
      left: -6vmin;
      transform: rotate(-22deg);
      border-radius: 30% 0 0 0;
    }

    &::after {
      width: 5.4vmin;
      height: 1.5vmin;
      background: $mouth-color;
      top: 2.15vmin;
      left: -0.9vmin;
      transform: rotate(-18deg);
    }
  }

  &-6 {
    z-index: 2;
    width: 5.5vmin;
    height: 1.5vmin;
    background: $mouth-color;
    top: 34.1vmin;
    left: -5.7vmin;
    transform: rotate(6deg);

    &::before {
      width: 8vmin;
      height: 2.7vmin;
      background: $skin-color;
      top: 0.15vmin;
      left: -4.9vmin;
      transform: rotate(-6deg) skewX(3deg);
      border-radius: 0 2vmin 0 0;
    }

    &::after {
      width: 2.7vmin;
      height: 0.6vmin;
      background: $mouth-color;
      top: 2.2vmin;
      left: 0.8vmin;
      transform: rotate(-2.5deg);
      border-radius: 100% 0 0 0;
    }
  }

  &-7 {
    z-index: 2;
    width: 3vmin;
    height: 0.5vmin;
    background: $skin-color;
    top: 27vmin;
    left: -9.1vmin;
    transform: rotate(-40deg);
  }
}

.cloud {
  &-1 {
    z-index: 2;
    width: 11vmin;
    height: 1vmin;
    background: $cloud-color;
    top: -5vmin;
    left: -62vmin;

    &::before {
      width: 6.7vmin;
      height: 1.25vmin;
      background: $bg-color;
      top: -0.5vmin;
      left: 3.8vmin;
      border-radius: 50%;
    }

    &::after {
      width: 0.6vmin;
      height: 2.5vmin;
      background: $skin-color;
      top: -0.9vmin;
      left: 10.2vmin;
      transform: rotate(-21.5deg);
      border-radius: 10%;
    }
  }

  &-2 {
    z-index: 2;
    width: 3.5vmin;
    height: 1vmin;
    background: $cloud-color;
    top: -5.9vmin;
    left: -69.5vmin;
    border-radius: 0 80% 0 0;

    &::before {
      width: 1.8vmin;
      height: 0.5vmin;
      background: $bg-color;
      top: 0.25vmin;
      left: 3vmin;
      transform: rotate(22deg);
      border-radius: 50%;
    }
  }

  &-3 {
    z-index: 2;
    width: 20vmin;
    height: 18.5vmin;
    background: $cloud-color;
    top: 28.2vmin;
    left: -71.1vmin;
    border-radius: 50%;

    &::before {
      width: 3vmin;
      height: 3vmin;
      background: $cloud-color;
      top: 16vmin;
      left: 24.8vmin;
      border-radius: 50%;
    }

    &::after {
      width: 1.5vmin;
      height: 3.5vmin;
      background: $hair-color;
      top: 15.5vmin;
      left: 26.75vmin;
      transform: rotate(-15deg);
    }
  }

  &-4 {
    z-index: 2;
    width: 8vmin;
    height: 5vmin;
    background: $cloud-color;
    top: 54vmin;
    left: -49vmin;

    &::before {
      width: 7.45vmin;
      height: 4.5vmin;
      background: $bg-color;
      top: -0.7vmin;
      left: 0.5vmin;
      transform: rotate(30deg);
      border-radius: 50%;
    }

    &::after {
      width: 10vmin;
      height: 11.5vmin;
      background: $cloud-color;
      top: -11.3vmin;
      left: -3.4vmin;
      border-radius: 50%;
    }
  }

  &-5 {
    z-index: 2;
    width: 10vmin;
    height: 15vmin;
    background: $cloud-color;
    top: 54vmin;
    left: -65.5vmin;

    &::before {
      width: 18vmin;
      height: 4vmin;
      background: $cloud-color;
      top: 11.5vmin;
      left: -0.2vmin;
      transform: rotate(-19deg);
      border-radius: 50%;
    }

    &::after {
      width: 15vmin;
      height: 60vmin;
      background: $bg-color;
      top: -25vmin;
      left: -12.9vmin;
    }
  }

  &-6 {
    z-index: 2;
    width: 8vmin;
    height: 2vmin;
    background: $cloud-color;
    top: 60vmin;
    left: -48vmin;
    border-radius: 0 0 50% 0;

    &::before {
      width: 5vmin;
      height: 5.3vmin;
      background: $cloud-color;
      top: -6.35vmin;
      left: 4.5vmin;
      border-radius: 50%;
    }

    &::after {
      width: 5vmin;
      height: 1vmin;
      background: $cloud-color;
      top: 0.3vmin;
      left: 5.4vmin;
      transform: rotate(-45deg);
      border-radius: 50%;
    }
  }

  &-7 {
    z-index: 2;
    width: 3vmin;
    height: 0.5vmin;
    background: $cloud-color;
    top: 56vmin;
    left: -36.5vmin;
    transform: rotate(-55deg);
    border-radius: 50%;

    &::before {
      width: 0.5vmin;
      height: 0.5vmin;
      background: $hair-color;
      top: -0.15vmin;
      left: 2.6vmin;
      transform: rotate(-15deg);
    }

    &::after {
      width: 0.65vmin;
      height: 4.2vmin;
      background: $cloud-color;
      top: -3.45vmin;
      left: 3.45vmin;
      transform: rotate(38deg);
    }
  }

  &-8 {
    z-index: 2;
    width: 2vmin;
    height: 4vmin;
    background: $cloud-color;
    top: 56vmin;
    left: -39vmin;
    transform: rotate(40deg);

    &::before {
      width: 2vmin;
      height: 2vmin;
      background: $cloud-color;
      top: -0.8vmin;
      left: -1vmin;
      transform: rotate(30deg);
    }
  }

  &-9 {
    z-index: 2;
    width: 6.5vmin;
    height: 19.8vmin;
    background: $cloud-color;
    top: 69.7vmin;
    left: 68.2vmin;
    transform: rotate(-23.5deg);
    border-radius: 50%;

    &::before {
      width: 3.5vmin;
      height: 3vmin;
      background: $bg-color;
      top: -0.5vmin;
      left: 1.85vmin;
      transform: rotate(22deg);
    }

    &::after {
      width: 7.2vmin;
      height: 3vmin;
      background: $cloud-color;
      top: 1.5vmin;
      left: 1.15vmin;
      transform: rotate(15deg);
      border-radius: 43% 50% 0 0;
    }
  }

  &-10 {
    z-index: 2;
    width: 7vmin;
    height: 7vmin;
    background: $cloud-color;
    top: 62vmin;
    left: 70vmin;

    &::before {
      width: 10vmin;
      height: 45vmin;
      background: $bg-color;
      top: -7.5vmin;
      left: 4.35vmin;
    }
  }
}

View Compiled

// design source
// https://www.vectorstock.com/royalty-free-vector/fashion-portrait-of-a-model-girl-with-sunglasses-vector-22319659

// speed code video
// https://twitter.com/asyrafhussin4/status/1580465315296645120

This Pen is owned by Asyraf Hussin on CodePen.

See more by @AsyrafHussin on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.