Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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="hair-12"></div>
<div class="hair-13"></div>
<div class="hair-14"></div>
<div class="hair-15"></div>
<div class="hair-16"></div>
<div class="hair-17"></div>
<div class="hair-18"></div>
<div class="hair-19"></div>
<div class="hair-20"></div>
<div class="hair-21"></div>
<div class="hair-22"></div>
<div class="hair-23"></div>
<div class="hair-24"></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="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="ear"></div>

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

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

<div class="cheek"></div>

<div class="mouth-1"></div>
<div class="mouth-2"></div>
              
            
!

CSS

              
                // colors
$bg-color: #ffe4db;
$hair-color: #391833;
$skin-color: #f9cbbc;
$skin-dark-color: #f8b6a0;
$cheek-color: #f9ab94;
$eyebrow-color: #371a2e;
$eye-color: #361a30;
$eye-light-color: #ff9f88;
$mouth-color: #f9977a;

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: 34.4vmin;
    height: 22vmin;
    background: $hair-color;
    top: -62vmin;
    left: -1.1vmin;
    transform: rotate(-18deg);
    border-radius: 13% 19.5vmin 0 0;

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

    &::after {
      width: 35vmin;
      height: 40vmin;
      background: $hair-color;
      top: 21vmin;
      left: 2.2vmin;
      transform: rotate(-13deg);
    }
  }

  &-2 {
    z-index: 2;
    width: 7vmin;
    height: 6vmin;
    background: $bg-color;
    top: -67.7vmin;
    left: -30.9vmin;
    transform: rotate(3deg);
    border-radius: 50%;

    &::before {
      width: 7vmin;
      height: 7vmin;
      background: $hair-color;
      top: -0.1vmin;
      left: 0.3vmin;
      border-radius: 50%;
    }

    &::after {
      width: 2vmin;
      height: 3vmin;
      background: $hair-color;
      top: -0.3vmin;
      left: 1.6vmin;
      transform: rotate(40deg);
    }
  }

  &-3 {
    z-index: 2;
    width: 30vmin;
    height: 30vmin;
    background: $hair-color;
    top: 25.3vmin;
    left: 55.8vmin;
    transform: rotate(35deg);
    border-radius: 8.7vmin;

    &::before {
      width: 30vmin;
      height: 30vmin;
      background: $bg-color;
      top: 0.6vmin;
      left: -0.5vmin;
      transform: skewY(-2deg);
      border-radius: 30%;
    }

    &::after {
      width: 35vmin;
      height: 35vmin;
      background: $hair-color;
      top: 1.7vmin;
      left: -5.7vmin;
      border-radius: 30%;
    }
  }

  &-4 {
    z-index: 2;
    width: 4vmin;
    height: 20vmin;
    background: $hair-color;
    top: 2vmin;
    left: 65.2vmin;
    transform: rotate(-50deg);
    border-radius: 0 0 30% 0;

    &::before {
      width: 2vmin;
      height: 2vmin;
      background: $hair-color;
      top: 8.3vmin;
      left: 2.5vmin;
      transform: rotate(-5deg);
    }

    &::after {
      width: 13vmin;
      height: 3vmin;
      background: $hair-color;
      top: 25.9vmin;
      left: -18.6vmin;
      transform: rotate(-9.5deg);
      border-radius: 0 0 0 70%;
    }
  }

  &-5 {
    z-index: 2;
    width: 5vmin;
    height: 23vmin;
    background: $bg-color;
    top: -23.3vmin;
    left: 56.2vmin;
    transform: rotate(-30deg);
    border-radius: 50%;

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

    &::after {
      width: 1vmin;
      height: 10vmin;
      background: $bg-color;
      top: 20vmin;
      left: 3.1vmin;
      transform: rotate(-29deg);
      border-radius: 50% 50% 0 50%;
    }
  }

  &-6 {
    z-index: 2;
    width: 9vmin;
    height: 0.5vmin;
    background: $bg-color;
    top: 1.2vmin;
    left: 74vmin;
    transform: rotate(32deg);
    border-radius: 50% 50% 0 50%;

    &::before {
      width: 20vmin;
      height: 14.5vmin;
      background: $hair-color;
      top: 25vmin;
      left: 5vmin;
      transform: rotate(-32deg);
    }

    &::after {
      width: 18vmin;
      height: 30vmin;
      background: $bg-color;
      top: 6.4vmin;
      left: 17.8vmin;
      border-radius: 50%;
    }
  }

  &-7 {
    z-index: 2;
    width: 12vmin;
    height: 12vmin;
    background: $hair-color;
    top: 65.8vmin;
    left: 77vmin;
    transform: rotate(67deg);
    border-radius: 0 0 0 10vmin;

    &::before {
      width: 15vmin;
      height: 13vmin;
      background: $bg-color;
      top: -2vmin;
      left: -2.2vmin;
      border-radius: 0 0 0 11vmin;
    }

    &::after {
      width: 13vmin;
      height: 10vmin;
      background: $bg-color;
      top: 1.45vmin;
      left: -0.2vmin;
      border-radius: 0 0 0 11vmin;
    }
  }

  &-8 {
    z-index: 2;
    width: 10vmin;
    height: 2vmin;
    background: $bg-color;
    top: 83.1vmin;
    left: 70vmin;

    &::before {
      width: 60vmin;
      height: 30vmin;
      background: $hair-color;
      top: -30vmin;
      left: -63.4vmin;
      border-radius: 94% 0 0 0;
    }

    &::after {
      width: 1vmin;
      height: 3vmin;
      background: $bg-color;
      top: -2vmin;
      left: -64.3vmin;
      transform: rotate(-6deg);
    }
  }

  &-9 {
    z-index: 2;
    width: 32.8vmin;
    height: 10vmin;
    background: $hair-color;
    top: 30vmin;
    left: -10.2vmin;
    transform: rotate(-38deg);

    &::before {
      width: 60vmin;
      height: 30vmin;
      background: $bg-color;
      top: 0.35vmin;
      left: -22.85vmin;
      transform: rotate(25deg) skewX(10deg);
      border-radius: 77% 0 0 0;
    }

    &::after {
      width: 21vmin;
      height: 9vmin;
      background: $bg-color;
      top: 0.75vmin;
      left: -19.85vmin;
      transform: rotate(-12deg);
      border-radius: 50%;
    }
  }

  &-10 {
    z-index: 2;
    width: 1vmin;
    height: 5vmin;
    background: $bg-color;
    top: 73vmin;
    left: -64.6vmin;
    transform: rotate(8deg);
    border-radius: 50%;

    &::before {
      width: 4vmin;
      height: 3vmin;
      background: $skin-dark-color;
      top: -4.6vmin;
      left: 1vmin;
      transform: rotate(42deg) skewY(35deg) skewX(17deg);
      border-radius: 40% 0 40% 5%;
    }

    &::after {
      width: 6vmin;
      height: 30vmin;
      background: $skin-dark-color;
      top: -28.6vmin;
      left: 10.75vmin;
      transform: rotate(49.5deg);
      border-radius: 50%;
    }
  }

  &-11 {
    z-index: 2;
    width: 2vmin;
    height: 0.3vmin;
    background: $hair-color;
    top: 41.8vmin;
    left: -41.1vmin;
    transform: rotate(-36deg);

    &::before {
      width: 10vmin;
      height: 2vmin;
      background: $skin-dark-color;
      top: 0.5vmin;
      transform: rotate(1.5deg);
    }

    &::after {
      width: 40vmin;
      height: 20vmin;
      background: $hair-color;
      top: 0.8vmin;
      left: -19.3vmin;
      transform: skewX(2deg);
      border-radius: 58% 0 0 0;
    }
  }

  &-12 {
    z-index: 2;
    width: 1vmin;
    height: 2vmin;
    background: $hair-color;
    top: 33vmin;
    left: -25.7vmin;
    transform: rotate(45deg);

    &::before {
      width: 20vmin;
      height: 30vmin;
      background: $skin-dark-color;
      left: 1.9vmin;
      border-radius: 0 0 0 50%;
    }

    &::after {
      width: 4vmin;
      height: 2vmin;
      background: $hair-color;
      top: 28vmin;
      left: 4.8vmin;
      transform: rotate(35deg);
    }
  }

  &-13 {
    z-index: 2;
    width: 30vmin;
    height: 20vmin;
    background: $hair-color;
    top: 67.3vmin;
    left: -27vmin;
    transform: rotate(-50deg);
    border-radius: 50% 0 0 0;

    &::before {
      width: 12vmin;
      height: 2vmin;
      background: $hair-color;
      top: -2.45vmin;
      left: 6vmin;
      transform: rotate(4.5deg);
    }

    &::after {
      width: 4vmin;
      height: 3vmin;
      background: $hair-color;
      top: -1.5vmin;
      left: 16vmin;
    }
  }

  &-14 {
    z-index: 2;
    width: 40vmin;
    height: 40vmin;
    background: $hair-color;
    top: 45vmin;
    left: 23vmin;
    border-radius: 50% 0 0 0;

    &::after {
      width: 80vmin;
      height: 15vmin;
      background: $bg-color;
      top: 38vmin;
      left: -30vmin;
    }
  }

  &-15 {
    width: 20vmin;
    height: 35vmin;
    background: $hair-color;
    top: -31vmin;
    left: -42.2vmin;
    border-radius: 10vmin 47% 0 0;

    &::before {
      width: 20vmin;
      height: 35vmin;
      background: $bg-color;
      top: 0.4vmin;
      left: 0.5vmin;
      border-radius: 9.7vmin 47% 0 0;
    }

    &::after {
      width: 20vmin;
      height: 35vmin;
      background: $hair-color;
      top: 0.3vmin;
      left: 1.3vmin;
      border-radius: 11vmin 47% 0 0;
    }
  }

  &-16 {
    width: 10vmin;
    height: 9vmin;
    background: $hair-color;
    top: -56.5vmin;
    left: -48vmin;
    transform: rotate(4deg);
    border-radius: 10vmin 0 0 0;

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

  &-17 {
    z-index: 2;
    width: 10vmin;
    height: 16vmin;
    background: $bg-color;
    top: -19.3vmin;
    left: -68.2vmin;
    border-radius: 0 30% 70% 0;

    &::before {
      width: 0.6vmin;
      height: 6.5vmin;
      background: $bg-color;
      top: -1.7vmin;
      left: 9.15vmin;
      transform: rotate(-8deg);
      border-radius: 50%;
    }

    &::after {
      width: 10vmin;
      height: 16vmin;
      background: $hair-color;
      top: 0.7vmin;
      left: -0.6vmin;
      border-radius: 0 30% 70% 0;
    }
  }

  &-18 {
    z-index: 2;
    width: 5vmin;
    height: 16vmin;
    background: $hair-color;
    top: -30vmin;
    left: -64.7vmin;
    transform: rotate(-6deg);
    border-radius: 50%;
  }

  &-19 {
    z-index: 2;
    width: 10vmin;
    height: 16vmin;
    background: $bg-color;
    top: -17.9vmin;
    left: -70.3vmin;
    border-radius: 0 30% 70% 0;

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

    &::after {
      width: 8vmin;
      height: 20vmin;
      background: $bg-color;
      top: -7.5vmin;
      left: 1.85vmin;
      transform: rotate(-5deg);
      border-radius: 50%;
    }
  }

  &-20 {
    z-index: 2;
    width: 5vmin;
    height: 15vmin;
    background: $bg-color;
    top: -40vmin;
    left: -67.1vmin;
    transform: rotate(-4deg);

    &::before {
      width: 1vmin;
      height: 7vmin;
      background: $hair-color;
      top: 23.8vmin;
      left: -1.15vmin;
      transform: rotate(45deg);
      border-radius: 50%;
    }
  }

  &-21 {
    width: 35vmin;
    height: 25vmin;
    background: $hair-color;
    top: 6vmin;
    left: -36vmin;

    &::before {
      width: 20vmin;
      height: 20vmin;
      background: $hair-color;
      top: 10vmin;
      left: -5.5vmin;
      transform: rotate(32deg);
      border-radius: 0 0 0 42%;
    }

    &::after {
      width: 8vmin;
      height: 20vmin;
      background: $hair-color;
      top: 17vmin;
      left: -2.5vmin;
      transform: rotate(-44deg);
      border-radius: 50%;
    }
  }

  &-22 {
    width: 10vmin;
    height: 10vmin;
    background: $hair-color;
    top: 43vmin;
    left: -56.7vmin;
    transform: rotate(-45deg);

    &::before {
      width: 5vmin;
      height: 10vmin;
      background: $hair-color;
      top: 3vmin;
      left: -1.3vmin;
      transform: rotate(15deg);
    }

    &::after {
      width: 4vmin;
      height: 12vmin;
      background: $bg-color;
      top: -1.2vmin;
      left: -4.4vmin;
      transform: rotate(13deg);
      border-radius: 50%;
    }
  }

  &-23 {
    width: 10vmin;
    height: 15vmin;
    background: $bg-color;
    top: 20vmin;
    left: -71.5vmin;
    transform: rotate(15deg);
    border-radius: 50%;

    &::before {
      width: 10vmin;
      height: 15vmin;
      background: $hair-color;
      top: -1vmin;
      left: 0.3vmin;
      transform: rotate(-10deg);
      border-radius: 50%;
    }

    &::after {
      width: 8vmin;
      height: 17vmin;
      background: $hair-color;
      top: 2.5vmin;
      left: 2.2vmin;
      transform: rotate(-35deg);
      border-radius: 50%;
    }
  }

  &-24 {
    width: 1vmin;
    height: 7vmin;
    background: $bg-color;
    top: 35.1vmin;
    left: -76vmin;
    transform: rotate(-38deg);
    border-radius: 50%;

    &::before {
      width: 2vmin;
      height: 9vmin;
      background: $hair-color;
      top: 0.3vmin;
      left: 0.35vmin;
      transform: rotate(2deg);
      border-radius: 50%;
    }
  }
}

