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
  .space
    .mouth-senter
    .hailo
    .star-main-1
    .star-main-2
    .star-1
    .star-2
    .star-3
    .star-4
    .star-5
    .star-6
    .commit
      .center
    .star-7
    .star-8
    .star-9
    .star-10
    .star-11
    .star-12
    .star-13
    .star-14
    .star-15
    .star-16
    .star-17
  .skeleton
    .left-skull
      .skull-shadow-l
      .eye-hole-l
      .nose-hole-l
      .mouth-l
      .check-bone-l-top
      .check-bone-l-bottom
    .right-skull
      .skull-shadow-r
      .eye-hole-r
      .nose-hole-r
      .mouth-r
      .check-bone-r-top
      .check-bone-r-bottom
  .brain
    .brain-left
      .brain-shadow-l
      .crinkle-top-1
      .crinkle-bottom-1
      .crinkle-mid-1
      .crinkle-mid-2-top
      .crinkle-mid-2-bottom
      .crinkle-mid-3
      .crinkle-mid-4-top
      .crinkle-mid-4-bottom
      .crinkle-bottom
    .brain-right
      .brain-shadow-r
      .crinkle-top-1-r
      .crinkle-bottom-1-r
      .crinkle-mid-1-r
      .crinkle-mid-2-top-r
      .crinkle-mid-2-bottom-r
      .crinkle-mid-3-r
      .crinkle-mid-4-top-r
      .crinkle-mid-4-bottom-r
      .crinkle-bottom-r
  .face
    .left-face
      .l-face-copy
        .hair-left
        .hair-top-l
        .eye-l
          .pulp
        .nose-face-l
        .cheek-left-up-l
        .cheek-left-down-l
        .mouth-face-l-top
        .mouth-face-l-bottom
      .ear-l
    .right-face
      .r-face-copy
        .hair-right
        .hair-top-l
        .eye-r
          .pulp
        .nose-face-r
        .cheek-left-up-r
        .cheek-left-down-r
        .mouth-face-r-top
        .mouth-face-r-bottom  
      .ear-r
              
            
!

CSS

              
                $black: #222221;
$tucoiz: #25B2BD;
$white: #F5F2F5;
$pink: #DB3E79;
$pink-shadow: #D43572;
$darkGreen: #29737D;
$yellow: #F4D975;
$gray: #F7F3F7;
$skull: #FCFCFC;
$purple: #9A2C8A;
$dark-purple: #82218A;
$circle: 50%;

* {
  box-sizing: border-box;
}

body {
  background: #B3A3AA;
}

.box {
  position: relative;
  width: 700px;
  height: 500px;
  display: block;
  background: none;
  margin: 5% auto 0;
  transform: scale(.7);
}

.box:after {
  position: absolute;
  right: 0;
  left: 0;
  bottom: -20%;
  margin: auto;
  width: 200px;
  height: 100px;
  font-size: 2rem;
  color: #888;
  font-family: sans-serif;
  content: "hover on me";
  tansition: all .75s;
  animation: hover 4s infinite;
}

@keyframes hover {
  0% {
    transform: translateY(0px);
  }
  50% {
    transform: translateY(-20px);
  }
  100% {
    transform: translateY(0px);
  }
}
.box:hover .left-skull {
  transform: translateX(-80px);
}

.box:hover .right-skull {
  transform: translateX(80px);
}

.box:hover .brain-left {
  transform: translateX(-160px);
}

.box:hover .brain-right {
  transform: translateX(160px);
}

.box:hover .left-face {
  transform: translateX(-250px);
}

.box:hover .right-face {
  transform: translateX(250px);
}

.space {
  position: absolute;
  left: 30%;
  top: 10%;
  width: 40%;
  height: 60%;
  background: $black;
  border-radius: $circle;
  overflow: hidden;
}

.mouth-senter {
  position: absolute;
  bottom: 15%;
  left: 42%;
  width: 16%;
  height: 15%;
  border-radius: $circle;
  background: $tucoiz;
}

