Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <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="hair-9"></div>
<div class="hair-10"></div>
<div class="hair-11"></div>

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

<div class="neck-1"></div>
<div class="neck-2"></div>
<div class="neck-3"></div>

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

<div class="shirt-1"></div>
<div class="shirt-2"></div>
<div class="shirt-3"></div>
<div class="shirt-4"></div>
<div class="shirt-5"></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="face-9"></div>
<div class="face-10"></div>
<div class="face-11"></div>
<div class="face-12"></div>
<div class="face-13"></div>
<div class="face-14"></div>
<div class="face-15"></div>
<div class="face-16"></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="eyebrow-left"></div>

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

<div class="eyewear-center-1"></div>
<div class="eyewear-center-2"></div>

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

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

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

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

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

CSS

              
                // colors
$bg-color: #fff;
$dark-color: #000;
$shadow-color: #e6e6e6;
$shadow-dark-color: #cacaca;

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 {
    z-index: 2;
    width: 16vmin;
    height: 30vmin;
    background: $dark-color;
    top: -25.5vmin;
    left: 40.2vmin;
    transform: rotate(34deg);
    border-radius: 4.5vmin 11vmin 10vmin 0;

    &::before {
      width: 17vmin;
      height: 17vmin;
      background: $dark-color;
      top: -1vmin;
      left: -16.8vmin;
      transform: rotate(34deg);
      border-radius: 7.5vmin 0 10vmin 0;
    }

    &::after {
      width: 12vmin;
      height: 6vmin;
      background: $dark-color;
      top: 10.7vmin;
      left: -10vmin;
      transform: rotate(-32deg);
      border-radius: 50%;
    }
  }

  &-2 {
    z-index: 2;
    width: 10vmin;
    height: 1.5vmin;
    background: $bg-color;
    top: -74.3vmin;
    left: 21.5vmin;
    transform: rotate(-8deg);

    &::before {
      width: 4vmin;
      height: 1vmin;
      background: $bg-color;
      top: 0.65vmin;
      left: 5vmin;
      transform: rotate(10deg);
    }
  }

  &-3 {
    z-index: 2;
    width: 10vmin;
    height: 4vmin;
    background: $dark-color;
    top: -43.4vmin;
    left: 5vmin;
    transform: rotate(14deg);

    &::before {
      width: 25.5vmin;
      height: 12vmin;
      background: $dark-color;
      top: -9.8vmin;
      left: -18.7vmin;
      transform: rotate(-30deg);
      border-radius: 100%;
      box-shadow: 4vmin 4vmin 0 0 $dark-color;
    }

    &::after {
      width: 5vmin;
      height: 2.5vmin;
      background: $dark-color;
      top: -12.4vmin;
      left: -0.4vmin;
      border-radius: 100% 0 100% 0;
    }
  }

  &-4 {
    z-index: 4;
    width: 10vmin;
    height: 14.2vmin;
    background: $dark-color;
    top: -28.5vmin;
    left: -12vmin;
    border-radius: 0 3vmin 10vmin 0;

    &::before {
      width: 20vmin;
      height: 10vmin;
      background: $dark-color;
      top: -8vmin;
      left: -16.3vmin;
      transform: rotate(-71deg);
      border-radius: 1vmin 100% 0 0;
      box-shadow: -4vmin 5vmin 0 2vmin $dark-color;
    }

    &::after {
      width: 5vmin;
      height: 16vmin;
      background: $dark-color;
      top: 3vmin;
      left: -14.8vmin;
      transform: rotate(6deg);
      border-radius: 2vmin 0 0 0;
    }
  }

  &-5 {
    z-index: 4;
    width: 10vmin;
    height: 7.8vmin;
    background: $dark-color;
    top: -7.5vmin;
    left: -30vmin;
    transform: rotate(-1deg);
    border-radius: 0 0 2vmin 0;
    box-shadow: -3vmin -2vmin 0 0 $dark-color;

    &::before {
      width: 10vmin;
      height: 15vmin;
      background: $dark-color;
      top: -0.5vmin;
      left: -7.8vmin;
      border-radius: 0 0 0 1vmin;
      transform: rotate(15deg) skewY(49deg);
    }

    &::after {
      width: 14.5vmin;
      height: 25vmin;
      background: $dark-color;
      top: 7vmin;
      left: -5.8vmin;
      border-radius: 0 0 0 9vmin;
    }
  }

  &-6 {
    width: 8vmin;
    height: 4vmin;
    background: $dark-color;
    top: 47vmin;
    left: -40.4vmin;
    border-radius: 0 0 0 74%;

    &::before {
      width: 5vmin;
      height: 1.4vmin;
      background: $bg-color;
      top: 2.4vmin;
      left: 0.4vmin;
      transform: rotate(43deg);
      border-radius: 0.6vmin 0 0 2vmin;
    }

    &::after {
      width: 2.5vmin;
      height: 1vmin;
      background: $bg-color;
      top: 2.9vmin;
      left: 0.2vmin;
      transform: rotate(10deg);
    }
  }

  &-7 {
    width: 5vmin;
    height: 5.8vmin;
    background: $dark-color;
    top: 37.8vmin;
    left: -48.2vmin;
    border-radius: 0 0 0 62%;

    &::before {
      width: 3vmin;
      height: 1.2vmin;
      background: $bg-color;
      top: 0.9vmin;
      left: -1vmin;
      transform: rotate(30deg);
      border-radius: 0 40% 20% 90%;
    }

    &::after {
      width: 1.3vmin;
      height: 2.5vmin;
      background: $dark-color;
      top: 0.6vmin;
      left: 1.5vmin;
      transform: rotate(-10deg);
    }
  }

  &-8 {
    z-index: 4;
    width: 3vmin;
    height: 2vmin;
    background: $bg-color;
    top: 31.3vmin;
    left: -53vmin;
    transform: rotate(-25deg);

    &::before {
      width: 5.2vmin;
      height: 4.7vmin;
      background: $dark-color;
      top: -2.7vmin;
      left: -0.6vmin;
      transform: rotate(3deg) skewY(15deg);
      border-radius: 0 0 0 4.5vmin;
    }

    &::after {
      width: 5vmin;
      height: 3.4vmin;
      background: $bg-color;
      top: -3.2vmin;
      left: -0.6vmin;
      transform: rotate(45deg);
      border-radius: 50%;
    }
  }

  &-9 {
    z-index: 4;
    width: 4vmin;
    height: 4vmin;
    background: $bg-color;
    top: 24.8vmin;
    left: -58vmin;
    transform: skewY(15deg);

    &::before {
      width: 2.6vmin;
      height: 2vmin;
      background: $dark-color;
      top: 0.7vmin;
      left: 3.9vmin;
      transform: skewY(-15deg);
      border-radius: 50%;
    }

    &::after {
      width: 2vmin;
      height: 3.4vmin;
      background: $bg-color;
      top: 0.2vmin;
      left: 3.1vmin;
      transform: skewY(-15deg) rotate(55deg);
      border-radius: 50%;
    }
  }

  &-10 {
    z-index: 4;
    width: 4.5vmin;
    height: 4vmin;
    background: $dark-color;
    top: 21.7vmin;
    left: -54vmin;
    border-radius: 0 0 50% 0;

    &::before {
      width: 4.5vmin;
      height: 4vmin;
      background: $bg-color;
      top: -0.2vmin;
      left: -1vmin;
      transform: skewX(-5deg);
      border-radius: 0 0 52% 0;
    }

    &::after {
      width: 2.7vmin;
      height: 0.5vmin;
      background: $bg-color;
      top: 3.4vmin;
      left: -0.9vmin;
      transform: rotate(-8deg);
      border-radius: 50%;
    }
  }

  &-11 {
    z-index: 4;
    width: 4.5vmin;
    height: 5vmin;
    background: $dark-color;
    top: 17.8vmin;
    left: -53.4vmin;
    border-radius: 0 0 90% 0;

    &::before {
      width: 5.1vmin;
      height: 6vmin;
      background: $bg-color;
      top: -0.9vmin;
      left: -1.8vmin;
      transform: rotate(1deg);
      border-radius: 0 0 75% 0;
    }
  }
}

