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="head-1"></div>
<div class="head-2"></div>
<div class="head-3"></div>
<div class="head-4"></div>
<div class="head-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-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="nose-1"></div>
<div class="nose-2"></div>
<div class="nose-3"></div>

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

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

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

<div class="neck-1"></div>
<div class="neck-2"></div>
<div class="neck-3"></div>
<div class="neck-4"></div>
<div class="neck-5"></div>
<div class="neck-6"></div>
<div class="neck-7"></div>
<div class="neck-8"></div>
<div class="neck-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;
    }
  }
}

.head {
  &-1 {
    width: 30vmin;
    height: 16vmin;
    background: $dark-color;
    top: -50vmin;
    left: -4vmin;
    border-radius: 42% 58% 50% 50% / 100% 100% 0 0;

    &::before {
      width: 10vmin;
      height: 5.2vmin;
      background: $bg-color;
      top: 3.8vmin;
      left: 14.4vmin;
      transform: rotate(-18deg) skewY(5deg);
      border-radius: 0 6vmin 0 0;
    }

    &::after {
      width: 20vmin;
      height: 12.2vmin;
      background: $bg-color;
      top: 3.8vmin;
      left: 1.8vmin;
      border-radius: 7vmin 8vmin 0 0;
    }
  }

  &-2 {
    width: 5vmin;
    height: 2vmin;
    background: $bg-color;
    top: -56.25vmin;
    transform: rotate(-2deg);

    &::before {
      width: 16vmin;
      height: 18vmin;
      background: $bg-color;
      top: 3vmin;
      left: -13.5vmin;
      transform: rotate(-74deg);
      border-radius: 10vmin 3vmin 0 0;
    }

    &::after {
      width: 5vmin;
      height: 8vmin;
      background: $bg-color;
      top: 7.2vmin;
      left: -14.4vmin;
      transform: rotate(15deg);
    }
  }

  &-3 {
    width: 4vmin;
    height: 2.8vmin;
    background: $dark-color;
    top: -46.5vmin;
    left: 10.4vmin;
    transform: rotate(-10deg);
    border-radius: 2vmin 0 0 2.5vmin;

    &::before {
      width: 10vmin;
      height: 8vmin;
      background: $bg-color;
      top: 0.3vmin;
      left: -9vmin;
      transform: rotate(18deg);
      border-radius: 0 2vmin 0 0;
    }

    &::after {
      width: 8vmin;
      height: 8vmin;
      background: $dark-color;
      top: 3vmin;
      left: 0.6vmin;
      transform: rotate(18deg);
      border-radius: 0 4vmin 2vmin 1.4vmin;
    }
  }

  &-4 {
    width: 5.5vmin;
    height: 5.5vmin;
    background: $bg-color;
    top: -33vmin;
    left: 29vmin;
    transform: rotate(-38deg);
    border-radius: 4vmin 0 0 0;

    &::before {
      width: 8vmin;
      height: 10vmin;
      background: $dark-color;
      top: -0.8vmin;
      left: -9.3vmin;
      transform: rotate(28.5deg);
    }

    &::after {
      width: 1.5vmin;
      height: 2.1vmin;
      background: $bg-color;
      top: -2.2vmin;
      left: -7.3vmin;
      transform: rotate(28.5deg);
      border-radius: 0 1vmin 1vmin 0;
    }
  }

  &-5 {
    width: 2vmin;
    height: 2.5vmin;
    background: $bg-color;
    top: -13vmin;
    left: 27.1vmin;
    border-radius: 1.2vmin 0 0 0;

    &::before {
      width: 9vmin;
      height: 0.6vmin;
      background: $bg-color;
      top: 1.35vmin;
      left: -10.5vmin;
      transform: skewX(20deg);
    }

    &::after {
      width: 0;
      height: 0;
      border-bottom: 3vmin solid $dark-color;
      border-left: 0.8vmin solid transparent;
      border-right: 1.1vmin solid transparent;
      top: -0.6vmin;
      left: -9vmin;
      transform: rotate(-115deg) skewX(-10deg);
    }
  }
}

