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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

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

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 Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

HTML

              
                .box
  .head
    .ear-left
      .inner-ear
    .ear-right
      .inner-ear
    .face
      .top-hair-middle-left
      .top-hair-middle-right
      .top-hair-left
      .top-hair-right
      .left-beard
      .right-beard
      .bottom-bottom-beard
      .bottom-top-beard
        .mouth
          .grit-long
          .grit-short
      .nose
        .nose-base
        .nose-top
      .eyes-left
        .puple-left
      .right-eye-scar
      .wrinkle
      .eyes-right
        .puple-right 
    .hair
      .lock-1
      .lock-2
      .lock-3
      .lock-4
      .lock-5
      .fill
      .fill-2
  .tshirt
    .bottom-pants
      .belt
      .belt-buckle
      .belt-lock
      .belt-strap-left
      .belt-strap-right
  .tshit-skin
  .pants
    .leg-spread
    .zipper
  .shoe-left
    .back-shoe-left
    .shoe-front-left
  .shoe-right
    .back-shoe-right
    .shoe-front-right
  .back-arm-left
  .back-arm-right
  .front-arm-left
    .fingers-bottom
    .fingers-top
    .arm-hair-1
    .arm-hair-2
    .arm-hair-3
    .arm-hair-4
    .claws-left
      .claw-1
      .claw-2
      .claw-3
  .front-arm-right
    .fingers-bottom-right
    .fingers-top-right
    .arm-hair-1-right
    .arm-hair-2-right
    .arm-hair-3-right
    .arm-hair-4-right
    .claws-right
      .claw-1-right
      .claw-2-right
      .claw-3-right
              
            
!

CSS

              
                // values
$brown-hair: #714630;
$brown-belt: #9E5F35;
$brown-show-light: #B97849;
$yellow: #E8A851;
$pants: #443D3A;
$pants-shadow: #4B4746;
$tshirt: #DFDFDF;
$skin-light: #FFBA8C;
$skin-dark: #EE9C7A;
$skin-hair: #EE9C7A;
$claws: #DFDFDF;
$face-shading: #EE8D78;
$scar: #F4A582;
$teeth: #DFDFDF;
$teeth-grit: #C1C1C1;
$stand: #ECECEC;
$blood: #EC6B51;
$circle: 50%;

* {
  box-sizing: border-box;
}

.box {
  position: relative;
  width: 600px;
  height: 600px;
  background: none;
  display: block;
  margin: auto;
  margin-top: 25%;
  transform: scale(.8);
}

.ear-left {
  position: absolute;
  top: 8%;
  left: 31%;
  width: 8%;
  height: 8%;
  background: $skin-light;
  border-radius: $circle;
  z-index: 3;
}

.ear-right {
  position: absolute;
  top: 8%;
  right: 31%;
  width: 8%;
  height: 8%;
  background: $skin-light;
  border-radius: $circle;
  z-index: 3;
}

.inner-ear {
  position: absolute;
  left: 22.5%;
  top: 22.5%;
  width: 55%;
  height: 55%;
  background: $face-shading;
  border-radius: $circle;
}

.face {
  position: absolute;
  left: 35%;
  width: 30%;
  height: 28%;
  background: $skin-light;
  border-radius: 10px;
  overflow: hidden;
  z-index: 3;
}

.top-hair-middle-left {
  position: absolute;
  top: -8%;
  left: 0;
  width: 52%;
  height: 20%;
  background: $brown-hair;
  transform: rotate(10deg);
}

.top-hair-middle-right {
  position: absolute;
  top: -8%;
  right: 0;
  width: 52%;
  height: 20%;
  background: $brown-hair;
  transform: rotate(-10deg);
}