.body {
  &-1 {
    z-index: 2;
    width: 2.7vmin;
    height: 24vmin;
    background: $skin-dark-color;
    top: 26.8vmin;
    left: -24.8vmin;
    transform: rotate(53deg);
    border-radius: 50%;

    &::before {
      width: 1vmin;
      height: 6vmin;
      background: $skin-dark-color;
      top: 18vmin;
      left: 1.35vmin;
      transform: rotate(3deg);
    }

    &::after {
      width: 12.5vmin;
      height: 25vmin;
      background: $skin-dark-color;
      top: -15vmin;
      left: -12.8vmin;
      transform: rotate(-35deg);
      border-radius: 50%;
    }
  }

  &-2 {
    width: 35vmin;
    height: 22vmin;
    background: $skin-dark-color;
    top: 43vmin;
    left: -25vmin;
    transform: skewX(3deg);
    border-radius: 8.5vmin 0 0 0;

    &::before {
      width: 4vmin;
      height: 15vmin;
      background: $skin-dark-color;
      top: 5vmin;
      left: -0.9vmin;
      border-radius: 65% 0 0 0;
    }
  }

  &-3 {
    z-index: 2;
    width: 3vmin;
    height: 6vmin;
    background: $hair-color;
    top: -24vmin;
    left: 2.7vmin;
    transform: rotate(-25deg);

    &::before {
      width: 2vmin;
      height: 10vmin;
      background: $hair-color;
      top: 2vmin;
      left: -0.95vmin;
      transform: rotate(18deg);
    }
  }

  &-4 {
    z-index: 2;
    width: 2.15vmin;
    height: 9.7vmin;
    background: $skin-dark-color;
    top: -13.2vmin;
    left: 0.3vmin;
    transform: rotate(-6.2deg);
    border-radius: 50%;

    &::before {
      width: 18vmin;
      height: 10vmin;
      background: $hair-color;
      top: 10.9vmin;
      left: -24.3vmin;
      transform: skewX(8deg) skewX(1deg);
      border-radius: 0 0 30% 80%;
    }

    &::after {
      width: 15vmin;
      height: 2vmin;
      background: $hair-color;
      top: 17.55vmin;
      left: -29vmin;
      transform: rotate(7.5deg);
    }
  }

  &-5 {
    z-index: 2;
    width: 9.5vmin;
    height: 0.9vmin;
    background: $skin-dark-color;
    top: 21.7vmin;
    left: -39vmin;
    transform: rotate(-0.5deg);
    border-radius: 50%;
  }
}