.hailo {
  position: absolute;
  bottom: 13%;
  left: 35%;
  width: 30%;
  height: 20%;
  border-radius: $circle;
  border: 6px solid $white;
  transition: all .5s;
  transform: rotateX(0deg);
  animation: hailo 1s infinite;
  animation-direction: alternate;
}

.star-main-1 {
  position: absolute;
  left: 30%;
  top: 25%;
  width: 10%;
  height: 10%;
  border-radius: $circle;
  background: $pink;
}

.star-main-2 {
  position: absolute;
  right: 30%;
  top: 25%;
  width: 10%;
  height: 10%;
  border-radius: $circle;
  background: $pink;
}

.star-1 {
  position: absolute;
  left: 20%;
  bottom: 15%;
  width: 5%;
  height: 5%;
  border-radius: $circle;
  background: $tucoiz;
  transition: all 0.5s;
  transform: translate(0,0);
  animation: star-1 2s infinite;
  animation-direction: alternate;
}

.star-2 {
  position: absolute;
  left: 30%;
  bottom: 40%;
  width: 6%;
  height: 6%;
  border-radius: $circle;
  background: $tucoiz;
  transition: all 0.5s;
  transform: translate(0,0);
  animation: star-move 10s infinite;
  animation-direction: alternate;
}

.star-3 {
  position: absolute;
  right: 20%;
  bottom: 40%;
  width: 5.5%;
  height: 5.5%;
  border-radius: $circle;
  background: $darkGreen;
   transition: all 0.5s;
  transform: translate(0,0);
  animation: star-move 15s infinite;
  animation-direction: alternate;
}

.star-4 {
  position: absolute;
  left: 20%;
  top: 40%;
  width: 3.5%;
  height: 3.5%;
  border-radius: $circle;
  background: $darkGreen;
  transition: all 0.5s;
  transform: translate(0,0);
  animation: star-move 15s infinite;
  animation-direction: alternate;
}

.star-5 {
  position: absolute;
  left: 20%;
  top: 20%;
  width: 1.5%;
  height: 1.5%;
  border-radius: $circle;
  background: $darkGreen;
}

.star-6 {
  position: absolute;
  right: 20%;
  top: 25%;
  width: 1.5%;
  height: 1.5%;
  border-radius: $circle;
  background: $darkGreen;
}

.star-7 {
  position: absolute;
  right: 23%;
  bottom: 25%;
  width: 1.5%;
  height: 1.5%;
  border-radius: $circle;
  background: $darkGreen;
}

.star-8 {
  position: absolute;
  left: 23%;
  bottom: 25%;
  width: 1.5%;
  height: 1.5%;
  border-radius: $circle;
  background: $darkGreen;
}

.star-9 {
  position: absolute;
  left: 17%;
  bottom: 30%;
  width: 1.5%;
  height: 1.5%;
  border-radius: $circle;
  background: $yellow;
}

.star-10 {
  position: absolute;
  left: 10%;
  top: 30%;
  width: 1.5%;
  height: 1.5%;
  border-radius: $circle;
  background: $yellow;
}

.star-11 {
  position: absolute;
  right: 10%;
  top: 30%;
  width: 3.5%;
  height: 3.5%;
  border-radius: $circle;
  background: $yellow;
  transition: all 0.5s;
  transform: translate(0,0);
  animation: star-move 10s infinite;
  animation-direction: alternate;
}

.star-12 {
  position: absolute;
  right: 40%;
  top: 10%;
  width: 3.5%;
  height: 3.5%;
  border-radius: $circle;
  background: $yellow;
   transition: all 0.5s;
  transform: translate(0,0);
  animation: star-move 19s infinite;
  animation-direction: alternate;
}

.star-13 {
  position: absolute;
  left: 40%;
  top: 10%;
  width: 1.5%;
  height: 1.5%;
  border-radius: $circle;
  background: $yellow;
}