.ear {
  &-1 {
    z-index: 4;
    width: 5.6vmin;
    height: 2.8vmin;
    background: $bg-color;
    top: 1vmin;
    left: -41.6vmin;
    transform: rotate(-27deg) skewX(-25deg);
    border-radius: 1vmin 0.4vmin 1vmin 0;

    &::before {
      width: 5vmin;
      height: 3.4vmin;
      background: $bg-color;
      top: 2.7vmin;
      border-radius: 0 35% 0 50%;
    }

    &::after {
      width: 5vmin;
      height: 0.9vmin;
      background: $bg-color;
      top: 6.1vmin;
      left: -1.2vmin;
      transform: rotate(55deg) skewX(55deg);
      border-radius: 0.5vmin 0 0 0.5vmin;
    }
  }

  &-2 {
    z-index: 4;
    width: 4.7vmin;
    height: 8vmin;
    background: $bg-color;
    top: 16.6vmin;
    left: -37.1vmin;
    border-radius: 0 50% 0 50%;

    &::before {
      width: 2.2vmin;
      height: 1vmin;
      background: $dark-color;
      top: 6.8vmin;
      left: 1.8vmin;
      transform: rotate(-30deg);
      border-radius: 100%;
    }

    &::after {
      width: 2.4vmin;
      height: 1.5vmin;
      background: $bg-color;
      top: 5.8vmin;
      left: 1.8vmin;
      border-radius: 100%;
    }
  }

  &-3 {
    z-index: 4;
    width: 2vmin;
    height: 2vmin;
    background: $bg-color;
    top: 13.3vmin;
    left: -42vmin;
    border-radius: 50%;

    &::before {
      width: 3vmin;
      height: 2.5vmin;
      background: $dark-color;
      top: 4.8vmin;
      left: 1vmin;
      border-radius: 0 100% 0 0;
    }

    &::after {
      width: 1.2vmin;
      height: 2.7vmin;
      background: $dark-color;
      top: 3.4vmin;
      left: 0.6vmin;
      transform: rotate(-42deg);
    }
  }

  &-4 {
    z-index: 4;
    width: 2vmin;
    height: 5vmin;
    background: $dark-color;
    top: 5.4vmin;
    left: -42vmin;
    transform: rotate(10deg);
    border-radius: 30% 0 0 50%;

    &::before {
      width: 1.8vmin;
      height: 5vmin;
      background: $bg-color;
      top: 0.1vmin;
      left: 1vmin;
      transform: rotate(5deg);
      border-radius: 50%;
    }
  }

  &-5 {
    z-index: 4;
    width: 2.3vmin;
    height: 1.5vmin;
    background: $dark-color;
    top: 16.8vmin;
    left: -37.6vmin;
    border-radius: 0 100% 55% 90%;

    &::before {
      width: 2.4vmin;
      height: 1.5vmin;
      background: $bg-color;
      top: -0.2vmin;
      left: 0.2vmin;
      transform: skewX(16deg);
      border-radius: 0 100% 55% 90%;
    }
  }

  &-6 {
    z-index: 4;
    width: 0.8vmin;
    height: 3.9vmin;
    background: $dark-color;
    top: 13vmin;
    left: -41.2vmin;
    transform: rotate(-30deg);
    border-radius: 0 0 100% 0;

    &::before {
      width: 0.4vmin;
      height: 4.8vmin;
      background: $bg-color;
      top: -0.8vmin;
      left: -0.15vmin;
      transform: rotate(2deg);
      border-radius: 50%;
    }
  }

  &-7 {
    z-index: 4;
    width: 1.7vmin;
    height: 3.2vmin;
    background: $dark-color;
    top: 5.9vmin;
    left: -38vmin;
    transform: rotate(-30deg);
    border-radius: 1.1vmin 0 0 1.2vmin;

    &::before {
      width: 0.4vmin;
      height: 1.5vmin;
      background: $dark-color;
      top: 2.4vmin;
      left: 0.75vmin;
      transform: rotate(-55deg);
      border-radius: 50%;
    }
  }

  &-8 {
    z-index: 4;
    width: 0.9vmin;
    height: 1.8vmin;
    background: $dark-color;
    top: 11.7vmin;
    left: -37.4vmin;
    transform: rotate(15deg);
    border-radius: 50%;

    &::before {
      width: 1vmin;
      height: 1.9vmin;
      background: $bg-color;
      top: -0.45vmin;
      left: 0.3vmin;
      transform: rotate(-15deg);
      border-radius: 0 0 0 40%;
    }
  }

  &-9 {
    z-index: 4;
    width: 2vmin;
    height: 1.7vmin;
    background: $dark-color;
    top: 14.6vmin;
    left: -36.3vmin;
    border-radius: 40% 60% 0 50%;

    &::after {
      width: 2.5vmin;
      height: 2vmin;
      background: $bg-color;
      top: 0.2vmin;
      left: -0.5vmin;
      transform: skewY(20deg) skewX(20deg) rotate(-12deg);
      border-radius: 0 100%;
    }
  }
}