.eye-right {
  &-1 {
    width: 7.8vmin;
    height: 2.9vmin;
    background: $dark-color;
    top: -20.6vmin;
    left: 2.7vmin;
    transform: rotate(-17deg);
    border-radius: 0 0.2vmin 0 0;

    &::before {
      width: 1.6vmin;
      height: 1.8vmin;
      background: $bg-color;
      top: 2.9vmin;
      left: 6.5vmin;
      transform: skewX(20deg) rotate(-3deg);
      border-radius: 0 0 1.5vmin 0;
    }

    &::after {
      width: 3.2vmin;
      height: 1.8vmin;
      background: $dark-color;
      top: 2.6vmin;
      left: 5.2vmin;
      transform: skewX(20deg) rotate(-10deg);
      border-radius: 0 100% 70% 30% / 0 0 100% 100%;
    }
  }

  &-2 {
    width: 3vmin;
    height: 2.5vmin;
    background: $dark-color;
    top: -19.2vmin;
    left: 2.9vmin;
    transform: rotate(-45deg);

    &::before {
      width: 0.4vmin;
      height: 3vmin;
      background: $dark-color;
      top: 0.4vmin;
      left: -0.35vmin;
      transform: rotate(-30deg) skewY(-10deg);
    }

    &::after {
      width: 2vmin;
      height: 5vmin;
      background: $dark-color;
      top: -4.7vmin;
      left: -0.5vmin;
      transform: rotate(35deg) skewX(10deg);
    }
  }

  &-3 {
    width: 4vmin;
    height: 3vmin;
    background: $bg-color;
    top: -25.95vmin;
    transform: rotate(-18deg);
    border-radius: 0 0 0 1vmin;

    &::before {
      width: 2vmin;
      height: 4.8vmin;
      background: $bg-color;
      top: -0.5vmin;
      left: -2.8vmin;
      transform: rotate(8deg) skewX(-5deg);
      border-radius: 0 0.6vmin 0.2vmin 0;
    }

    &::after {
      width: 2vmin;
      height: 2vmin;
      background: $bg-color;
      top: 4vmin;
      left: -3.2vmin;
      transform: rotate(-12deg) skewX(-10deg);
    }
  }

  &-4 {
    width: 2vmin;
    height: 1.1vmin;
    background: $bg-color;
    top: -15.6vmin;
    left: -5vmin;
    transform: rotate(-25deg) skewX(10deg);

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

.eye-left {
  &-1 {
    z-index: 3;
    width: 4.8vmin;
    height: 5.5vmin;
    background: $dark-color;
    top: -21vmin;
    left: -12vmin;
    transform: skewX(10deg);
    border-radius: 0 0.6vmin 60% 0;

    &::before {
      width: 10vmin;
      height: 4vmin;
      background: $bg-color;
      top: -1vmin;
      left: -5.2vmin;
      transform: skewX(15deg) skewY(-6deg);
      border-radius: 0 0 3vmin 0;
    }

    &::after {
      width: 3.7vmin;
      height: 3.4vmin;
      background: $dark-color;
      top: 3.2vmin;
      left: 0.6vmin;
      transform: rotate(10deg) skewX(3deg) skewY(0deg);
      border-radius: 1vmin 0 3vmin 0;
    }
  }

  &-2 {
    z-index: 3;
    width: 2vmin;
    height: 1vmin;
    background: $bg-color;
    top: -13.3vmin;
    left: -12.8vmin;
    transform: skewX(24deg) skewY(15deg) rotate(20deg);

    &::before {
      width: 1.8vmin;
      height: 3.3vmin;
      background: $dark-color;
      top: -0.65vmin;
      left: -2.1vmin;
      transform: rotate(5deg) skewX(-18deg);
      border-radius: 100% 0 35% 1vmin;
    }

    &::after {
      width: 4vmin;
      height: 0.75vmin;
      background: $dark-color;
      top: 3vmin;
      left: -5.3vmin;
      transform: rotate(-43deg) skewX(-24deg) skewY(-15deg);
      border-radius: 100% 0 0 0;
    }
  }

  &-3 {
    width: 3.8vmin;
    height: 2vmin;
    background: $dark-color;
    top: -19.5vmin;
    left: -20vmin;
    transform: skewX(10deg) skewY(-5deg);

    &::before {
      width: 2vmin;
      height: 1vmin;
      background: $dark-color;
      top: 0.4vmin;
      left: -1.6vmin;
      transform: skewX(20deg) skewY(-10deg);
    }

    &::after {
      width: 2vmin;
      height: 1vmin;
      background: $bg-color;
      top: 0.1vmin;
      left: -2.1vmin;
      transform: skewX(20deg) skewY(-22deg);
    }
  }

  &-4 {
    width: 0.8vmin;
    height: 5.4vmin;
    background: $dark-color;
    top: -15.2vmin;
    left: -25vmin;
    transform: rotate(43deg) skewY(-30deg);

    &::before {
      width: 0.5vmin;
      height: 2.4vmin;
      background: $dark-color;
      top: 0.4vmin;
      left: 0.4vmin;
      transform: rotate(12deg) skewY(-50deg);
    }

    &::after {
      width: 1vmin;
      height: 5vmin;
      background: $dark-color;
      top: 1.2vmin;
      left: -0.9vmin;
      transform: rotate(-26deg) skewY(-60deg);
      border-radius: 0 100% 0 0;
    }
  }

  &-5 {
    width: 0.7vmin;
    height: 2vmin;
    background: $bg-color;
    top: -16.2vmin;
    left: -27.4vmin;
    transform: rotate(-8deg) skewY(-38deg);

    &::before {
      width: 1vmin;
      height: 1vmin;
      background: $bg-color;
      top: -0.6vmin;
      left: -0.5vmin;
      transform: skewY(38deg);
    }
  }
}

.nose {
  &-1 {
    z-index: 1;
    width: 2.5vmin;
    height: 7vmin;
    background: $dark-color;
    top: -9.9vmin;
    left: 0.8vmin;
    transform: rotate(-5deg) skewY(-20deg);

    &::before {
      width: 2.5vmin;
      height: 5vmin;
      background: $bg-color;
      top: 1.45vmin;
      left: 1.45vmin;
      transform: skewY(35deg);
      border-radius: 1.6vmin 0 0 3vmin;
    }

    &::after {
      width: 1vmin;
      height: 3vmin;
      background: $dark-color;
      top: 6vmin;
      left: 2.4vmin;
      transform: rotate(-29deg);
    }
  }

  &-2 {
    z-index: 4;
    width: 7.2vmin;
    height: 6.5vmin;
    background: $dark-color;
    top: 5.5vmin;
    left: 6vmin;
    transform: rotate(20deg);
    border-radius: 3vmin 0 0 0;

    &::before {
      width: 3.8vmin;
      height: 9vmin;
      background: $bg-color;
      top: -6vmin;
      left: 1.7vmin;
      transform: rotate(-60deg) skewY(-25deg);
      border-radius: 25vmin 0 0 0;
    }

    &::after {
      width: 2vmin;
      height: 2.2vmin;
      background: $bg-color;
      top: -0.1vmin;
      transform: rotate(20deg);
      border-radius: 0 1vmin 0.8vmin 0;
    }
  }

  &-3 {
    z-index: 2;
    width: 0;
    height: 0;
    border-bottom: 2.6vmin solid $dark-color;
    border-left: 2.9vmin solid transparent;
    border-right: 2.8vmin solid transparent;
    top: 5.4vmin;
    left: -3vmin;
    transform: rotate(-68deg) skewY(-10deg) skewX(5deg);

    &::before {
      width: 3.3vmin;
      height: 4vmin;
      background: $dark-color;
      top: -3.4vmin;
      left: -2vmin;
      transform: rotate(44deg);
      border-radius: 0 0 0 1vmin;
    }

    &::after {
      width: 5vmin;
      height: 4vmin;
      background: $bg-color;
      top: -4vmin;
      left: -1.1vmin;
      transform: rotate(65deg);
      border-radius: 0 0 1.3vmin 1vmin;
    }
  }
}

.mouth {
  &-1 {
    width: 6vmin;
    height: 2.5vmin;
    background: $dark-color;
    top: 16.2vmin;
    left: 2.8vmin;
    transform: rotate(-8deg) skewX(4deg);

    &::before {
      width: 2vmin;
      height: 1.3vmin;
      background: $dark-color;
      top: 1.2vmin;
      left: -1.2vmin;
      transform: skewY(-5deg);
    }

    &::after {
      width: 4.2vmin;
      height: 1.5vmin;
      background: $dark-color;
      top: 1.2vmin;
      left: -4.5vmin;
      transform: skewY(-8deg) skewX(-30deg);
      border-radius: 10vmin 10vmin 0 0;
    }
  }

  &-2 {
    z-index: 2;
    width: 4.5vmin;
    height: 2vmin;
    background: $dark-color;
    top: 17vmin;
    left: 4.8vmin;

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

    &::after {
      width: 1.6vmin;
      height: 4.2vmin;
      background: $dark-color;
      top: 2.4vmin;
      left: 1.4vmin;
      transform: skewX(-2deg) skewY(-20deg);
      border-radius: 12vmin 0 0 0;
    }
  }

  &-3 {
    z-index: 3;
    width: 6vmin;
    height: 2.5vmin;
    background: $dark-color;
    top: 27vmin;
    left: 1.4vmin;
    transform: skewX(45deg) skewY(-8deg);
    border-radius: 0 0 0 100%;

    &::before {
      width: 7.2vmin;
      height: 6vmin;
      background: $dark-color;
      top: -1.8vmin;
      left: 9.7vmin;
      transform: rotate(-0.5deg) skewX(-70deg) skewY(8deg);
      border-radius: 0 12vmin 0 5vmin;
    }
  }
}

.ear-right {
  &-1 {
    z-index: 2;
    width: 3vmin;
    height: 8.5vmin;
    background: $dark-color;
    top: -11.8vmin;
    left: 31.5vmin;
    transform: skewX(2deg) skewY(-30deg);
    border-radius: 0 40% 40% 0;

    &::before {
      width: 1.8vmin;
      height: 3vmin;
      background: $dark-color;
      top: 7.8vmin;
      transform: skewY(-20deg);
      border-radius: 0 50% 20% 0;
    }

    &::after {
      width: 1vmin;
      height: 1.8vmin;
      background: $bg-color;
      top: 8.2vmin;
      left: 1.4vmin;
      transform: skewY(20deg);
      border-radius: 50% 0 0 50%;
    }
  }

  &-2 {
    z-index: 2;
    width: 1.35vmin;
    height: 1.4vmin;
    background: $dark-color;
    top: -1vmin;
    left: 31.4vmin;
    border-radius: 0 3vmin 3vmin 0;

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

.cheek {
  &-1 {
    z-index: 3;
    width: 7vmin;
    height: 10vmin;
    background: $dark-color;
    top: -2vmin;
    left: 18.5vmin;
    transform: skewX(2deg);

    &::before {
      width: 7vmin;
      height: 9.7vmin;
      background: $bg-color;
      top: -0.2vmin;
      left: -3.6vmin;
      transform: skewX(-27deg);
      border-radius: 0 0.6vmin 0 100%;
    }

    &::after {
      width: 1vmin;
      height: 4vmin;
      background: $dark-color;
      top: -0.45vmin;
      left: 6.16vmin;
      transform: rotate(3deg);
      border-radius: 0 60% 70% 0;
    }
  }

  &-2 {
    z-index: 3;
    width: 9vmin;
    height: 11vmin;
    background: $dark-color;
    top: 18vmin;
    left: 17.45vmin;
    transform: skewX(4deg);
    border-radius: 0 0 75% 0;

    &::before {
      width: 2vmin;
      height: 12vmin;
      background: $dark-color;
      top: -4vmin;
      left: -17.2vmin;
      transform: rotate(-14deg) skewY(-10deg);
    }

    &::after {
      width: 2vmin;
      height: 12vmin;
      background: $bg-color;
      top: -4.8vmin;
      left: -16.2vmin;
      transform: rotate(-20deg) skewY(-15deg) skewX(1.8deg);
    }
  }

  &-3 {
    width: 2vmin;
    height: 6.2vmin;
    background: $dark-color;
    top: 27.5vmin;
    left: -18.5vmin;
    transform: rotate(-23deg) skewX(1.8deg);
    border-radius: 0 0 2vmin 2vmin;
  }
}

.neck {
  &-1 {
    z-index: 2;
    width: 11.8vmin;
    height: 10vmin;
    background: $dark-color;
    top: 28.6vmin;
    left: 18.8vmin;
    transform: skewX(3deg);
    border-radius: 100% 0 0 0;

    &::before {
      width: 2vmin;
      height: 2vmin;
      background: $dark-color;
      top: 4.4vmin;
      left: 1vmin;
      transform: skewX(-12deg);
    }

    &::after {
      width: 6vmin;
      height: 7.2vmin;
      background: $bg-color;
      left: 4.8vmin;
      transform: skewX(-15deg);
      border-radius: 0 0 85% 0;
    }
  }

  &-2 {
    z-index: 3;
    width: 2vmin;
    height: 3vmin;
    background: $dark-color;
    top: 32vmin;
    left: 15vmin;
    transform: skewX(-30deg);

    &::before {
      width: 1.4vmin;
      height: 3.6vmin;
      background: $dark-color;
      top: -1.7vmin;
      left: -14.6vmin;
      transform: skew(30deg) rotate(-22deg);
      border-radius: 0 2.5vmin 2.5vmin 0;
    }

    &::after {
      width: 11vmin;
      height: 6.2vmin;
      background: $dark-color;
      top: 1vmin;
      left: -10.2vmin;
      transform: rotate(-5deg) skewX(40deg);
    }
  }

  &-3 {
    z-index: 3;
    width: 4.2vmin;
    height: 4.2vmin;
    background: $bg-color;
    top: 34.4vmin;
    left: -7.6vmin;
    transform: rotate(-4deg);
    border-radius: 1.2vmin 0 0 4vmin;

    &::before {
      width: 2vmin;
      height: 4vmin;
      background: $bg-color;
      left: 3.6vmin;
      transform: skewX(10deg) skewY(-10deg);
    }

    &::after {
      width: 5.3vmin;
      height: 3.5vmin;
      background: $bg-color;
      top: 0.5vmin;
      left: 5vmin;
      transform: skewX(-10deg);
      border-radius: 0 0 4vmin 0;
    }
  }

  &-4 {
    z-index: 3;
    width: 23vmin;
    height: 16.5vmin;
    background: $dark-color;
    top: 55vmin;
    left: 13vmin;

    &::before {
      width: 3vmin;
      height: 4vmin;
      background: $dark-color;
      top: -0.9vmin;
      left: 20.8vmin;
      transform: rotate(18deg) skewY(10deg);
      border-radius: 0 2vmin 0 0;
    }

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

  &-5 {
    z-index: 3;
    width: 18vmin;
    height: 10vmin;
    background: $bg-color;
    top: 70vmin;
    left: 30vmin;
    transform: rotate(-45deg) skewY(-1deg);

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

    &::after {
      width: 8.5vmin;
      height: 6vmin;
      background: $bg-color;
      top: -7.8vmin;
      left: -3.5vmin;
      transform: rotate(75deg);
    }
  }

  &-6 {
    z-index: 3;
    width: 2vmin;
    height: 2vmin;
    background: $bg-color;
    top: 70.5vmin;
    left: 12.8vmin;
    transform: rotate(-30deg);

    &::before {
      width: 9.4vmin;
      height: 3vmin;
      background: $dark-color;
      top: -5vmin;
      left: -4vmin;
      transform: rotate(62deg);
      border-radius: 0 0 50% 50%;
    }

    &::after {
      width: 8.5vmin;
      height: 12.5vmin;
      background: $bg-color;
      top: -14.3vmin;
      left: -9vmin;
      transform: rotate(20deg) skewY(20deg);
      border-radius: 0 10vmin 0 0;
    }
  }

  &-7 {
    z-index: 2;
    width: 15vmin;
    height: 2.1vmin;
    background: $dark-color;
    top: 43.8vmin;
    left: -11.8vmin;
    transform: rotate(40deg) skewY(12deg);
    border-radius: 70% 0 0 0;

    &::before {
      width: 0.6vmin;
      height: 12vmin;
      background: $bg-color;
      top: -5.6vmin;
      left: 3vmin;
      transform: rotate(-100deg);
    }

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

  &-8 {
    z-index: 3;
    width: 1.3vmin;
    height: 3vmin;
    background: $dark-color;
    top: 35vmin;
    left: -21.4vmin;
    transform: skewX(8deg) skewY(45deg);

    &::before {
      width: 1.3vmin;
      height: 14.7vmin;
      background: $dark-color;
      top: 3vmin;
      border-radius: 0 0 100% 0;
    }

    &::after {
      width: 1vmin;
      height: 16vmin;
      background: $bg-color;
      top: 3.2vmin;
      left: 0.35vmin;
      transform: rotate(-7deg) skewX(-8deg) skewY(-65deg);
      border-radius: 100% 0 0 0;
    }
  }

  &-9 {
    z-index: 3;
    width: 1vmin;
    height: 10vmin;
    background: $dark-color;
    top: 56.8vmin;
    left: -21.3vmin;
    transform: rotate(-12deg);
    border-radius: 100% 0 0 60%;

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

    &::after {
      width: 1vmin;
      height: 8vmin;
      background: $dark-color;
      top: 1.6vmin;
      left: 0.55vmin;
      transform: rotate(5deg);
      border-radius: 0 0 0 50%;
    }
  }
}

              
            
!

JS

              
                // design inspired from
// https://www.wooducreations.com/product-page/dwayne-johnson
              
            
!
999px

Console