.star-14 {
  position: absolute;
  left: 40%;
  bottom: 10%;
  width: 1.5%;
  height: 1.5%;
  border-radius: $circle;
  background: $yellow;
}

.star-15 {
  position: absolute;
  right: 40%;
  bottom: 8%;
  width: 1.5%;
  height: 1.5%;
  border-radius: $circle;
  background: $tucoiz;
}

.star-16 {
  position: absolute;
  right: 45%;
  bottom: 48%;
  width: 1.5%;
  height: 1.5%;
  border-radius: $circle;
  background: $tucoiz;
}

.star-17 {
  position: absolute;
  left: 5%;
  bottom: 48%;
  width: 2.5%;
  height: 2.5%;
  border-radius: $circle;
  background: $tucoiz;
  transition: all 0.5s;
  transform: translate(0,0);
  animation: star-move 19s infinite;
  animation-direction: alternate;
}

.commit {
  position: absolute;
  top: 0%; 
  left: 0%;
  width: 15%;
  height: 15%;
  border: 1px solid white;
  border-radius: $circle;
  background: $white;
  -webkit-clip-path: polygon(100% 75%, 75% 100%, 20% 20%);
  clip-path: polygon(100% 75%, 75% 100%, 20% 20%);
  transition: all 0.3s;
  animation: commit 3s infinite;
}

.center {
  position: absolute;
  right: 6%;
  bottom: 6%;
  width: 27%;
  height: 27%;
  background: $tucoiz;
  border-radius: $circle;
}

.skeleton {
  position: absolute;
  width: 100%;
  height: 100%;
}

.left-skull {
  position: absolute;
  top: 5%;
  left: 20%;
  width: 30%;
  height: 70%;
  background: $skull;
  overflow: hidden;
  border-top-left-radius: $circle;
  border-bottom-left-radius: $circle;
  transition: all 1.5s;
}

.skull-shadow-l {
  position: absolute;
  width: 80%;
  height: 100%;
  background: $gray;
}

.eye-hole-l {
  position: absolute;
  top: 25%;
  left: 35%;
  width: 40%;
  height: 20%;
  background: $black;
  border-radius: $circle;
}

.nose-hole-l {
  position: absolute;
  top: 35%;
  right: -12%;
  width: 20%;
  height: 30%;
  background: $black;
  border-radius: 50px;
  transform: rotate(10deg);
}

.mouth-l {
  position: absolute;
  right: 0%;
  bottom: 15%;
  width: 20%;
  height: 1%;
  background: $black;
}

.check-bone-l-top {
  position: absolute;
  left: 35%;
  bottom: 30%;
  width: 15%;
  height: 1%;
  background: $black;
  transform: rotate(20deg);
}

.check-bone-l-bottom {
  position: absolute;
  left: 49%;
  bottom: 14.25%;
  width: 1.5%;
  height: 15%;
  background: $black;
}

.right-skull {
  position: absolute;
  top: 5%;
  right: 20%;
  width: 30%;
  height: 70%;
  background: $skull;
  overflow: hidden;
  border-top-right-radius: $circle;
  border-bottom-right-radius: $circle;
  transition: all 1.5s;
}

.skull-shadow-r {
  position: absolute;
  right: 0;
  width: 80%;
  height: 100%;
  background: $gray;
}

.eye-hole-r {
  position: absolute;
  top: 25%;
  right: 35%;
  width: 40%;
  height: 20%;
  background: $black;
  border-radius: $circle;
}

.nose-hole-r {
  position: absolute;
  top: 35%;
  left: -12%;
  width: 20%;
  height: 30%;
  background: $black;
  border-radius: 50px;
  transform: rotate(-10deg);
}

.mouth-r {
  position: absolute;
  left: 0%;
  bottom: 15%;
  width: 20%;
  height: 1%;
  background: $black;
}

