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="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="teeth"></div>

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

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

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

CSS

              
                // colors
$bg-color: #000;
$skin-color: #fff;
$lips-color: #ed1c24;

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

.nose {
  &-1 {
    z-index: 2;
    width: 3vmin;
    height: 1.2vmin;
    background: $skin-color;
    top: -49.8vmin;
    left: 23.4vmin;
    transform: rotate(11deg);
    border-radius: 0 0 2vmin 2vmin;

    &::before {
      width: 6vmin;
      height: 3vmin;
      background: $skin-color;
      top: -1.8vmin;
      left: -4.9vmin;
      border-radius: 0 0 0 100%;
    }

    &::after {
      width: 4vmin;
      height: 5.1vmin;
      background: $skin-color;
      top: -4.8vmin;
      left: -5.35vmin;
      transform: rotate(-3deg) skewY(20deg);
      border-radius: 1.4vmin 0 0 2.4vmin;
    }
  }

  &-2 {
    z-index: 2;
    width: 5vmin;
    height: 1.2vmin;
    background: $bg-color;
    top: -51.9vmin;
    left: 24vmin;
    transform: rotate(14deg);
    border-radius: 50%;

    &::before {
      width: 5.5vmin;
      height: 5vmin;
      background: $bg-color;
      top: -4.4vmin;
      left: -2.5vmin;
      transform: rotate(28deg);
      border-radius: 0 0 30% 55%;
    }

    &::after {
      width: 4vmin;
      height: 7vmin;
      background: $skin-color;
      top: -8vmin;
      left: -8vmin;
      transform: rotate(47deg);
      border-radius: 50%;
    }
  }

  &-3 {
    z-index: 2;
    width: 4.8vmin;
    height: 8vmin;
    background: $skin-color;
    top: -73.9vmin;
    left: 21.5vmin;
    transform: rotate(45deg);
    border-radius: 0 90% 0 0;

    &::before {
      width: 4vmin;
      height: 4vmin;
      background: $skin-color;
      top: 7.3vmin;
      left: 1.1vmin;
      transform: rotate(-8deg);
    }

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

  &-4 {
    z-index: 2;
    width: 1.2vmin;
    height: 7vmin;
    background: $skin-color;
    top: -70.3vmin;
    left: 10.5vmin;
    transform: rotate(55deg);
    border-radius: 50%;

    &::before {
      width: 1vmin;
      height: 3vmin;
      background: $skin-color;
      top: -1vmin;
    }

    &::after {
      width: 2.3vmin;
      height: 11vmin;
      background: $bg-color;
      top: -5.4vmin;
      left: -2vmin;
      border-radius: 50%;
    }
  }

  &-5 {
    z-index: 2;
    width: 1.2vmin;
    height: 7vmin;
    background: $bg-color;
    top: -71.2vmin;
    left: 8vmin;
    transform: rotate(55deg);

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

  &-6 {
    z-index: 2;
    width: 3.1vmin;
    height: 1.85vmin;
    background: $bg-color;
    top: -69.2vmin;
    left: 14.3vmin;
    transform: rotate(-13deg);
    border-radius: 50%;

    &::before {
      width: 4vmin;
      height: 1vmin;
      background: $bg-color;
      top: 0.4vmin;
      left: -2.4vmin;
      transform: rotate(-15deg);
      border-radius: 90% 20% 0 0;
    }

    &::after {
      width: 2vmin;
      height: 0.7vmin;
      background: $bg-color;
      top: 0.9vmin;
      left: -0.9vmin;
      transform: rotate(10deg);
    }
  }

  &-7 {
    z-index: 2;
    width: 2vmin;
    height: 0.7vmin;
    background: $skin-color;
    top: -66.1vmin;
    left: 9.3vmin;
    transform: rotate(-25deg);
    border-radius: 50%;
  }
}

.teeth {
  z-index: 3;
  width: 7vmin;
  height: 4vmin;
  background: $skin-color;
  top: -33.7vmin;
  left: 15.6vmin;
  transform: rotate(-15deg);
  border-radius: 0 0 30% 0;
}

.lips {
  &-1 {
    z-index: 1;
    width: 5vmin;
    height: 6.5vmin;
    background: $lips-color;
    top: -44vmin;
    left: 25vmin;
    transform: rotate(26deg);
    border-radius: 0 68% 0 0;

    &::before {
      width: 0.7vmin;
      height: 12vmin;
      background: $lips-color;
      top: 6vmin;
      left: 3.4vmin;
      transform: rotate(9.4deg);
    }

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

  &-2 {
    z-index: 2;
    width: 2vmin;
    height: 6vmin;
    background: $bg-color;
    top: -35.5vmin;
    left: 23vmin;
    transform: rotate(36deg) skewY(0deg);
    border-radius: 0 70% 0 0;

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

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

  &-3 {
    z-index: 4;
    width: 3vmin;
    height: 2vmin;
    background: $lips-color;
    top: -40.8vmin;
    left: 19.5vmin;
    transform: rotate(-20deg);

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

    &::after {
      width: 2vmin;
      height: 8vmin;
      background: $lips-color;
      top: -1vmin;
      left: -3.6vmin;
      transform: rotate(60deg);
    }
  }

  &-4 {
    z-index: 1;
    width: 3vmin;
    height: 5vmin;
    background: $bg-color;
    top: -45.5vmin;
    left: 18.7vmin;
    transform: rotate(30deg);
    border-radius: 0 44% 0 0;
  }

  &-5 {
    z-index: 4;
    width: 4vmin;
    height: 12vmin;
    background: $bg-color;
    top: -38vmin;
    left: 12.4vmin;
    transform: rotate(37deg);
    border-radius: 0 25% 0 0;

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

    &::after {
      width: 2vmin;
      height: 3vmin;
      background: $bg-color;
      top: 10vmin;
      left: 2.15vmin;
      transform: rotate(-5deg);
    }
  }

  &-6 {
    z-index: 2;
    width: 1vmin;
    height: 3vmin;
    background: $lips-color;
    top: -27.7vmin;
    left: 9.6vmin;
    transform: rotate(30deg);

    &::before {
      width: 0.5vmin;
      height: 3vmin;
      background: $bg-color;
      top: 0.2vmin;
      left: 0.8vmin;
      transform: rotate(7deg);
      border-radius: 0 0 0 50%;
    }
  }

  &-7 {
    z-index: 4;
    width: 1vmin;
    height: 3vmin;
    background: $bg-color;
    top: -26vmin;
    left: 7.8vmin;
    transform: rotate(20deg);

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

    &::after {
      width: 1vmin;
      height: 3.5vmin;
      background: $bg-color;
      top: 1.6vmin;
      left: 3.6vmin;
      transform: rotate(8deg);
    }
  }

  &-8 {
    z-index: 2;
    width: 8.5vmin;
    height: 2vmin;
    background: $lips-color;
    top: -13vmin;
    left: 13vmin;
    transform: rotate(15deg);
    border-radius: 0 0 0 62%;

    &::before {
      width: 10vmin;
      height: 3vmin;
      background: $bg-color;
      top: -1.2vmin;
      left: -0.5vmin;
      border-radius: 50%;
    }
  }

  &-9 {
    z-index: 4;
    width: 5.3vmin;
    height: 5.5vmin;
    background: $lips-color;
    top: -16.8vmin;
    left: 18.8vmin;
    border-radius: 50%;

    &::before {
      width: 4.5vmin;
      height: 1.5vmin;
      background: $lips-color;
      top: 4.4vmin;
      left: 1.4vmin;
      transform: rotate(8deg);
      border-radius: 50%;
    }

    &::after {
      width: 1vmin;
      height: 1.5vmin;
      background: $lips-color;
      top: 5vmin;
      left: 3.7vmin;
      transform: rotate(10deg);
    }
  }

  &-10 {
    z-index: 4;
    width: 5.5vmin;
    height: 5.5vmin;
    background: $bg-color;
    top: -17vmin;
    left: 19.9vmin;
    border-radius: 50%;

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

    &::after {
      width: 4.5vmin;
      height: 1.2vmin;
      background: $bg-color;
      top: 4.7vmin;
      left: 1.8vmin;
      transform: rotate(7deg);
      border-radius: 50%;
    }
  }

  &-11 {
    z-index: 4;
    width: 9.5vmin;
    height: 6vmin;
    background: $lips-color;
    top: -3.95vmin;
    left: 30.75vmin;
    transform: rotate(5deg);
    border-radius: 0 75% 20% 0;

    &::before {
      width: 2vmin;
      height: 0.65vmin;
      background: $lips-color;
      top: 0.45vmin;
      left: -1vmin;
      transform: rotate(12deg);
      border-radius: 40% 0 0 0;
    }

    &::after {
      width: 2.65vmin;
      height: 1vmin;
      background: $lips-color;
      top: 5.15vmin;
      left: 6.8vmin;
      transform: rotate(-13deg) skewX(-15deg);
      border-radius: 0 0 45% 20%;
    }
  }

  &-12 {
    z-index: 4;
    width: 8vmin;
    height: 5vmin;
    background: $bg-color;
    top: -3.2vmin;
    left: 27vmin;
    transform: rotate(5deg);
    border-radius: 0 100% 0 0;

    &::before {
      width: 4vmin;
      height: 3.5vmin;
      background: $bg-color;
      top: 1.65vmin;
      left: 4.2vmin;
      transform: rotate(4deg);
      border-radius: 0 100% 0 0;
    }

    &::after {
      width: 12vmin;
      height: 2vmin;
      background: $bg-color;
      top: 3.5vmin;
      left: -5vmin;
    }
  }
}

.chin {
  &-1 {
    z-index: 3;
    width: 10vmin;
    height: 15vmin;
    background: $skin-color;
    top: 15vmin;
    left: 43vmin;
    transform: rotate(-30deg);
    border-radius: 35% 0 0 0;

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

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

  &-2 {
    z-index: 3;
    width: 5vmin;
    height: 3vmin;
    background: $bg-color;
    top: -0.8vmin;
    left: 43vmin;

    &::before {
      width: 4vmin;
      height: 7vmin;
      background: $bg-color;
      top: 12vmin;
      left: 1vmin;
    }
  }

  &-3 {
    z-index: 4;
    width: 14vmin;
    height: 10.4vmin;
    background: $skin-color;
    top: 31.8vmin;
    left: 30vmin;
    transform: rotate(-12deg);
    border-radius: 0 20% 66% 0;

    &::before {
      width: 0.9vmin;
      height: 2.3vmin;
      background: $skin-color;
      top: -0.05vmin;
      left: 12.95vmin;
      transform: rotate(-12deg);
      border-radius: 0 45% 30% 0;
    }
  }

  &-4 {
    z-index: 4;
    width: 14vmin;
    height: 7vmin;
    background: $bg-color;
    top: 37.6vmin;
    left: 23.8vmin;
    transform: rotate(-12deg) skewX(-5deg);
    border-radius: 0 0 60% 0;

    &::before {
      width: 4vmin;
      height: 8vmin;
      background: $bg-color;
      top: -3.2vmin;
      left: 10.5vmin;
      border-radius: 50%;
    }

    &::after {
      width: 3vmin;
      height: 8vmin;
      background: $bg-color;
      top: -5.2vmin;
      left: 11.2vmin;
      transform: rotate(-10deg);
      border-radius: 50%;
    }
  }

  &-5 {
    z-index: 4;
    width: 12vmin;
    height: 8vmin;
    background: $bg-color;
    top: 25vmin;
    left: 19.5vmin;
  }
}

.neck {
  &-1 {
    z-index: 4;
    width: 20vmin;
    height: 18vmin;
    background: $skin-color;
    top: 63.5vmin;
    left: -22.5vmin;
    transform: skewX(-33deg);
    border-radius: 3vmin 0 0 0;

    &::before {
      width: 20vmin;
      height: 18vmin;
      background: $bg-color;
      top: 0.1vmin;
      left: 3.4vmin;
      border-radius: 2vmin 0 0 0;
    }

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

  &-2 {
    z-index: 4;
    width: 5vmin;
    height: 1vmin;
    background: $bg-color;
    top: 44.8vmin;
    left: -18.7vmin;
    transform: rotate(8deg);

    &::before {
      width: 1vmin;
      height: 14vmin;
      background: $bg-color;
      top: 2vmin;
      left: -3.7vmin;
      transform: rotate(23deg);
      border-radius: 50%;
    }

    &::after {
      width: 2.5vmin;
      height: 7vmin;
      background: $bg-color;
      top: 17vmin;
      left: -9.1vmin;
      transform: rotate(50deg);
    }
  }

  &-3 {
    z-index: 4;
    width: 2.85vmin;
    height: 5vmin;
    background: $skin-color;
    top: 79.5vmin;
    left: -49.6vmin;
    transform: rotate(34deg) skewY(-20deg);
    border-radius: 0 0 100% 0;

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

    &::after {
      width: 1vmin;
      height: 4.4vmin;
      background: $skin-color;
      top: -0.8vmin;
      left: 1.75vmin;
      transform: rotate(10deg);
      border-radius: 50%;
    }
  }
}

              
            
!

JS

              
                // design source
// https://www.malikafavre.com/nyt
              
            
!
999px

Console