.neck {
  &-1 {
    z-index: 4;
    width: 2.8vmin;
    height: 14vmin;
    background: $bg-color;
    top: 38.4vmin;
    left: -34vmin;

    &::before {
      width: 10vmin;
      height: 1.5vmin;
      background: $dark-color;
      top: 13.95vmin;
      left: -3.7vmin;
      transform: rotate(24deg);
      border-radius: 4vmin 0 0 2vmin;
    }

    &::after {
      width: 1.7vmin;
      height: 0.85vmin;
      background: $bg-color;
      top: 12.65vmin;
      left: -2.5vmin;
      transform: rotate(35deg);
      border-radius: 1vmin 0 0 1vmin;
    }
  }

  &-2 {
    z-index: 4;
    width: 1vmin;
    height: 1.5vmin;
    background: $bg-color;
    top: 50.5vmin;
    left: -36.8vmin;
    transform: rotate(40deg);

    &::before {
      width: 0.6vmin;
      height: 1.2vmin;
      background: $dark-color;
      top: 0.15vmin;
      left: -0.35vmin;
      border-radius: 50%;
    }

    &::after {
      width: 0.7vmin;
      height: 12.6vmin;
      background: $dark-color;
      top: -10.9vmin;
      left: -4.2vmin;
      transform: rotate(-40deg);
      border-radius: 0 60% 100% 0;
    }
  }

  &-3 {
    z-index: 4;
    width: 8vmin;
    height: 1.15vmin;
    background: $bg-color;
    top: 54.2vmin;
    left: -32.5vmin;
    transform: rotate(26deg);
    border-radius: 52% 0 50% 10%;

    &::before {
      width: 7vmin;
      height: 0.7vmin;
      background: $bg-color;
      top: -0.5vmin;
      left: 1.5vmin;
    }
  }
}