.check-bone-r-top {
  position: absolute;
  right: 35%;
  bottom: 30%;
  width: 15%;
  height: 1%;
  background: $black;
  transform: rotate(-20deg);
}

.check-bone-r-bottom {
  position: absolute;
  right: 49%;
  bottom: 14.25%;
  width: 1.5%;
  height: 15%;
  background: $black;
}

.brain {
  position: absolute;
  width: 100%;
  height: 100%;
}

.brain-left {
  position: absolute;
  top: 0%;
  left: 20%;
  width: 30%;
  height: 80%;
  background: $pink;
  overflow: hidden;
  border-top-left-radius: $circle;
  border-bottom-left-radius: $circle;
  transition: all .90s;
}

.crinkle-top-1 {
  position: absolute;
  top: -10%;
  right: -15%;
  width: 50%;
  height: 20%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
  clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
}

.crinkle-bottom-1 {
  position: absolute;
  top: 0%;
  right: 15%;
  width: 40%;
  height: 20%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(45% 45%, 100% 45%, 100% 100%, 45% 100%);
  clip-path: polygon(45% 45%, 100% 45%, 100% 100%, 45% 100%);
}

.crinkle-mid-1 {
  position: absolute;
  top: 30%;
  right: 15%;
  width: 60%;
  height: 20%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%);
  clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%);
}

.crinkle-mid-2-top {
  position: absolute;
  top: 25%;
  right: 10%;
  width: 60%;
  height: 20%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(40% 30%, 90% 30%, 90% 100%, 40% 100%);
  clip-path: polygon(40% 30%, 90% 30%, 90% 100%, 40% 100%);
}

.crinkle-mid-2-bottom {
  position: absolute;
  top: 24%;
  right: 27%;
  width: 60%;
  height: 40%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
  clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
}

.crinkle-mid-3 {
  position: absolute;
  bottom: -5%;
  left: -15%;
  width: 70%;
  height: 40%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
}

.crinkle-mid-4-bottom {
  position: absolute;
  bottom: -15%;
  left: 10%;
  width: 70%;
  height: 40%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(58% 0, 100% 0, 100% 45%, 60% 100%);
  clip-path: polygon(58% 0, 100% 0, 100% 45%, 60% 100%);
}

.crinkle-mid-4-top {
  position: absolute;
  bottom: 24%;
  left: 10%;
  width: 70%;
  height: 40%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(58% 70%, 100% 70%, 100% 100% , 58% 100%);
  clip-path: polygon(58% 70%, 100% 70%, 100% 100% , 58% 100%);
}

.crinkle-bottom {
  position: absolute;
  bottom: 4%;
  left: 15%;
  width: 70%;
  height: 40%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(0 50%, 50% 0, 50% 100%, 0 100% );
  clip-path: polygon(0 50%, 50% 0, 50% 100%, 0 100% );
}

brain-shadow-l {
  position: absolute;
  width: 30%;
  height: 100%;
  background: $pink-shadow;
}

.brain-right {
  position: absolute;
  top: 0%;
  right: 20%;
  width: 30%;
  height: 80%;
  background: $pink;
  overflow: hidden;
  border-top-right-radius: $circle;
  border-bottom-right-radius: $circle;
  transition: all .90s;
}

.crinkle-top-1-r {
  position: absolute;
  top: -10%;
  left: -15%;
  width: 50%;
  height: 20%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
  clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
}

.crinkle-bottom-1-r {
  position: absolute;
  top: 0%;
  left: 15%;
  width: 40%;
  height: 20%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(45% 45%, 100% 45%, 100% 100%, 45% 100%);
  clip-path: polygon(45% 45%, 100% 45%, 100% 100%, 45% 100%);
  transform: scaleX(-1);
}

.crinkle-mid-1-r {
  position: absolute;
  top: 30%;
  right: 15%;
  width: 60%;
  height: 20%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%);
  clip-path: polygon(0 0, 100% 0, 100% 25%, 0 25%);
}