.face {
  &-1 {
    z-index: 2;
    width: 4vmin;
    height: 15vmin;
    background: $skin-color;
    top: -50vmin;
    left: -29.7vmin;
    transform: rotate(-22deg);
    border-radius: 0 5vmin 0 0;

    &::before {
      width: 7vmin;
      height: 15vmin;
      background: $skin-color;
      left: -5.2vmin;
      transform: rotate(15deg);
      border-radius: 74% 20% 0 0;
    }

    &::after {
      width: 1.5vmin;
      height: 4vmin;
      background: $hair-color;
      top: -1.7vmin;
      left: -1.3vmin;
      transform: rotate(62deg);
    }
  }

  &-2 {
    z-index: 2;
    width: 18vmin;
    height: 10vmin;
    background: $skin-color;
    top: -24.6vmin;
    left: -28.2vmin;

    &::before {
      width: 12vmin;
      height: 10vmin;
      background: $skin-color;
      top: -3.5vmin;
      left: 8vmin;
      transform: rotate(24deg);
    }

    &::after {
      width: 5.5vmin;
      height: 8vmin;
      background: $hair-color;
      top: 1vmin;
      left: -2.4vmin;
      transform: rotate(10deg);
      border-radius: 50%;
    }
  }

  &-3 {
    z-index: 2;
    width: 1vmin;
    height: 5vmin;
    background: $hair-color;
    top: -32vmin;
    left: -42.3vmin;
    transform: rotate(-13.5deg);

    &::before {
      width: 5vmin;
      height: 5vmin;
      background: $hair-color;
      left: -4.5vmin;
    }

    &::after {
      width: 6vmin;
      height: 4vmin;
      background: $hair-color;
      top: 6.3vmin;
      left: -6.8vmin;
      transform: rotate(-32deg);
      border-radius: 0 0 30% 0;
    }
  }

  &-4 {
    z-index: 2;
    width: 7vmin;
    height: 5vmin;
    background: $hair-color;
    top: -43vmin;
    left: -15.9vmin;
    transform: rotate(25deg);
    border-radius: 50%;

    &::before {
      width: 4vmin;
      height: 1vmin;
      background: $hair-color;
      top: 3vmin;
      left: -1.2vmin;
      transform: rotate(36deg);
      border-radius: 50%;
    }

    &::after {
      width: 1vmin;
      height: 4vmin;
      background: $hair-color;
      top: 1.2vmin;
      left: 6vmin;
      transform: rotate(47deg);
      border-radius: 50%;
    }
  }

  &-5 {
    z-index: 2;
    width: 2.4vmin;
    height: 6vmin;
    background: $skin-color;
    top: -45.5vmin;
    left: -20.2vmin;
    transform: rotate(-27deg);
    border-radius: 50%;

    &::before {
      width: 2.7vmin;
      height: 5vmin;
      background: $skin-color;
      top: 3.4vmin;
      left: 0.95vmin;
      transform: rotate(-48deg);
      border-radius: 50%;
    }

    &::after {
      width: 0.5vmin;
      height: 2.2vmin;
      background: $skin-color;
      top: 3.8vmin;
      left: 0.22vmin;
      transform: rotate(-14deg);
      border-radius: 50%;
    }
  }

  &-6 {
    z-index: 2;
    width: 12vmin;
    height: 7.5vmin;
    background: $hair-color;
    top: -48.5vmin;
    left: -15vmin;
    transform: rotate(45deg);
    border-radius: 50%;
  }

  &-7 {
    z-index: 2;
    width: 15vmin;
    height: 10vmin;
    background: $skin-color;
    top: -12.3vmin;
    left: -13.2vmin;
    transform: rotate(-35deg) skewX(-20deg);
    border-radius: 0 0 50% 0;

    &::before {
      width: 12vmin;
      height: 5vmin;
      background: $skin-color;
      top: 5.6vmin;
      left: 1vmin;
      border-radius: 0 0 80% 0;
    }

    &::after {
      width: 13vmin;
      height: 6.2vmin;
      background: $skin-color;
      top: 4.45vmin;
      left: -5.25vmin;
      transform: rotate(8deg);
      border-radius: 50%;
    }
  }

  &-8 {
    z-index: 2;
    width: 4vmin;
    height: 5.5vmin;
    background: $skin-color;
    top: 2vmin;
    left: -30.5vmin;
    transform: rotate(-16deg);
    border-radius: 0 0 0 32%;

    &::before {
      width: 0.5vmin;
      height: 2vmin;
      background: $hair-color;
      top: 0.4vmin;
      left: -0.4vmin;
      border-radius: 50%;
    }

    &::after {
      width: 10vmin;
      height: 10vmin;
      background: $skin-color;
      top: -8vmin;
      left: 0.1vmin;
      border-radius: 0 0 0 20%;
    }
  }

  &-9 {
    z-index: 2;
    width: 5vmin;
    height: 2.8vmin;
    background: $skin-color;
    top: -13.3vmin;
    left: -41.1vmin;
    transform: rotate(15deg);
    border-radius: 50% 0 50% 50%;

    &::before {
      width: 0.5vmin;
      height: 0.9vmin;
      background: $skin-color;
      top: 1.1vmin;
      left: -0.05vmin;
      transform: rotate(-30deg);
      border-radius: 40% 50% 50% 50%;
    }

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

  &-10 {
    z-index: 2;
    width: 4vmin;
    height: 1vmin;
    background: $hair-color;
    top: -9.8vmin;
    left: -42.2vmin;
    transform: rotate(9deg);
    border-radius: 50%;

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

    &::after {
      width: 2vmin;
      height: 3vmin;
      background: $skin-color;
      left: 4.6vmin;
      transform: rotate(-2deg);
      border-radius: 0 0 0 50%;
    }
  }
}

.ear {
  z-index: 2;
  width: 7.1vmin;
  height: 10vmin;
  background: $skin-color;
  top: -36.3vmin;
  left: -1.9vmin;
  transform: skewX(-2deg);
  border-radius: 50%;

  &::before {
    width: 3vmin;
    height: 6vmin;
    background: $skin-color;
    top: 0.3vmin;
    transform: rotate(28deg);
    border-radius: 50%;
  }

  &::after {
    width: 4vmin;
    height: 7.6vmin;
    background: $skin-color;
    top: 3.2vmin;
    left: 2.95vmin;
    transform: rotate(14deg);
    border-radius: 50%;
  }
}

.eyebrow {
  &-1 {
    z-index: 2;
    width: 6.2vmin;
    height: 3vmin;
    background: $eyebrow-color;
    top: -37.2vmin;
    left: -34.5vmin;
    border-radius: 50%;

    &::before {
      width: 6.5vmin;
      height: 3vmin;
      background: $skin-color;
      top: 0.8vmin;
      left: 0.7vmin;
      transform: rotate(-2deg);
      border-radius: 50%;
    }

    &::after {
      width: 1.5vmin;
      height: 2vmin;
      background: $skin-color;
      top: 1vmin;
    }
  }

  &-2 {
    z-index: 2;
    width: 2vmin;
    height: 1.05vmin;
    background: $eyebrow-color;
    top: -38.2vmin;
    left: -38.55vmin;
    transform: rotate(-15deg) skewX(-5deg);
    border-radius: 50%;
  }
}

.eye {
  &-1 {
    z-index: 2;
    width: 5.2vmin;
    height: 2vmin;
    background: $eye-color;
    top: -28.2vmin;
    left: -34.4vmin;
    transform: rotate(-49.5deg) skewX(8deg);
    border-radius: 0 0 0 1.7vmin;

    &::before {
      width: 5.2vmin;
      height: 2vmin;
      background: $skin-color;
      top: -0.45vmin;
      left: 0.4vmin;
      transform: rotate(10deg);
      border-radius: 10% 0 0 50%;
    }

    &::after {
      width: 1.1vmin;
      height: 0.5vmin;
      background: $skin-color;
      top: -0.1vmin;
      left: -0.1vmin;
      transform: rotate(29deg);
      border-radius: 0 0 0 100%;
    }
  }

  &-2 {
    z-index: 2;
    width: 1vmin;
    height: 3.5vmin;
    background: $skin-dark-color;
    top: -29vmin;
    left: -35.9vmin;
    transform: rotate(-10deg);
    border-radius: 50%;

    &::before {
      width: 1vmin;
      height: 4vmin;
      background: $skin-color;
      top: -0.2vmin;
      left: -0.3vmin;
      transform: rotate(8deg);
      border-radius: 50%;
    }

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

  &-3 {
    z-index: 2;
    width: 1vmin;
    height: 0.65vmin;
    background: $eye-color;
    top: -25.3vmin;
    left: -36.5vmin;
    transform: rotate(-23deg);
    border-radius: 0 0 0 40%;
  }
}

.cheek {
  z-index: 2;
  width: 4.3vmin;
  height: 7.6vmin;
  background: $cheek-color;
  top: -23.1vmin;
  left: -25.4vmin;
  transform: rotate(47deg) skewX(-4deg);
  border-radius: 50%;
}

.mouth {
  &-1 {
    z-index: 2;
    width: 5.5vmin;
    height: 1.6vmin;
    background: $mouth-color;
    top: -5.65vmin;
    left: -32.9vmin;
    transform: rotate(-53deg);
    border-radius: 50%;

    &::before {
      width: 2.2vmin;
      height: 1.5vmin;
      background: $mouth-color;
      top: -0.1vmin;
      left: -0.05vmin;
      transform: rotate(5deg);
      border-radius: 50%;
    }

    &::after {
      width: 1vmin;
      height: 1.5vmin;
      background: $mouth-color;
      top: -1.4vmin;
      left: 0.55vmin;
      border-radius: 50%;
    }
  }

  &-2 {
    z-index: 2;
    width: 3vmin;
    height: 1vmin;
    background: $mouth-color;
    top: -5.5vmin;
    left: -35vmin;
    transform: rotate(-15deg);
    border-radius: 0 0 0 30%;

    &::before {
      width: 4.2vmin;
      height: 1.5vmin;
      background: $skin-color;
      top: -1.5vmin;
      left: 0.9vmin;
      transform: rotate(-5deg);
      border-radius: 50%;
    }
  }
}

              
            
!

JS

              
                // design source
// https://www.freepik.com/premium-vector/portrait-beautiful-young-woman_22780566.htm

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

Console