.beard {
  &-1 {
    z-index: 4;
    width: 5vmin;
    height: 14vmin;
    background: $dark-color;
    top: 35vmin;
    left: -27.4vmin;
    border-radius: 0 0 0 20%;

    &::before {
      width: 4.5vmin;
      height: 12vmin;
      background: $dark-color;
      top: 10vmin;
      left: 2.5vmin;
      transform: rotate(-45deg);
      border-radius: 50%;
    }

    &::after {
      width: 1vmin;
      height: 2vmin;
      background: $dark-color;
      top: 17vmin;
      left: 3.6vmin;
      transform: rotate(-5deg);
    }
  }

  &-2 {
    width: 2vmin;
    height: 3vmin;
    background: $dark-color;
    top: 60vmin;
    left: -24.5vmin;
    transform: rotate(50deg);

    &::before {
      width: 11vmin;
      height: 16vmin;
      background: $dark-color;
      top: -16vmin;
      left: -8vmin;
      transform: rotate(-80deg);
    }

    &::after {
      width: 26vmin;
      height: 12vmin;
      background: $dark-color;
      top: -18.5vmin;
      left: -5.5vmin;
      transform: rotate(-50deg) skewX(-24deg);
      border-radius: 0 3vmin 3vmin 0;
    }
  }

  &-3 {
    width: 1.5vmin;
    height: 10vmin;
    background: $dark-color;
    top: 52vmin;
    left: 30.9vmin;
    transform: rotate(31deg);
    border-radius: 0 100% 15% 0;

    &::before {
      width: 1.7vmin;
      height: 8vmin;
      background: $dark-color;
      top: 4vmin;
      left: -0.1vmin;
      transform: rotate(-0.5deg);
      border-radius: 50%;
    }

    &::after {
      width: 7vmin;
      height: 1.1vmin;
      background: $dark-color;
      top: 12.7vmin;
      left: -5.25vmin;
      transform: rotate(-31deg) skewX(-20deg);
      border-radius: 0 0 2vmin 0;
    }
  }

  &-4 {
    width: 4vmin;
    height: 4vmin;
    background: $dark-color;
    top: 63vmin;
    left: 12.5vmin;

    &::before {
      width: 8vmin;
      height: 1.5vmin;
      background: $bg-color;
      top: 2.75vmin;
      left: 1.5vmin;
      transform: skewX(-25deg);
      border-radius: 2vmin 0 0 0;
    }

    &::after {
      width: 9.4vmin;
      height: 10vmin;
      background: $dark-color;
      top: -17vmin;
      left: 5.1vmin;
      transform: rotate(18deg);
    }
  }

  &-5 {
    width: 2vmin;
    height: 6vmin;
    background: $bg-color;
    top: 32vmin;
    left: 40.6vmin;
    transform: rotate(12deg);

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

    &::after {
      width: 1.5vmin;
      height: 5vmin;
      background: $dark-color;
      top: 1.9vmin;
      left: -11.4vmin;
      transform: rotate(36deg);
      border-radius: 50%;
    }
  }

  &-6 {
    width: 12vmin;
    height: 5.5vmin;
    background: $dark-color;
    top: 36.5vmin;
    left: 12.8vmin;
    transform: skewX(-33deg);
    border-radius: 35% 0 0 0;

    &::before {
      width: 5.5vmin;
      height: 1.2vmin;
      background: $bg-color;
      top: -0.1vmin;
      left: -0.6vmin;
      border-radius: 100% 0;
    }

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

.shirt {
  &-1 {
    width: 12vmin;
    height: 6vmin;
    background: $dark-color;
    top: 61.6vmin;
    left: -37vmin;
    transform: rotate(35deg);
    border-radius: 0 0 100% 0;

    &::before {
      width: 1vmin;
      height: 6vmin;
      background: $bg-color;
      left: -0.55vmin;
      transform: rotate(-1deg);
      border-radius: 50%;
    }

    &::after {
      width: 7.5vmin;
      height: 2.5vmin;
      background: $dark-color;
      top: -0.7vmin;
      left: 3vmin;
      transform: rotate(-12deg);
    }
  }

  &-2 {
    width: 17.5vmin;
    height: 4vmin;
    background: $dark-color;
    top: 69.5vmin;
    left: -5.4vmin;
    border-radius: 50%;

    &::before {
      width: 20vmin;
      height: 5vmin;
      background: $dark-color;
      top: -2vmin;
      left: -3vmin;
    }

    &::after {
      width: 5vmin;
      height: 4vmin;
      background: $bg-color;
      left: 16.3vmin;
      transform: skewX(-26deg);
      border-radius: 1vmin 0 0 0;
    }
  }

  &-3 {
    width: 1.2vmin;
    height: 8.4vmin;
    background: $dark-color;
    top: 65.1vmin;
    left: -55.4vmin;
    transform: rotate(47deg);
    border-radius: 50%;

    &::before {
      width: 2vmin;
      height: 7vmin;
      background: $dark-color;
      top: 1.4vmin;
      left: 1.1vmin;
      transform: rotate(10deg) skewY(-15deg);
      border-radius: 0 0 100% 0;
    }

    &::after {
      width: 2vmin;
      height: 1vmin;
      background: $bg-color;
      top: 8.35vmin;
      left: -0.5vmin;
      transform: rotate(5deg);
    }
  }

  &-4 {
    width: 10vmin;
    height: 4vmin;
    background: $dark-color;
    top: 64.2vmin;
    left: -46vmin;
    border-radius: 80% 0 0 0;

    &::before {
      width: 2vmin;
      height: 2vmin;
      background: $dark-color;
      top: -0.2vmin;
      left: 2.7vmin;
      border-radius: 20% 0 0 0;
    }

    &::after {
      width: 20.7vmin;
      height: 3.2vmin;
      background: $bg-color;
      top: 2.8vmin;
      left: 2.8vmin;
      transform: rotate(2deg);
      border-radius: 50%;
    }
  }

  &-5 {
    width: 1vmin;
    height: 2vmin;
    background: $bg-color;
    top: 68.8vmin;
    left: -50vmin;
    transform: rotate(62deg);
    border-radius: 30%;
  }
}

.face {
  &-1 {
    z-index: 2;
    width: 11.5vmin;
    height: 30vmin;
    background: $bg-color;
    top: -10vmin;
    left: 33.4vmin;
    transform: rotate(2deg) skewY(-10deg);
    border-radius: 50%;

    &::before {
      width: 2vmin;
      height: 8vmin;
      background: $bg-color;
      top: 13vmin;
      left: 9.7vmin;
      transform: rotate(-4deg);
    }

    &::after {
      width: 14vmin;
      height: 18vmin;
      background: $bg-color;
      top: 1.8vmin;
      left: -6.5vmin;
      transform: skewY(-5deg);
    }
  }

  &-2 {
    width: 12vmin;
    height: 5vmin;
    background: $shadow-color;
    top: -40vmin;
    left: 12.2vmin;
    transform: rotate(18deg);
    border-radius: 0 0 50% 0;

    &::before {
      width: 5vmin;
      height: 3vmin;
      background: $shadow-color;
      top: 2.5vmin;
      left: -2.3vmin;
      transform: rotate(-18deg);
    }
  }

  &-3 {
    z-index: 3;
    width: 9vmin;
    height: 1vmin;
    background: $shadow-color;
    top: -39.7vmin;
    left: 3.5vmin;
    transform: rotate(14deg);
    border-radius: 50%;

    &::before {
      width: 1.2vmin;
      height: 0.5vmin;
      background: $shadow-color;
      top: 0.4vmin;
      left: 8.3vmin;
      transform: rotate(15deg);
    }

    &::after {
      width: 6vmin;
      height: 12vmin;
      background: $shadow-color;
      top: 2vmin;
      left: -2vmin;
      transform: rotate(-9deg);
      border-radius: 0 0 62% 0;
    }
  }

  &-4 {
    z-index: 3;
    width: 10vmin;
    height: 8vmin;
    background: $shadow-color;
    top: -8.5vmin;
    left: -20.2vmin;
    transform: skewX(-30deg);

    &::before {
      width: 1.4vmin;
      height: 8.5vmin;
      background: $bg-color;
      top: -0.1vmin;
      left: 9.2vmin;
      transform: rotate(3deg);
      border-radius: 50%;
    }
  }

  &-5 {
    z-index: 4;
    width: 1vmin;
    height: 2vmin;
    background: $dark-color;
    top: -1.1vmin;
    left: -22.2vmin;
    transform: rotate(45deg);
    border-radius: 50%;

    &::before {
      width: 5vmin;
      height: 5.5vmin;
      background: $shadow-color;
      top: 1.55vmin;
      left: 0.8vmin;
      transform: rotate(2deg);
      border-radius: 0.2vmin 100% 0 65%;
    }

    &::after {
      width: 16.5vmin;
      height: 7.8vmin;
      background: $shadow-color;
      top: 2.5vmin;
      left: 1vmin;
      transform: rotate(29deg);
      border-radius: 0 0 35% 27%;
    }
  }

  &-6 {
    z-index: 3;
    width: 4vmin;
    height: 4vmin;
    background: $shadow-color;
    left: -20.1vmin;
    transform: rotate(10deg);
  }

  &-7 {
    width: 1.2vmin;
    height: 3.6vmin;
    background: $bg-color;
    top: 38.9vmin;
    left: -1.9vmin;
    transform: rotate(32deg);
    border-radius: 40%;
  }

  &-8 {
    z-index: 5;
    width: 2.2vmin;
    height: 1vmin;
    background: $shadow-color;
    top: 39.85vmin;
    left: -3.65vmin;
    transform: rotate(68deg);
    border-radius: 30% 50% 50% 50%;

    &::before {
      width: 2.5vmin;
      height: 1.1vmin;
      background: $shadow-color;
      top: -0.2vmin;
      left: -0.35vmin;
      transform: skewX(20deg);
      border-radius: 65% 30% 50% 0;
    }
  }

  &-9 {
    z-index: 4;
    width: 6.5vmin;
    height: 3vmin;
    background: $shadow-color;
    top: 32.7vmin;
    left: -11vmin;
    transform: skewX(-20deg);
    border-radius: 0 0 0 25%;

    &::before {
      width: 6vmin;
      height: 2vmin;
      background: $shadow-color;
      top: 1.15vmin;
      left: 1.4vmin;
      transform: rotate(3deg);
      border-radius: 0 100% 0 0;
    }

    &::after {
      width: 1.2vmin;
      height: 3.7vmin;
      background: $shadow-color;
      top: 2.8vmin;
      left: 7.1vmin;
      transform: rotate(-16deg) skewX(20deg);
      border-radius: 50%;
    }
  }

  &-10 {
    z-index: 4;
    width: 0.5vmin;
    height: 1vmin;
    background: $shadow-color;
    top: 36.4vmin;
    left: -5.8vmin;
    transform: rotate(-25deg);

    &::before {
      width: 2vmin;
      height: 4vmin;
      background: $bg-color;
      top: -2vmin;
      left: 0.7vmin;
      transform: rotate(-14deg);
    }

    &::after {
      width: 1.5vmin;
      height: 3vmin;
      background: $bg-color;
      top: -3.5vmin;
      left: -0.1vmin;
      transform: rotate(-35deg);
    }
  }

  &-11 {
    z-index: 4;
    width: 3vmin;
    height: 5vmin;
    background: $bg-color;
    top: 4vmin;
    left: -13.45vmin;
    transform: rotate(2deg);
    border-radius: 20%;

    &::before {
      width: 4vmin;
      height: 5vmin;
      background: $bg-color;
      top: 4.2vmin;
      left: -1.85vmin;
      transform: skewX(10deg) rotate(-25deg);
      border-radius: 40% 0 0 0;
    }

    &::after {
      width: 4vmin;
      height: 13.5vmin;
      background: $bg-color;
      top: 3vmin;
      left: 1.8vmin;
      transform: rotate(-25deg);
      border-radius: 30%;
    }
  }

  &-12 {
    z-index: 4;
    width: 1.5vmin;
    height: 4vmin;
    background: $bg-color;
    top: 6vmin;
    left: -16.5vmin;
    transform: rotate(30deg);

    &::before {
      width: 0.7vmin;
      height: 2.75vmin;
      background: $shadow-color;
      top: 0.65vmin;
      left: -0.4vmin;
      border-radius: 50%;
    }

    &::after {
      width: 6vmin;
      height: 2vmin;
      background: $bg-color;
      top: 6.5vmin;
      left: 2.2vmin;
      transform: rotate(35deg);
    }
  }

  &-13 {
    z-index: 4;
    width: 3vmin;
    height: 5.5vmin;
    background: $bg-color;
    top: 26.8vmin;
    left: -10.3vmin;
    transform: rotate(-23deg);
    border-radius: 0 0 0 50%;

    &::before {
      width: 7vmin;
      height: 1vmin;
      background: $shadow-color;
      top: -18.05vmin;
      left: 5vmin;
    }
  }

  &-14 {
    z-index: 4;
    width: 2.5vmin;
    height: 3.5vmin;
    background: $bg-color;
    top: 25.5vmin;
    left: 23.5vmin;
    transform: rotate(-45deg);
    border-radius: 0 0 0 30%;

    &::before {
      width: 3.5vmin;
      height: 2.5vmin;
      background: $bg-color;
      top: 1.4vmin;
      left: 1.1vmin;
      transform: rotate(20deg);
      border-radius: 0 0 50% 50%;
    }

    &::after {
      width: 3vmin;
      height: 5vmin;
      background: $bg-color;
      top: 3.2vmin;
      left: 2.45vmin;
      transform: rotate(23deg);
      border-radius: 0 0 0 25%;
    }
  }

  &-15 {
    z-index: 4;
    width: 3vmin;
    height: 1vmin;
    background: $bg-color;
    top: 25.5vmin;
    left: 29vmin;

    &::before {
      width: 2.2vmin;
      height: 6vmin;
      background: $bg-color;
      top: -0.65vmin;
      left: 4.25vmin;
      transform: rotate(10deg);
      border-radius: 50%;
    }

    &::after {
      width: 2.8vmin;
      height: 1.5vmin;
      background: $bg-color;
      top: 3vmin;
      left: 2.8vmin;
      transform: rotate(43deg);
    }
  }

  &-16 {
    z-index: 4;
    width: 1vmin;
    height: 17.4vmin;
    background: $dark-color;
    top: 11vmin;
    left: 41.7vmin;
    transform: rotate(10.5deg);
    border-radius: 10%;

    &::before {
      width: 1vmin;
      height: 17.6vmin;
      background: $bg-color;
      top: -0.1vmin;
      left: -0.15vmin;
      border-radius: 10%;
    }
  }
}

.mouth {
  &-1 {
    z-index: 4;
    width: 10vmin;
    height: 5.7vmin;
    background: $bg-color;
    top: 42vmin;
    left: 13.2vmin;
    transform: skewX(-25deg);
    border-radius: 2.5vmin 2vmin 0 1vmin;

    &::before {
      width: 7vmin;
      height: 5.7vmin;
      background: $bg-color;
      left: 6.7vmin;
      transform: skewX(29deg);
      border-radius: 0 2.2vmin 0.7vmin 0;
    }

    &::after {
      width: 6vmin;
      height: 0.7vmin;
      background: $bg-color;
      top: -0.7vmin;
      left: 3.5vmin;
      transform: skewX(25deg);
    }
  }

  &-2 {
    z-index: 4;
    width: 5vmin;
    height: 1vmin;
    background: $dark-color;
    top: 35.4vmin;
    left: 14.9vmin;
    border-radius: 0 0 100% 0;

    &::before {
      width: 5vmin;
      height: 1vmin;
      background: $dark-color;
      top: 0.1vmin;
      left: 4.8vmin;
      border-radius: 0 0 0 100%;
    }

    &::after {
      width: 2vmin;
      height: 0.5vmin;
      background: $dark-color;
      top: -0.05vmin;
      left: 4vmin;
    }
  }

  &-3 {
    z-index: 4;
    width: 7.2vmin;
    height: 3.55vmin;
    background: $bg-color;
    top: 49.7vmin;
    left: 9vmin;
    transform: rotate(44deg);
    border-radius: 0 1vmin 1.5vmin 0.4vmin;

    &::before {
      width: 2.5vmin;
      height: 6.1vmin;
      background: $bg-color;
      top: -7.55vmin;
      left: 8.9vmin;
      transform: rotate(-5deg) skewY(48deg) skewX(-2deg);
      border-radius: 1vmin 1vmin 1.5vmin 30%;
    }

    &::after {
      width: 2vmin;
      height: 2.5vmin;
      background: $bg-color;
      top: -1.5vmin;
      left: 3.2vmin;
      transform: rotate(-20deg);
    }
  }

  &-4 {
    z-index: 4;
    width: 6vmin;
    height: 2vmin;
    background: $dark-color;
    top: 47.3vmin;
    left: 20.8vmin;
    transform: skewX(-37deg);
    border-radius: 25% 55% 0 30%;

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

    &::after {
      width: 2vmin;
      height: 1.5vmin;
      background: $dark-color;
      top: 0.8vmin;
      transform: rotate(10deg);
      border-radius: 50%;
    }
  }

  &-5 {
    z-index: 4;
    width: 11.7vmin;
    height: 1.9vmin;
    background: $dark-color;
    top: 40.4vmin;
    left: 18.3vmin;
    transform: skewX(-2deg);
    border-radius: 0 65% 0 0;

    &::before {
      width: 11.7vmin;
      height: 1.9vmin;
      background: $bg-color;
      top: 0.5vmin;
      left: -0.5vmin;
      transform: skewX(25deg);
      border-radius: 1vmin 50% 0 0;
    }

    &::after {
      width: 2vmin;
      height: 0.5vmin;
      background: $bg-color;
      top: 0.35vmin;
      left: 10.2vmin;
      transform: rotate(35deg);
      border-radius: 0 100% 0 0;
    }
  }

  &-6 {
    z-index: 4;
    width: 1.2vmin;
    height: 0.3vmin;
    background: $bg-color;
    top: 41vmin;
    left: 30vmin;
    transform: rotate(60deg);
    border-radius: 0 100% 0 0;
  }
}

.eyebrow-left {
  z-index: 4;
  width: 7.2vmin;
  height: 2vmin;
  background: $dark-color;
  top: -5vmin;
  left: 38.5vmin;
  border-radius: 80% 30% 1.3vmin 10%;

  &::before {
    width: 6.4vmin;
    height: 3.5vmin;
    background: $bg-color;
    top: 0.55vmin;
    left: 0.45vmin;
    transform: skewX(-8deg) rotate(5deg);
    border-radius: 80% 30% 1.3vmin 10%;
  }

  &::after {
    width: 0.4vmin;
    height: 1vmin;
    background: $dark-color;
    top: -0.05vmin;
    left: 7vmin;
    transform: rotate(38deg);
  }
}

.eyebrow-right {
  &-1 {
    z-index: 4;
    width: 6vmin;
    height: 3vmin;
    background: $dark-color;
    top: -7.5vmin;
    left: -2vmin;
    border-radius: 100% 0 0 0;

    &::before {
      width: 9.7vmin;
      height: 8vmin;
      background: $dark-color;
      top: 0.15vmin;
      left: 5.8vmin;
      transform: rotate(1.9deg);
      border-radius: 0 100% 0 0;
    }

    &::after {
      width: 12.2vmin;
      height: 6.3vmin;
      background: $bg-color;
      top: 0.9vmin;
      left: -0.3vmin;
      border-radius: 50%;
    }
  }

  &-2 {
    z-index: 4;
    width: 12vmin;
    height: 6vmin;
    background: $bg-color;
    top: 0.8vmin;
    left: 13vmin;

    &::before {
      width: 1vmin;
      height: 2vmin;
      background: $bg-color;
      top: -1vmin;
      left: -5.2vmin;
    }
  }
}

.eyewear-center {
  &-1 {
    z-index: 5;
    width: 7.1vmin;
    height: 2vmin;
    background: $dark-color;
    top: -2.1vmin;
    left: 28.3vmin;
    transform: rotate(5deg);
    border-radius: 20%;

    &::before {
      width: 7.3vmin;
      height: 2.2vmin;
      background: $bg-color;
      top: 0.3vmin;
      left: -0.1vmin;
      border-radius: 25%;
    }
  }

  &-2 {
    z-index: 5;
    width: 4.5vmin;
    height: 2vmin;
    background: $dark-color;
    top: 2vmin;
    left: 27.6vmin;
    transform: rotate(2deg);
    border-radius: 1vmin 40% 0 0;

    &::before {
      width: 4.7vmin;
      height: 2vmin;
      background: $bg-color;
      top: 0.3vmin;
      left: -0.1vmin;
      border-radius: 1.8vmin 60% 0 0;
    }

    &::after {
      width: 1.5vmin;
      height: 2vmin;
      background: $bg-color;
      left: 4.2vmin;
      transform: rotate(28deg);
    }
  }
}

.eyewear-right {
  &-1 {
    z-index: 6;
    width: 10vmin;
    height: 4vmin;
    background: $dark-color;
    top: 1vmin;
    left: 44.5vmin;
    border-radius: 0 70% 0 0;

    &::before {
      width: 10.2vmin;
      height: 4vmin;
      background: $bg-color;
      top: 0.25vmin;
      left: -0.1vmin;
      border-radius: 12% 85% 0 0;
    }

    &::after {
      width: 0.3vmin;
      height: 2.5vmin;
      background: $dark-color;
      left: -0.9vmin;
      transform: rotate(42deg);
    }
  }

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

  &-3 {
    z-index: 6;
    width: 6.5vmin;
    height: 9.7vmin;
    background: $dark-color;
    top: 11vmin;
    left: 46.8vmin;
    transform: rotate(5deg) skewY(-2deg);
    border-radius: 100% 0;

    &::before {
      width: 6.5vmin;
      height: 9.5vmin;
      background: $bg-color;
      left: -0.25vmin;
      border-radius: 100% 0;
    }

    &::after {
      width: 0.3vmin;
      height: 0.3vmin;
      background: $dark-color;
      top: -0.2vmin;
      left: 6.1vmin;
      transform: rotate(-40deg);
      box-shadow: -5.5vmin -1vmin 0 1vmin $bg-color;
    }
  }

  &-4 {
    z-index: 6;
    width: 4.7vmin;
    height: 10.4vmin;
    background: $dark-color;
    top: 10.4vmin;
    left: 35.2vmin;
    transform: skewY(-5.5deg);
    border-radius: 1vmin 0 0 68%;

    &::before {
      width: 4.7vmin;
      height: 10.3vmin;
      background: $bg-color;
      top: -0.15vmin;
      left: 0.2vmin;
      border-radius: 1.6vmin 0 0 75%;
    }
  }

  &-5 {
    z-index: 6;
    width: 1vmin;
    height: 11.2vmin;
    background: $dark-color;
    top: 8.7vmin;
    left: 42.1vmin;
    transform: rotate(10deg);
    border-radius: 50% 0 0 50%;

    &::before {
      width: 1vmin;
      height: 11.1vmin;
      background: $bg-color;
      top: 0.15vmin;
      left: -0.14vmin;
      border-radius: 50% 0 0 50%;
    }

    &::after {
      width: 0.7vmin;
      height: 0.2vmin;
      background: $dark-color;
      top: 11.15vmin;
      left: 0.4vmin;
      transform: rotate(-20deg);
    }
  }
}

.eye-right {
  &-1 {
    z-index: 6;
    width: 5vmin;
    height: 2.2vmin;
    background: $dark-color;
    top: 3.3vmin;
    left: 36.05vmin;
    border-radius: 40% 100% 60% 100%;

    &::before {
      width: 4.8vmin;
      height: 2.2vmin;
      background: $bg-color;
      top: 0.25vmin;
      left: -0.05vmin;
      border-radius: 40% 100% 60% 100%;
    }

    &::after {
      width: 1vmin;
      height: 1vmin;
      background: $bg-color;
      top: 1.3vmin;
      left: 4.3vmin;
    }
  }

  &-2 {
    z-index: 6;
    width: 2.5vmin;
    height: 1.3vmin;
    background: $dark-color;
    top: 5vmin;
    left: 37.5vmin;
    transform: skewX(-40deg);
    border-radius: 0 0 100% 0;

    &::before {
      width: 2.5vmin;
      height: 1.2vmin;
      background: $bg-color;
      top: -0.05vmin;
      left: -0.4vmin;
      border-radius: 0 0 100% 0;
    }
  }

  &-3 {
    z-index: 6;
    width: 2vmin;
    height: 1.4vmin;
    background: $dark-color;
    top: 4.9vmin;
    left: 33vmin;
    transform: rotate(-1deg);
    border-radius: 0 0 0 2vmin;

    &::before {
      width: 2.2vmin;
      height: 1.3vmin;
      background: $bg-color;
      top: -0.1vmin;
      border-radius: 0 0 0 2vmin;
    }

    &::after {
      width: 0.5vmin;
      height: 1.2vmin;
      background: $bg-color;
      top: -0.3vmin;
      left: -0.05vmin;
    }
  }

  &-4 {
    z-index: 6;
    width: 2.2vmin;
    height: 1.9vmin;
    background: $dark-color;
    top: 3.2vmin;
    left: 34.2vmin;
    border-radius: 25% 25% 45% 45%;
  }

  &-5 {
    z-index: 6;
    width: 0.8vmin;
    height: 0.4vmin;
    background: $shadow-dark-color;
    top: 2.45vmin;
    left: 35.1vmin;
    transform: rotate(5deg);
    border-radius: 20% 20% 20% 70%;
  }
}

.eyewear-left {
  &-1 {
    z-index: 6;
    width: 12.5vmin;
    height: 3.5vmin;
    background: $dark-color;
    top: -2.2vmin;
    left: 10.5vmin;
    border-radius: 50% 38% 0 0;

    &::before {
      width: 12vmin;
      height: 3.5vmin;
      background: $bg-color;
      top: 0.4vmin;
      left: 0.25vmin;
      border-radius: 50% 38% 0 0;
    }

    &::after {
      width: 1.8vmin;
      height: 3.3vmin;
      background: $bg-color;
      top: 1vmin;
      left: 11.3vmin;
      border-radius: 30%;
    }
  }

  &-2 {
    z-index: 6;
    width: 0.6vmin;
    height: 3vmin;
    background: $dark-color;
    top: -1.2vmin;
    left: 23.1vmin;
    transform: rotate(-25deg);
    border-radius: 0 0 30% 0;
  }

  &-3 {
    z-index: 6;
    width: 7vmin;
    height: 8.5vmin;
    background: $dark-color;
    top: 8.7vmin;
    left: 15.8vmin;
    transform: skewX(-14deg);
    border-radius: 0 0 100% 0;

    &::before {
      width: 7vmin;
      height: 8.4vmin;
      background: $bg-color;
      top: -0.1vmin;
      left: -0.4vmin;
      border-radius: 0 0 100% 0;
    }
  }

  &-4 {
    z-index: 6;
    width: 0.6vmin;
    height: 1.9vmin;
    background: $dark-color;
    top: 1.7vmin;
    left: 23.6vmin;
    border-radius: 0 0 50% 0;
  }

  &-5 {
    z-index: 6;
    width: 4.8vmin;
    height: 10.3vmin;
    background: $dark-color;
    top: 7.1vmin;
    left: 2.3vmin;
    transform: skewY(-2.5deg);
    border-radius: 28% 0 0 4.5vmin;

    &::before {
      width: 4.8vmin;
      height: 10.2vmin;
      background: $bg-color;
      top: -0.1vmin;
      left: 0.45vmin;
      border-radius: 28% 0 0 4.5vmin;
    }
  }

  &-6 {
    z-index: 6;
    width: 0.4vmin;
    height: 1.7vmin;
    background: $dark-color;
    top: -0.7vmin;
    left: -1.8vmin;
    transform: rotate(7deg);

    &::before {
      width: 1vmin;
      height: 1.5vmin;
      background: $bg-color;
      top: -0.65vmin;
      left: 0.5vmin;
      transform: rotate(-5deg);
      border-radius: 100% 0 0 0;
    }
  }

  &-7 {
    z-index: 6;
    width: 11vmin;
    height: 0.6vmin;
    background: $dark-color;
    top: -4.9vmin;
    left: -11.5vmin;
    transform: rotate(12deg);
  }

  &-8 {
    z-index: 6;
    width: 4vmin;
    height: 1vmin;
    background: $shadow-dark-color;
    top: -3.6vmin;
    left: 17.45vmin;
    transform: rotate(8deg);
    border-radius: 40%;

    &::before {
      width: 1.1vmin;
      height: 4vmin;
      background: $dark-color;
      left: 4vmin;
      transform: rotate(-22deg);
      border-radius: 50%;
    }

    &::after {
      width: 1.1vmin;
      height: 4.1vmin;
      background: $shadow-dark-color;
      top: 0vmin;
      left: 3.8vmin;
      transform: rotate(-22deg);
      border-radius: 50%;
    }
  }

  &-9 {
    z-index: 6;
    width: 1vmin;
    height: 4.5vmin;
    background: $shadow-dark-color;
    top: 6.3vmin;
    left: 20.6vmin;
    transform: rotate(32deg);
    border-radius: 50%;

    &::before {
      width: 3vmin;
      height: 4.2vmin;
      background: $shadow-dark-color;
      top: -1.6vmin;
      left: -3vmin;
      transform: rotate(-32deg);
      border-radius: 20%;
    }
  }

  &-10 {
    z-index: 6;
    width: 3vmin;
    height: 6vmin;
    background: $bg-color;
    top: 0.3vmin;
    left: 15.5vmin;
    transform: rotate(-35deg);
    border-radius: 50%;

    &::before {
      width: 2vmin;
      height: 5vmin;
      background: $bg-color;
      top: 3.4vmin;
      transform: rotate(38deg);
      border-radius: 50%;
    }
  }

  &-11 {
    z-index: 6;
    width: 5vmin;
    height: 2.2vmin;
    background: $shadow-dark-color;
    top: 14.5vmin;
    left: 6.3vmin;
    transform: rotate(5deg);
    border-radius: 50%;

    &::before {
      width: 6vmin;
      height: 2.2vmin;
      background: $bg-color;
      top: -0.3vmin;
      left: -0.3vmin;
      border-radius: 0 0 50% 50%;
    }
  }
}

.eye-left {
  &-1 {
    z-index: 6;
    width: 5vmin;
    height: 1.5vmin;
    background: $shadow-dark-color;
    top: 4vmin;
    left: 3.4vmin;
    border-radius: 0 0 1.5vmin 60%;

    &::before {
      width: 5vmin;
      height: 1.5vmin;
      background: $bg-color;
      top: -0.35vmin;
      left: 0.05vmin;
      transform: skewY(9deg);
      border-radius: 0 0 2vmin 60%;
    }

    &::after {
      width: 3vmin;
      height: 1vmin;
      background: $bg-color;
      top: -0.4vmin;
      left: 3vmin;
    }
  }

  &-2 {
    z-index: 6;
    width: 5vmin;
    height: 2.2vmin;
    background: $dark-color;
    top: 0.2vmin;
    left: 6.8vmin;
    transform: rotate(2deg);
    border-radius: 40% 100% 60% 100%;

    &::before {
      width: 4.8vmin;
      height: 2.2vmin;
      background: $bg-color;
      top: 0.25vmin;
      left: -0.05vmin;
      border-radius: 40% 100% 60% 100%;
    }

    &::after {
      width: 1vmin;
      height: 1vmin;
      background: $bg-color;
      top: 1.3vmin;
      left: 4.3vmin;
    }
  }

  &-3 {
    z-index: 6;
    width: 2.5vmin;
    height: 1.5vmin;
    background: $dark-color;
    top: 2.2vmin;
    left: 8.3vmin;
    transform: skewX(-33deg);
    border-radius: 0 0 100% 0;

    &::before {
      width: 2.5vmin;
      height: 1.3vmin;
      background: $bg-color;
      top: -0.05vmin;
      left: -0.35vmin;
      border-radius: 0 0 100% 0;
    }
  }

  &-4 {
    z-index: 6;
    width: 3.5vmin;
    height: 1.4vmin;
    background: $dark-color;
    top: 2.35vmin;
    left: 2vmin;
    border-radius: 0 0 0 70%;

    &::before {
      width: 3.5vmin;
      height: 1.4vmin;
      background: $bg-color;
      top: -0.2vmin;
      transform: rotate(-2deg);
      border-radius: 0 0 0 70%;
    }

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

  &-5 {
    z-index: 6;
    width: 2.5vmin;
    height: 1vmin;
    background: $dark-color;
    top: -0.45vmin;
    left: 1vmin;
    transform: rotate(-13.5deg);

    &::before {
      width: 2.5vmin;
      height: 1vmin;
      background: $bg-color;
      top: 0.2vmin;
      left: -0.05vmin;
      transform: skewX(-20deg);
      border-radius: 0 0 0 40%;
    }
  }

  &-6 {
    z-index: 6;
    width: 2.5vmin;
    height: 2.2vmin;
    background: $dark-color;
    top: 0.3vmin;
    left: 4vmin;
    border-radius: 25% 25% 45% 45%;
  }

  &-7 {
    z-index: 6;
    width: 1vmin;
    height: 0.5vmin;
    background: $shadow-dark-color;
    top: -0.6vmin;
    left: 4.8vmin;
    transform: rotate(5deg);
    border-radius: 20% 20% 20% 70%;
  }

  &-8 {
    z-index: 6;
    width: 1vmin;
    height: 0.1vmin;
    background: $dark-color;
    left: -2.7vmin;
    transform: rotate(-30deg);

    &::before {
      width: 1vmin;
      height: 0.1vmin;
      background: $dark-color;
      top: 0.45vmin;
      left: -0.25vmin;
      transform: rotate(70deg);
    }
  }
}

.nose {
  &-1 {
    z-index: 6;
    width: 3vmin;
    height: 3.5vmin;
    background: $dark-color;
    top: 23vmin;
    left: 15.1vmin;
    border-radius: 1.5vmin 0 50% 50%;

    &::before {
      width: 3vmin;
      height: 3.1vmin;
      background: $bg-color;
      top: -0.1vmin;
      left: 0.4vmin;
      transform: skewX(-4deg);
      border-radius: 1.5vmin 0 50% 50%;
    }

    &::after {
      width: 1vmin;
      height: 1vmin;
      background: $bg-color;
      top: -0.2vmin;
      left: 1.1vmin;
    }
  }

  &-2 {
    z-index: 6;
    width: 5.2vmin;
    height: 1.9vmin;
    background: $dark-color;
    top: 24.4vmin;
    left: 22vmin;
    border-radius: 60% 40% 70% 30% / 100% 80% 20% 0;

    &::before {
      width: 3vmin;
      height: 1vmin;
      background: $bg-color;
      top: -0.4vmin;
      left: -0.3vmin;
      transform: rotate(-30deg);
    }

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

  &-3 {
    z-index: 6;
    width: 4vmin;
    height: 0.5vmin;
    background: $bg-color;
    top: 25.9vmin;
    left: 22vmin;
    border-radius: 50% 50% 0 0;

    &::before {
      width: 0.7vmin;
      height: 2.5vmin;
      background: $bg-color;
      top: -1.1vmin;
      transform: rotate(60deg);
    }

    &::after {
      width: 3vmin;
      height: 1.5vmin;
      background: $bg-color;
      top: -1vmin;
      left: 1.2vmin;
      transform: rotate(-11deg);
      border-radius: 5% 100% 0 60%;
    }
  }

  &-4 {
    z-index: 6;
    width: 2.2vmin;
    height: 0.4vmin;
    background: $bg-color;
    top: 24.1vmin;
    left: 22.5vmin;
    transform: rotate(2deg);
    border-radius: 50%;

    &::before {
      width: 0.5vmin;
      height: 1vmin;
      background: $bg-color;
      top: 0.5vmin;
      left: 2.8vmin;
      transform: rotate(-60deg);
    }
  }

  &-5 {
    z-index: 6;
    width: 1.6vmin;
    height: 1vmin;
    background: $dark-color;
    top: 24.4vmin;
    left: 28vmin;
    transform: rotate(-30deg);
    border-radius: 0 0 0 40%;

    &::before {
      width: 1.6vmin;
      height: 1.1vmin;
      background: $bg-color;
      top: -0.3vmin;
      left: 0.25vmin;
      border-radius: 40% 0 0 40%;
    }
  }

  &-6 {
    z-index: 6;
    width: 1.7vmin;
    height: 2.2vmin;
    background: $dark-color;
    top: 24.7vmin;
    left: 31.6vmin;
    transform: rotate(-20deg);
    border-radius: 0 0 1.8vmin 0;

    &::before {
      width: 0.5vmin;
      height: 2vmin;
      background: $bg-color;
      top: 0.7vmin;
      left: -0.2vmin;
      transform: rotate(-13deg);
    }

    &::after {
      width: 1.2vmin;
      height: 0.6vmin;
      background: $bg-color;
      top: 2vmin;
      left: -0.1vmin;
      transform: rotate(20deg);
    }
  }

  &-7 {
    z-index: 6;
    width: 1.4vmin;
    height: 2vmin;
    background: $bg-color;
    top: 23.2vmin;
    left: 31.3vmin;
    transform: rotate(-20deg) skewX(-10deg);
    border-radius: 50%;

    &::before {
      width: 3vmin;
      height: 0.6vmin;
      background: $bg-color;
      top: 0.35vmin;
      left: -0.5vmin;
      transform: rotate(-9deg);
    }
  }

  &-8 {
    z-index: 6;
    width: 1vmin;
    height: 2.4vmin;
    background: $dark-color;
    top: 19.9vmin;
    left: 32.3vmin;
    border-radius: 0 0 75% 0;

    &::before {
      width: 1vmin;
      height: 2.5vmin;
      background: $bg-color;
      top: -0.1vmin;
      left: -0.3vmin;
      border-radius: 0 0 55% 0;
    }

    &::after {
      width: 0.3vmin;
      height: 0.8vmin;
      background: $dark-color;
      top: -0.35vmin;
      left: 0.6vmin;
      transform: rotate(-13deg);
    }
  }
}

              
            
!

JS

              
                // design source
// https://society6.com/product/la-casa-de-papel-tee-sirt-el-profesor_framed-print

// speed code video
// https://twitter.com/asyrafhussin4/status/1536598965155573760
              
            
!
999px

Console