.crinkle-mid-2-top-r {
  position: absolute;
  top: 25%;
  left: 10%;
  width: 60%;
  height: 20%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(40% 30%, 90% 30%, 90% 100%, 40% 100%);
  clip-path: polygon(40% 30%, 90% 30%, 90% 100%, 40% 100%);
  transform: scaleX(-1);
}

.crinkle-mid-2-bottom-r {
  position: absolute;
  top: 24%;
  left: 27%;
  width: 60%;
  height: 40%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
  clip-path: polygon(50% 50%, 100% 50%, 100% 100%, 50% 100%);
  transform: scaleX(-1);
}

.crinkle-mid-3-r {
  position: absolute;
  bottom: -5%;
  right: -15%;
  width: 70%;
  height: 40%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
  clip-path: polygon(0 0, 100% 0, 100% 50%, 0 100%);
  transform: scaleX(-1);
}

.crinkle-mid-4-bottom-r {
  position: absolute;
  bottom: -15%;
  right: 10%;
  width: 70%;
  height: 40%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(58% 0, 100% 0, 100% 45%, 60% 100%);
  clip-path: polygon(58% 0, 100% 0, 100% 45%, 60% 100%);
  transform: scaleX(-1);
}

.crinkle-mid-4-top-r {
  position: absolute;
  bottom: 24%;
  right: 10%;
  width: 70%;
  height: 40%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(58% 70%, 100% 70%, 100% 100% , 58% 100%);
  clip-path: polygon(58% 70%, 100% 70%, 100% 100% , 58% 100%);
  transform: scaleX(-1);
}

.crinkle-bottom-r {
  position: absolute;
  bottom: 4%;
  right: 15%;
  width: 70%;
  height: 40%;
  border-radius: $circle;
  border: 4px solid $purple;
  -webkit-clip-path: polygon(0 50%, 50% 0, 50% 100%, 0 100% );
  clip-path: polygon(0 50%, 50% 0, 50% 100%, 0 100% );
  transform: scaleX(-1);
}

.face {
  position: absolute;
  top: -10%;
  width: 100%;
  height: 100%;
}

.left-face {
  position: absolute;
  left: 20%;
  width: 30%;
  height: 100%;
  background: $purple;
  border-top-left-radius: $circle;
  border-bottom-left-radius: $circle;
  transition: all .5s;
}

.l-face-copy {
  position: absolute;
  width: 100%;
  height: 100%;
  background: $purple;
  border-top-left-radius: $circle;
  border-bottom-left-radius: $circle;
  transition: all .5s;
  overflow: hidden;
}

.ear-l {
  position: absolute;
  left: -20%;
  top: 35%;
  width: 30%;
  height: 25%;
  background: $purple;
  border-top-left-radius: $circle;
  border-bottom-left-radius: $circle;
  z-index: 1;
}

.hair-left {
  position: absolute;
  width: 30%;
  height: 45%;
  background: $black;
  border-radius: 50px;
  z-index: 2;
}

.hair-top-l {
  position: absolute;
  width: 100%;
  height: 15%;
  background: $black;
  z-index: 2;
}

.eye-l {
  position: absolute;
  top: 40%;
  left: 45%;
  width: 40%;
  height: 10%;
  background: $white;
  border-radius: $circle;
  z-index: 3;
  overflow: hidden;
  transform-origin: center center;
  transition: all 0.5s;
  animation: blink 4s infinite linear;
}

.pulp {
  position: absolute;
  left: 34%;
  top: 30%;
  width: 32%;
  height: 50%;
  background: $black;
  border-radius: $circle;
}

.nose-face-l {
  position: absolute;
  right: -10%;
  bottom: 35%;
  width: 20%;
  height: 10%;
  border: 3px solid $black;
  border-radius: $circle;
  -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100%);
  clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100% );
}