.top-hair-left {
  position: absolute;
  top: 0;
  left: -12%;
  width: 20%;
  height: 30%;
  background: $brown-hair;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.top-hair-right {
  position: absolute;
  top: 0;
  right: -12%;
  width: 20%;
  height: 30%;
  background: $brown-hair;
  border-bottom-left-radius: 50px;
  border-bottom-right-radius: 50px;
}

.left-beard {
  position: absolute;
  bottom: 0;
  left: -6%;
  width: 20%;
  height: 50%;
  background: $brown-hair;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}

.right-beard {
  position: absolute;
  bottom: 0;
  right: -6%;
  width: 20%;
  height: 50%;
  background: $brown-hair;
  border-top-left-radius: 50px;
  border-top-right-radius: 50px;
}

.bottom-bottom-beard {
  position: absolute;
  bottom: 0;
  width: 100%;
  height: 30%;
  background: $brown-hair;
}

.bottom-top-beard {
  position: absolute;
  left: 25%;
  bottom: 7%;
  width: 50%;
  height: 40%;
  background: $brown-hair;
  -webkit-clip-path: ellipse(50% 40% at 50% 50%);
clip-path: ellipse(50% 40% at 50% 50%);
}

.mouth {
  position: absolute;
  top: 35%;
  left: 20%;
  width:60%;
  height: 30%;
  background: $teeth;
  border-radius: 50px;
}

.grit-long {
  position: absolute;
  top: 44%;
  left: 10%;
  width: 60%;
  height: 12%;
  background: $teeth-grit;
}

.grit-short {
  position: absolute;
  top: 44%;
  right: 10%;
  width: 5%;
  height: 12%;
  background: $teeth-grit;
}

.nose {
  position: absolute;
  left: 40%;
  bottom: 30%;
  width: 20%;
  height: 30%;
}

.nose-base {
  position: absolute;
  bottom: 18%;
  width: 100%;
  height: 25%;
  background: #F4A482;
  border-radius: 50px;
}

.nose-top {
  position: absolute;
  bottom: 0;
  left: 30%;
  height: 80%;
  width: 40%;
  background: #EE8E78;
  border-radius: 50px;
}

.eyes-left {
  position: absolute;
  top: 30%;
  left: 20%;
  width: 25%;
  height: 15%;
  border-top: 8px solid $brown-hair;
  overflow: hidden;
  transform: rotate(15deg);
}

.puple-left {
  position: absolute;
  width: 21%;
  top: -12%;
  right: 35%;
  height: 50%;
  background: $pants;
  border-radius: $circle;
  transform: scale(1.2);
}

.eyes-right {
  position: absolute;
  top: 30%;
  right: 20%;
  width: 25%;
  height: 15%;
  border-top: 8px solid $brown-hair;
  overflow: hidden;
  transform: rotate(-15deg);
}

.puple-right {
  position: absolute;
  width: 21%;
  top: -12%;
  left: 35%;
  height: 50%;
  background: $pants;
  border-radius: $circle;
  transform: scale(1.2);
}

.right-eye-scar {
  position: absolute;
  top: 17%;
  right: 31%;
  height: 35%;
  width: 5%;
  background: $scar;
  border-radius: 50px;
  opacity: .6;
}

.wrinkle {
  position: absolute;
  top: 31%;
  left: 49%;
  height: 7%;
  width: 2%;
  background: $scar;
  border-radius: 50px;
  opacity: .6;
}

.hair {
  position: absolute;
  top: -13%;
  left: 35%;
  width: 30%;
  height: 15%;
  z-index: 4;
}

.lock-1 {
  position: absolute;
  right: -6%;
  top: 15%;
  width: 35%;
  height: 90%;
  background: $brown-hair;
  transform: rotate(-15deg);
  -webkit-clip-path: ellipse(33% 50% at 50% 50%);
clip-path: ellipse(33% 50% at 50% 50%);
}

.lock-2 {
  position: absolute;
  right: 15%;
  top: 5%;
  width: 30%;
  height: 100%;
  background: $brown-hair;
  transform: rotate(-20deg);
  -webkit-clip-path: ellipse(33% 50% at 50% 50%);
clip-path: ellipse(33% 50% at 50% 50%);
}

.lock-3 {
  position: absolute;
  right: 35%;
  top: 5%;
  width: 30%;
  height: 100%;
  background: $brown-hair;
  transform: rotate(-40deg);
  -webkit-clip-path: ellipse(33% 50% at 50% 50%);
clip-path: ellipse(33% 50% at 50% 50%);
}

.lock-4 {
  position: absolute;
  left: 13%;
  top: 2%;
  width: 30%;
  height: 100%;
  background: $brown-hair;
  transform: rotate(-70deg);
  -webkit-clip-path: ellipse(33% 50% at 50% 50%);
clip-path: ellipse(33% 50% at 50% 50%);
}

.lock-5 {
  position: absolute;
  left: -5%;
  top: 25%;
  width: 30%;
  height: 100%;
  background: $brown-hair;
  transform: rotate(-70deg);
  -webkit-clip-path: ellipse(33% 50% at 50% 50%);
clip-path: ellipse(33% 50% at 50% 50%);
}

.fill {
  position: absolute;
  left: 25%;
  bottom: 10%;
  width: 30%;
  height: 35%;
  background: $brown-hair;
}

.fill-2 {
  position: absolute;
  left: 0%;
  bottom: 0%;
  width: 100%;
  height: 35%;
  background: $brown-hair;
}

.tshirt {
  position: absolute;
  top: 12%;
  left: 27.5%;
  width: 45%;
  height: 50%;
  background: $tshirt;
  border-radius: 10px;
  z-index: 2;
}

.tshit-skin {
  position: absolute;
  top: 10%;
  left: 33.5%;
  width: 33%;
  height: 21%;
  background: $skin-dark;
  border-radius: 40px;
  overflow: hidden;
  z-index: 2;
}

.bottom-pants {
  position: absolute;
  bottom: -1%;
  width: 100%;
  height: 20%;
  background: $pants;
}

.belt {
  position: absolute;
  bottom: 25%;
  width: 100%;
  height: 50%;
  background: $brown-belt;
}

.belt-strap-left {
  position: absolute;
  bottom: 0;
  left: 10%;
  height: 100%;
  width: 10%;
  background: $pants;
}

.belt-strap-right {
  position: absolute;
  bottom: 0;
  right: 10%;
  height: 100%;
  width: 10%;
  background: $pants;
}

.belt-buckle {
  position: absolute;
  top: 11%;
  left: 37.5%;
  width: 25%;
  height: 78%;
  border: 8px solid $yellow;
  border-radius: 10px;
}

.belt-lock {
  position: absolute;
  top: 42%;
  left: 34.5%;
  width: 10%;
  height: 15%;
  background: $yellow;
  border-radius: 10px;
}

.pants {
  position: absolute;
  bottom: -4.5%;
  left: 5%;
  width: 90%;
  height: 50%;
  overflow: hidden;
}

.leg-spread {
  position: absolute;
  width: 100%;
  height: 200%;
  border: 100px solid $pants;
  border-radius: $circle;
}

.zipper {
  position: absolute;
  left: 47.5%;
  top: 7%;
  width: 5%;
  height: 20%;
  background: $pants-shadow;
  border-radius: 50px;
}

.shoe-left {
  position: absolute;
  bottom: -14%;
  left: -3.3%;
  width: 25%;
  height: 10%;
  overflow: hidden;
}

.shoe-right {
  position: absolute;
  bottom: -14%;
  right: -3.3%;
  width: 25%;
  height: 10%;
  overflow: hidden;
}

.back-shoe-left {
  position: absolute;
  right: 0;
  width: 66%;
  height: 100%;
  background: #9E5F35;
}

.back-shoe-right {
  position: absolute;
  left: 0;
  width: 66%;
  height: 100%;
  background: #9E5F35;
}

.shoe-front-left {
  position: absolute;
  left: -1%;
  top: -7%;
  width: 80%;
  height: 210%;
  background: $brown-show-light;
  -webkit-clip-path: circle(47.5% at 50% 50%);
clip-path: circle(47.5% at 50% 50%);
}

.shoe-front-right {
  position: absolute;
  right: -1%;
  top: -7%;
  width: 80%;
  height: 210%;
  background: $brown-show-light;
  -webkit-clip-path: circle(47.5% at 50% 50%);
clip-path: circle(47.5% at 50% 50%);
}

.back-arm-left {
  position: absolute;
  top: 11.5%;
  left: 14%;
  width: 17%;
  height: 40%;
  background: $skin-dark;
  border-radius: 50px;
  transform: rotate(25deg);
}

.back-arm-right {
  position: absolute;
  top: 11.5%;
  right: 14%;
  width: 17%;
  height: 40%;
  background: $skin-dark;
  border-radius: 50px;
  transform: rotate(-25deg);
}

.front-arm-left {
  position: absolute;
  top: 9%;
  left: 4%;
  width: 17%;
  height: 45%;
  background: $skin-light;
  border-radius: 50px;
  transform: rotate(-20deg);
  animation: arm-lift 1s 1;
}

.arm-hair-1 {
  position: absolute;
  top: 40%;
  left: -8%;
  width: 70%;
  height: 3%;
  background: $skin-hair;
  border-radius: 50px;
  transform: rotate(20deg);
}

.arm-hair-2 {
  position: absolute;
  top: 50%;
  left: -8%;
  width: 70%;
  height: 3%;
  background: $skin-hair;
  border-radius: 50px;
  transform: rotate(20deg);
}

.arm-hair-3 {
  position: absolute;
  top: 60%;
  left: -8%;
  width: 70%;
  height: 3%;
  background: $skin-hair;
  border-radius: 50px;
  transform: rotate(20deg);
}

.arm-hair-4 {
  position: absolute;
  top: 70%;
  left: -8%;
  width: 70%;
  height: 3%;
  background: $skin-hair;
  border-radius: 50px;
  transform: rotate(20deg);
}

.fingers-bottom {
  position: absolute;
  top: 5%;
  right: -15%;
  width: 18%;
  height: 20%;
  background: $skin-hair;
  border-radius: 50px;
  border-bottom-left-radius: 0;
}

.fingers-top {
  position: absolute;
  top: -3%;
  left: 12%;
  width: 105%;
  height: 20%;
  background: $skin-light;
  border-radius: 50px;
  border-bottom-left-radius: 0;
  transform: rotate(20deg);
}

.front-arm-right {
  position: absolute;
  top: 9%;
  right: 4%;
  width: 17%;
  height: 45%;
  background: $skin-light;
  border-radius: 50px;
  transform: rotate(20deg);
  animation: arm-lift 1s 1;
}

.arm-hair-1-right{
  position: absolute;
  top: 40%;
  right: -8%;
  width: 70%;
  height: 3%;
  background: $skin-hair;
  border-radius: 50px;
  transform: rotate(-20deg);
}

.arm-hair-2-right{
  position: absolute;
  top: 50%;
  right: -8%;
  width: 70%;
  height: 3%;
  background: $skin-hair;
  border-radius: 50px;
  transform: rotate(-20deg);
}

.arm-hair-3-right{
  position: absolute;
  top: 60%;
  right: -8%;
  width: 70%;
  height: 3%;
  background: $skin-hair;
  border-radius: 50px;
  transform: rotate(-20deg);
}

.arm-hair-4-right{
  position: absolute;
  top: 70%;
  right: -8%;
  width: 70%;
  height: 3%;
  background: $skin-hair;
  border-radius: 50px;
  transform: rotate(-20deg);
}

.fingers-bottom-right {
  position: absolute;
  top: 5%;
  left: -15%;
  width: 18%;
  height: 20%;
  background: $skin-hair;
  border-radius: 50px;
  border-bottom-right-radius: 0;
}

.fingers-top-right {
  position: absolute;
  top: -3%;
  right: 12%;
  width: 105%;
  height: 20%;
  background: $skin-light;
  border-radius: 50px;
  border-bottom-right-radius: 0;
  transform: rotate(-20deg);
}

.claws-left {
  position: absolute;
  top: -50%;
  width: 100%;
  height: 70%;
  transform-origin: bottom left;
  transform: scaleY(0);
  transition: all 0.5s;
  animation: claws-up 2s 1;
  animation-fill-mode: forwards;
}

.claws-right {
  position: absolute;
  top: -50%;
  width: 100%;
  height: 70%;
  transform-origin: bottom left;
  transform: scaleY(0);
  transition: all 0.5s;
  animation: claws-up 2s 1;
  animation-fill-mode: forwards;
}

.claw-1 {
  position: absolute;
  top: 5%;
  width: 20%;
  height: 90%;
  background: $claws;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
  transition: all 0.5s;
}

.claw-2 {
  position: absolute;
  top: 2%;
  left: 35%;
  width: 20%;
  height: 90%;
  background: $claws;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
   transition: all 0.5s;
}

.claw-3 {
  position: absolute;
  top: 7%;
  left: 70%;
  width: 20%;
  height: 90%;
  background: $claws;
  border-bottom-right-radius: 50px;
  border-top-left-radius: 50px;
   transition: all 0.5s;
}

.claw-1-right {
  position: absolute;
  top: 5%;
  right: 0;
  width: 20%;
  height: 90%;
  background: $claws;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 50px;
  transition: all 0.5s;
}

.claw-2-right {
  position: absolute;
  top: 2%;
  right: 35%;
  width: 20%;
  height: 90%;
  background: $claws;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 50px;
  transition: all 0.5s;
}

.claw-3-right {
  position: absolute;
  top: 9%;
  right: 70%;
  width: 20%;
  height: 90%;
  background: $claws;
  border-bottom-left-radius: 50px;
  border-top-right-radius: 50px;
  transition: all 0.5s;
}

@keyframes arm-lift {
  0% {
    top: 19%;
  }
  
  100% {
    top: 9%;
  }
}

@keyframes claws-up {
  0% {
    transform: scaleY(0);
  }
  50% {
    transform: scaleY(0);
  }
  100% {
    transform: scaleY(1);
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console