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="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="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="shirt-6"></div>
<div class="shirt-7"></div>

<div class="eyewear-1"></div>
<div class="eyewear-2"></div>
<div class="eyewear-3"></div>
<div class="eyewear-4"></div>
<div class="eyewear-5"></div>
<div class="eyewear-6"></div>
<div class="eyewear-7"></div>
<div class="eyewear-8"></div>
<div class="eyewear-9"></div>
<div class="eyewear-10"></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="mouth-1"></div>
<div class="mouth-2"></div>
<div class="mouth-3"></div>
<div class="mouth-4"></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>
              
            
!

CSS

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

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;
    }
  }
}

.face {
  &-1 {
    width: 45vmin;
    height: 65vmin;
    background: $dark-color;
    top: -36vmin;
    left: -10vmin;
    transform: rotate(-30deg);
    border-radius: 54% 0 0 0;

    &::before {
      width: 40vmin;
      height: 60vmin;
      background: $dark-color;
      top: 3vmin;
      transform: skewX(2deg);
      border-radius: 53% 0 0 0;
    }

    &::after {
      width: 40vmin;
      height: 5vmin;
      background: $bg-color;
      top: -4.65vmin;
      left: 10vmin;
      transform: rotate(6deg);
    }
  }

  &-2 {
    width: 30vmin;
    height: 20vmin;
    background: $bg-color;
    top: -87.7vmin;
    left: -8vmin;
    transform: rotate(-30deg);
    border-radius: 7.8vmin 0 0 0;

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

    &::after {
      width: 8vmin;
      height: 8vmin;
      background: $dark-color;
      top: 4.5vmin;
      left: -8.5vmin;
      transform: rotate(14deg);
      border-radius: 0 20% 80% 0;
    }
  }

  &-3 {
    width: 15vmin;
    height: 30vmin;
    background: $bg-color;
    top: -36.7vmin;
    left: -29vmin;
    transform: rotate(-30deg);
    border-radius: 45% 0 0 0;

    &::before {
      width: 2.5vmin;
      height: 11vmin;
      background: $bg-color;
      top: 9.7vmin;
      left: -0.3vmin;
      border-radius: 50%;
    }

    &::after {
      width: 3vmin;
      height: 5vmin;
      background: $dark-color;
      top: 15vmin;
      left: -3.1vmin;
      transform: rotate(-20deg);
    }
  }

  &-4 {
    width: 50vmin;
    height: 65vmin;
    background: $bg-color;
    top: -20vmin;
    left: 20vmin;

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

    &::after {
      width: 15vmin;
      height: 30vmin;
      background: $dark-color;
      top: 30vmin;
      left: -4.6vmin;
      transform: rotate(-32deg);
      border-radius: 42% 50% 0 23%;
    }
  }

  &-5 {
    width: 10vmin;
    height: 10vmin;
    background: $dark-color;
    top: 41.5vmin;
    left: 14.5vmin;
    transform: skewX(-5deg);
    border-radius: 0 0 60% 0;

    &::before {
      width: 10vmin;
      height: 2vmin;
      background: $dark-color;
      top: 8.2vmin;
      left: -6vmin;
      transform: rotate(-2deg);
    }

    &::after {
      width: 5vmin;
      height: 2vmin;
      background: $bg-color;
      top: 5.6vmin;
      left: 5.8vmin;
      transform: rotate(-30deg);
      border-radius: 0 0 0 5%;
    }
  }

  &-6 {
    width: 4vmin;
    height: 2vmin;
    background: $dark-color;
    top: 46vmin;
    left: 17vmin;
    transform: rotate(-36deg);

    &::before {
      width: 6vmin;
      height: 2vmin;
      background: $bg-color;
      top: 0.05vmin;
      transform: rotate(2deg);
      border-radius: 0 0 0 100%;
    }

    &::after {
      width: 8vmin;
      height: 2.8vmin;
      background: $bg-color;
      top: -1.7vmin;
      left: 1vmin;
      border-radius: 0 0 0 40%;
    }
  }

  &-7 {
    width: 28vmin;
    height: 6vmin;
    background: $dark-color;
    top: 31.1vmin;
    left: 21vmin;
    transform: rotate(-44deg);
    border-radius: 50%;

    &::before {
      width: 8vmin;
      height: 1vmin;
      background: $dark-color;
      top: 4.9vmin;
      left: 4vmin;
      transform: rotate(1deg);
    }

    &::after {
      width: 20vmin;
      height: 6vmin;
      background: $bg-color;
      top: -0.7vmin;
      left: 10vmin;
      transform: rotate(-4deg);
      border-radius: 50%;
    }
  }

  &-8 {
    width: 26vmin;
    height: 10vmin;
    background: $dark-color;
    top: 15vmin;
    left: 25.5vmin;
    transform: rotate(-65deg);
    border-radius: 50%;

    &::before {
      width: 29vmin;
      height: 12vmin;
      background: $bg-color;
      top: -3vmin;
      left: 0.2vmin;
      transform: rotate(-1deg);
      border-radius: 50%;
    }

    &::after {
      width: 17vmin;
      height: 6vmin;
      background: $bg-color;
      top: -2.75vmin;
      left: -9.4vmin;
      transform: rotate(46deg);
      border-radius: 50%;
    }
  }

  &-9 {
    width: 5vmin;
    height: 0.7vmin;
    background: $bg-color;
    top: 36.9vmin;
    left: 16vmin;
    transform: rotate(-33deg);
    border-radius: 50%;

    &::before {
      width: 3.6vmin;
      height: 1.5vmin;
      background: $dark-color;
      top: -0.25vmin;
      left: -3.25vmin;
      transform: rotate(15deg);
      border-radius: 50%;
    }

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

  &-10 {
    width: 6vmin;
    height: 3vmin;
    background: $dark-color;
    top: 43.25vmin;
    left: 0.2vmin;
    border-radius: 50%;

    &::before {
      width: 1vmin;
      height: 0.6vmin;
      background: $bg-color;
      top: 0.2vmin;
      left: 5.4vmin;
      border-radius: 50%;
    }

    &::after {
      width: 3vmin;
      height: 1vmin;
      background: $dark-color;
      left: 5.7vmin;
      transform: rotate(-25deg);
      border-radius: 50%;
    }
  }

  &-11 {
    width: 3vmin;
    height: 8vmin;
    background: $dark-color;
    top: 37vmin;
    left: -8.3vmin;
    transform: rotate(-32deg);

    &::before {
      width: 1vmin;
      height: 6vmin;
      background: $bg-color;
      top: 1vmin;
      left: 2.2vmin;
      transform: skewY(15deg);
      border-radius: 0 0 0 60%;
    }

    &::after {
      width: 2vmin;
      height: 6vmin;
      background: $dark-color;
      left: 0.5vmin;
      transform: rotate(5deg);
    }
  }

  &-12 {
    width: 1vmin;
    height: 3vmin;
    background: $dark-color;
    top: 32vmin;
    left: -9.8vmin;

    &::before {
      width: 6vmin;
      height: 1vmin;
      background: $dark-color;
      top: 1vmin;
      left: -3.15vmin;
      transform: rotate(-40deg);
    }

    &::after {
      width: 4vmin;
      height: 5vmin;
      background: $dark-color;
      top: -1vmin;
      left: -7.35vmin;
    }
  }
}

.shirt {
  &-1 {
    width: 12vmin;
    height: 16vmin;
    background: $dark-color;
    top: 47vmin;
    left: -23vmin;
    transform: rotate(48deg);

    &::before {
      width: 4vmin;
      height: 30vmin;
      background: $dark-color;
      top: -6vmin;
      left: 11.5vmin;
      transform: rotate(13deg);
      border-radius: 50%;
    }

    &::after {
      width: 5vmin;
      height: 10vmin;
      background: $dark-color;
      top: -2vmin;
      left: 10vmin;
      border-radius: 35% 0 0 0;
    }
  }

  &-2 {
    width: 21.1vmin;
    height: 27vmin;
    background: $dark-color;
    top: 83.3vmin;
    left: -50vmin;

    &::before {
      width: 10vmin;
      height: 24vmin;
      background: $dark-color;
      top: 4vmin;
      left: 12.8vmin;
      transform: rotate(-13deg);
    }

    &::after {
      width: 20vmin;
      height: 10vmin;
      background: $dark-color;
      top: -3.5vmin;
      left: 1.1vmin;
      transform: rotate(-19deg);
    }
  }

  &-3 {
    width: 20vmin;
    height: 36vmin;
    background: $dark-color;
    top: 74.5vmin;
    left: 51.1vmin;
    border-radius: 100% 0 0 0;

    &::before {
      width: 12vmin;
      height: 10vmin;
      background: $dark-color;
      top: -3.5vmin;
      left: 7vmin;
      transform: rotate(-46.5deg);
    }

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

  &-4 {
    width: 1vmin;
    height: 10vmin;
    background: $dark-color;
    top: 22.15vmin;
    left: 52vmin;
    transform: rotate(-52deg);
    border-radius: 50%;

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

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

  &-5 {
    width: 3vmin;
    height: 5vmin;
    background: $dark-color;
    top: 30vmin;
    left: 52.8vmin;
    transform: rotate(-10deg);

    &::before {
      width: 10vmin;
      height: 24vmin;
      background: $bg-color;
      top: 20vmin;
      left: -20vmin;
      transform: rotate(55.5deg);
      border-radius: 50%;
    }

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

  &-6 {
    width: 10vmin;
    height: 5vmin;
    background: $dark-color;
    top: 78vmin;
    left: 42vmin;
    transform: rotate(30deg);

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

    &::after {
      width: 4vmin;
      height: 10vmin;
      background: $bg-color;
      top: -20.5vmin;
      left: -3.6vmin;
      transform: rotate(-17deg);
      border-radius: 0 100% 0 0;
    }
  }

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

.eyewear {
  &-1 {
    width: 1.4vmin;
    height: 2vmin;
    background: $dark-color;
    top: -7.2vmin;
    left: -51.5vmin;
    transform: rotate(-30deg);
    border-radius: 1vmin 1vmin 0 1vmin;

    &::before {
      width: 0.8vmin;
      height: 7.5vmin;
      background: $dark-color;
      top: -5.5vmin;
      left: 2.1vmin;
      transform: rotate(29deg);
      border-radius: 50%;
    }

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

  &-2 {
    width: 3vmin;
    height: 6vmin;
    background: $dark-color;
    top: -5vmin;
    left: -45.5vmin;
    transform: rotate(-40deg);
    border-radius: 50%;

    &::before {
      width: 2.8vmin;
      height: 8.5vmin;
      background: $dark-color;
      top: -3.5vmin;
      left: 9.2vmin;
      transform: rotate(-30deg);
      border-radius: 50%;
    }

    &::after {
      width: 1vmin;
      height: 2.5vmin;
      background: $dark-color;
      top: 3.5vmin;
      left: 12.9vmin;
      transform: rotate(28deg);
    }
  }

  &-3 {
    width: 2.2vmin;
    height: 4vmin;
    background: $dark-color;
    top: -21vmin;
    left: -24.7vmin;
    transform: rotate(44deg);
    border-radius: 20% 0 0 0;

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

    &::after {
      width: 1vmin;
      height: 4vmin;
      background: $dark-color;
      top: -2.9vmin;
      left: 2.5vmin;
      transform: rotate(45deg);
    }
  }

  &-4 {
    width: 2vmin;
    height: 0.5vmin;
    background: $bg-color;
    top: -21.1vmin;
    left: -19.9vmin;
    transform: rotate(-1.5deg);
    border-radius: 50%;

    &::before {
      width: 3vmin;
      height: 7vmin;
      background: $dark-color;
      top: -7.5vmin;
      left: -2.6vmin;
      transform: rotate(-24deg);
      border-radius: 40% 0 0 0;
    }

    &::after {
      width: 2vmin;
      height: 7vmin;
      background: $bg-color;
      top: -8vmin;
      left: -2.4vmin;
      transform: rotate(-26deg);
      border-radius: 50%;
    }
  }

  &-5 {
    width: 2vmin;
    height: 3vmin;
    background: $bg-color;
    top: -35vmin;
    left: -27vmin;
    transform: rotate(-30deg);

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

    &::after {
      width: 5.5vmin;
      height: 1.5vmin;
      background: $dark-color;
      top: 7.7vmin;
      left: -1vmin;
      transform: rotate(35deg);
      border-radius: 50%;
    }
  }

  &-6 {
    width: 12.5vmin;
    height: 10vmin;
    background: $dark-color;
    top: -28vmin;
    left: -3.5vmin;
    transform: rotate(-37deg);
    border-radius: 50%;

    &::before {
      width: 2vmin;
      height: 6vmin;
      background: $dark-color;
      top: 2vmin;
      left: 11vmin;
      transform: rotate(-10deg);
      border-radius: 0 77% 0 0;
    }

    &::after {
      width: 5vmin;
      height: 9vmin;
      background: $dark-color;
      top: 3vmin;
      transform: rotate(-15deg);
      border-radius: 50% 0 0 50%;
    }
  }

  &-7 {
    width: 1.8vmin;
    height: 6vmin;
    background: $dark-color;
    top: -20vmin;
    left: -11.7vmin;
    transform: rotate(-42deg);
    border-radius: 50%;

    &::before {
      width: 7.5vmin;
      height: 4vmin;
      background: $dark-color;
      top: 7.15vmin;
      left: 2.2vmin;
      transform: rotate(14deg);
      border-radius: 50%;
    }

    &::after {
      width: 4vmin;
      height: 1vmin;
      background: $dark-color;
      top: 8.7vmin;
      left: 0.9vmin;
      transform: rotate(42deg);
      border-radius: 50%;
    }
  }

  &-8 {
    width: 5vmin;
    height: 9vmin;
    background: $dark-color;
    top: -25vmin;
    left: 7.4vmin;
    transform: rotate(5deg);
    border-radius: 50%;

    &::before {
      width: 2vmin;
      height: 3vmin;
      background: $dark-color;
      top: 1vmin;
      left: 2.85vmin;
      transform: rotate(-5deg);
    }

    &::after {
      width: 2vmin;
      height: 1vmin;
      background: $dark-color;
      top: 0.6vmin;
      left: 3.9vmin;
      transform: rotate(-30deg) skewX(-10deg);
      border-radius: 0 0 50% 0;
    }
  }

  &-9 {
    width: 2vmin;
    height: 1vmin;
    background: $dark-color;
    top: -33vmin;
    left: 12vmin;
    transform: rotate(-35deg);
    border-radius: 50%;

    &::before {
      width: 10vmin;
      height: 1vmin;
      background: $dark-color;
      top: -0.45vmin;
      left: 0.6vmin;
      transform: rotate(-11deg);
    }

    &::after {
      width: 10vmin;
      height: 0.5vmin;
      background: $bg-color;
      left: 1.85vmin;
      transform: rotate(-13deg);
      border-radius: 20% 0 0 0;
    }
  }

  &-10 {
    width: 0.8vmin;
    height: 3.3vmin;
    background: $dark-color;
    top: -49.6vmin;
    left: 26.8vmin;
    transform: rotate(42deg);
    border-radius: 0 0 0 90%;

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

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

.nose {
  &-1 {
    width: 5vmin;
    height: 14vmin;
    background: $bg-color;
    top: -5vmin;
    left: -15.1vmin;
    transform: rotate(-16.5deg);
    border-radius: 0 0 50% 0;

    &::before {
      width: 5vmin;
      height: 3.1vmin;
      background: $bg-color;
      top: 11.9vmin;
      left: -1.6vmin;
      border-radius: 50%;
    }

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

  &-2 {
    width: 4vmin;
    height: 3vmin;
    background: $bg-color;
    top: 2.5vmin;
    left: -8vmin;
    transform: rotate(-40deg);

    &::before {
      width: 2vmin;
      height: 1.1vmin;
      background: $dark-color;
      top: 3vmin;
      left: 1.3vmin;
      transform: rotate(15deg);
      border-radius: 50%;
    }

    &::after {
      width: 2vmin;
      height: 1.1vmin;
      background: $dark-color;
      top: 3.15vmin;
      left: 1.2vmin;
      transform: rotate(8deg);
      border-radius: 50%;
    }
  }

  &-3 {
    width: 1vmin;
    height: 4vmin;
    background: $bg-color;
    top: 11vmin;
    left: -6vmin;
    transform: rotate(-20deg);
    border-radius: 50%;

    &::before {
      width: 1vmin;
      height: 0.4vmin;
      background: $dark-color;
      top: -0.2vmin;
    }

    &::after {
      width: 1.4vmin;
      height: 4.5vmin;
      background: $bg-color;
      top: 0.2vmin;
      left: 0.55vmin;
    }
  }

  &-4 {
    width: 4vmin;
    height: 1.5vmin;
    background: $bg-color;
    top: 15.25vmin;
    left: -5vmin;
    transform: rotate(-20deg);
    border-radius: 50%;

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

    &::after {
      width: 1.5vmin;
      height: 3.5vmin;
      background: $bg-color;
      top: -2.15vmin;
      left: -1vmin;
      transform: rotate(-12deg);
      border-radius: 50%;
    }
  }

  &-5 {
    width: 2.2vmin;
    height: 3.8vmin;
    background: $bg-color;
    top: 15.7vmin;
    left: -12vmin;
    border-radius: 50%;

    &::before {
      width: 1.2vmin;
      height: 0.5vmin;
      background: $bg-color;
      left: 0.35vmin;
      transform: rotate(-40deg);
      border-radius: 50%;
    }

    &::after {
      width: 1vmin;
      height: 2.1vmin;
      background: $dark-color;
      top: -3vmin;
      left: -2.3vmin;
      transform: rotate(-10deg);
      border-radius: 0 0 50% 50%;
    }
  }

  &-6 {
    width: 2.2vmin;
    height: 1vmin;
    background: $bg-color;
    top: 8.5vmin;
    left: -19.3vmin;
    transform: rotate(60deg);
    border-radius: 50%;

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

    &::after {
      width: 1vmin;
      height: 0.5vmin;
      background: $dark-color;
      top: 0.4vmin;
      left: -0.1vmin;
      transform: rotate(-20deg);
    }
  }
}

.mouth {
  &-1 {
    width: 6vmin;
    height: 1.2vmin;
    background: $bg-color;
    top: 17.5vmin;
    left: -7.9vmin;
    transform: rotate(-20deg) skewX(-20deg);
    border-radius: 0 0 0 10%;

    &::before {
      width: 5vmin;
      height: 0.6vmin;
      background: $bg-color;
      top: 0.75vmin;
      left: 0.1vmin;
      border-radius: 50%;
    }

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

  &-2 {
    width: 9vmin;
    height: 2vmin;
    background: $dark-color;
    top: 16vmin;
    left: 3.7vmin;
    transform: rotate(-25deg);
    border-radius: 0 50% 0 0;

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

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

  &-3 {
    width: 4vmin;
    height: 2.4vmin;
    background: $bg-color;
    top: 23.25vmin;
    left: -8.5vmin;
    transform: rotate(-20deg);
    border-radius: 50%;

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

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

  &-4 {
    width: 4vmin;
    height: 2vmin;
    background: $bg-color;
    top: 21.5vmin;
    left: 3.2vmin;
    transform: rotate(-30deg);

    &::before {
      width: 4vmin;
      height: 1.25vmin;
      background: $dark-color;
      top: 0.65vmin;
      left: -2.9vmin;
      transform: rotate(2deg);
      border-radius: 50%;
    }
  }
}

.ear {
  &-1 {
    width: 5.5vmin;
    height: 15vmin;
    background: $dark-color;
    top: -35vmin;
    left: 38vmin;
    border-radius: 50%;

    &::before {
      width: 5.5vmin;
      height: 14.8vmin;
      background: $bg-color;
      top: -0.9vmin;
      left: -0.65vmin;
      transform: rotate(-1.5deg) skewY(5deg);
      border-radius: 50%;
    }

    &::after {
      width: 1vmin;
      height: 4.5vmin;
      background: $dark-color;
      top: 13vmin;
      left: 2.6vmin;
      transform: rotate(23deg);
      border-radius: 15% 0 0 100%;
    }
  }

  &-2 {
    width: 1vmin;
    height: 1.5vmin;
    background: $dark-color;
    top: -20vmin;
    left: 38.5vmin;
    transform: rotate(-2deg);
    border-radius: 0 0 50% 0;

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

    &::after {
      width: 3vmin;
      height: 4vmin;
      background: $bg-color;
      top: -2.5vmin;
      left: -3.4vmin;
    }
  }

  &-3 {
    width: 2vmin;
    height: 10vmin;
    background: $dark-color;
    top: -45vmin;
    left: 32.7vmin;
    transform: rotate(17deg);
    border-radius: 50%;

    &::before {
      width: 1vmin;
      height: 3vmin;
      background: $bg-color;
      top: 7vmin;
      left: -0.45vmin;
      transform: rotate(-20deg);
    }

    &::after {
      width: 2vmin;
      height: 2vmin;
      background: $bg-color;
      top: 9.2vmin;
      left: -0.2vmin;
      transform: rotate(22deg) skewY(20deg);
    }
  }

  &-4 {
    width: 1vmin;
    height: 5vmin;
    background: $dark-color;
    top: -50.5vmin;
    left: 38.2vmin;
    transform: rotate(-34deg);
    border-radius: 50%;

    &::before {
      width: 1.5vmin;
      height: 5.4vmin;
      background: $bg-color;
      top: 0.4vmin;
      left: -0.9vmin;
      border-radius: 50%;
    }

    &::after {
      width: 1.2vmin;
      height: 8vmin;
      background: $bg-color;
      top: -0.8vmin;
      left: -3.6vmin;
      transform: rotate(46deg);
      border-radius: 50%;
    }
  }

  &-5 {
    width: 2vmin;
    height: 7vmin;
    background: $bg-color;
    top: -44vmin;
    left: 34.5vmin;
    transform: rotate(10deg);

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

    &::after {
      width: 1.3vmin;
      height: 5.65vmin;
      background: $dark-color;
      top: 3.35vmin;
      left: 2.25vmin;
      transform: rotate(-10deg);
      border-radius: 50%;
    }
  }

  &-6 {
    width: 1.1vmin;
    height: 1vmin;
    background: $dark-color;
    top: -42.8vmin;
    left: 36.4vmin;
    border-radius: 0 10% 0 0;

    &::before {
      width: 2.5vmin;
      height: 1.7vmin;
      background: $dark-color;
      top: 0.5vmin;
      left: -1.9vmin;
      transform: rotate(-30deg);
    }

    &::after {
      width: 3vmin;
      height: 1.2vmin;
      background: $dark-color;
      top: 1.4vmin;
      left: -2.2vmin;
      border-radius: 0 0 0 50%;
    }
  }

  &-7 {
    width: 2.5vmin;
    height: 1vmin;
    background: $bg-color;
    top: -38.9vmin;
    left: 33.5vmin;
    transform: rotate(10deg);
    border-radius: 50%;

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

    &::after {
      width: 1.2vmin;
      height: 0.9vmin;
      background: $dark-color;
      top: 3vmin;
      left: 2.45vmin;
      transform: skewY(-45deg);
      border-radius: 20% 0 0 0;
    }
  }

  &-8 {
    width: 0.85vmin;
    height: 2.3vmin;
    background: $dark-color;
    top: -29.8vmin;
    left: 35.1vmin;
    border-radius: 50%;

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

    &::after {
      width: 0.5vmin;
      height: 1vmin;
      background: $dark-color;
      top: -1.3vmin;
      left: 1.05vmin;
      transform: rotate(16deg);
    }
  }

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

              
            
!

JS

              
                // design source
// https://www.deviantart.com/passthebeard/art/Natural-Born-Stencil-77725661
// speed code video
// https://twitter.com/asyrafhussin4/status/1552519976304553985
              
            
!
999px

Console