.cheek-left-up-l {
  position: absolute;
  bottom: 30%;
  left: 35%;
  width: 20%;
  height: 1%;
  background: $dark-purple;
  transform: rotate(20deg);
}

.cheek-left-down-l {
  position: absolute;
  bottom: 14.5%;
  right: 44%;
  width: 2.5%;
  height: 15%;
  background: $dark-purple;
}

.mouth-face-l-top {
  position: absolute;
  bottom: 25%;
  right: 0%;
  width: 20%;
  height: .75%;
  background: $black;
}

.mouth-face-l-bottom {
  position: absolute;
  bottom: 23%;
  right: 0%;
  width: 8%;
  height: .75%;
  background: $black;
}

.right-face {
  position: absolute;
  right: 20%;
  width: 30%;
  height: 100%;
  background: $purple;
  border-top-right-radius: $circle;
  border-bottom-right-radius: $circle;
  transition: all .5s;
}

.ear-r {
  position: absolute;
  right: -20%;
  top: 35%;
  width: 30%;
  height: 25%;
  background: $purple;
  border-top-right-radius: $circle;
  border-bottom-right-radius: $circle;
  z-index: 1;
}

.r-face-copy {
  position: absolute;
  width: 100%;
  height: 100%;
  background: $purple;
  border-top-right-radius: $circle;
  border-bottom-right-radius: $circle;
  transition: all .5s;
  overflow: hidden;
}

.hair-right {
  position: absolute;
  right: 0;
  width: 30%;
  height: 45%;
  background: $black;
  border-radius: 50px;
  z-index: 2;
}

.eye-r {
  position: absolute;
  top: 40%;
  right: 45%;
  width: 40%;
  height: 10%;
  background: $white;
  border-radius: $circle;
  z-index: 3;
  overflow: hidden;
  transform-origin: center center;
  transition: all 0.5s;
  animation: blink 4s infinite linear;
}

.nose-face-r {
  position: absolute;
  left: -10%;
  bottom: 35%;
  width: 20%;
  height: 10%;
  border: 3px solid $black;
  border-radius: $circle;
  -webkit-clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100% );
  clip-path: polygon(0 75%, 100% 75%, 100% 100%, 0 100% );
}

.cheek-left-up-r {
  position: absolute;
  bottom: 30%;
  right: 35%;
  width: 20%;
  height: 1%;
  background: $dark-purple;
  transform: rotate(-20deg);
}

.cheek-left-down-r {
  position: absolute;
  bottom: 14.5%;
  left: 44%;
  width: 2.5%;
  height: 15%;
  background: $dark-purple;
}

.mouth-face-r-top {
  position: absolute;
  bottom: 25%;
  left: 0%;
  width: 20%;
  height: .75%;
  background: $black;
}

.mouth-face-r-bottom {
  position: absolute;
  bottom: 23%;
  left: 0%;
  width: 8%;
  height: .75%;
  background: $black;
}


@keyframes commit {
  0% {
    transform: translate(0, 0);
  } 100% {
    transform: translate(300px, 300px);
  }
}

@keyframes star-1 {
  0% {
    transform: translate(0,0);
  } 100% {
    transform: translate(-10px,10px);
  }
}

@keyframes hailo {
  0% {
    transform: rotateX(0deg);
  } 100% {
    transform: rotateX(-25deg);
  }
}

@keyframes star-move {
  0% {
    transform: translate(0,0);
  }
  25% {
    transform: translate(-5px,-5px);
  }
  50% {
    transform: translate(5px,0);
  }
  75% {
    transform: translate(0,5px);
  }
}

@keyframes blink {
  0% {
    transform: scaleY(1)
  }
  5% {
    transform: scaleY(0)
  }
  6% {
    transform: scaleY(1)
  }
  30% {
    transform: scaleY(1)
  }
  100% {
    transform: scaleY(1)
  }
}
              
            
!

JS

              
                
              
            
!
999px

Console