<!--This is a work in progress!-->
.box
  .cat-head
    .cat-head-copy
    .cheek-left
    .cheek-right
    .ear-left
      .inner-ear-left
    .ear-right
      .inner-ear-right
    .eye-left
      .pupil
      .pupil-spark
    .eye-right
      .pupil
      .pupil-spark
    .nose
    .mouth
      .cupids-bow
      .lips
      .freckle-right-1
      .freckle-right-2
      .freckle-right-3
      .freckle-left-1
      .freckle-left-2
      .freckle-left-3
      .whisker-right-1
      .whisker-right-2
      .whisker-right-3
      .whisker-left-1
      .whisker-left-2
      .whisker-left-3
  .cat-body
    .cat-body-copy
    .stomach
    .right-paw
    .left-paw
    .stripe-left-1
    .stripe-left-2
    .stripe-right-1
    .stripe-right-2
    .cat-tail
View Compiled
$rich-black: #050517; 
$pink-raspberry: #89023E; 
$pale-pink: #FFD9DA; 
$light-crimson: #EA638C; 
$paradise-pink: #EE4266; 

body {
  background: $rich-black;
}

.box {
  position: relative;
  display: block;
  margin: auto;
  margin-top: 8%;
  background: none;
  height: 600px;
  width: 800px;
  // border: 3px solid white;
}

.cat-head {
  position: absolute;
  width: 25%;
  height: 35%;
  background: $paradise-pink;
  border: 6px solid $pink-raspberry;
  border-bottom: transparent;
  border-radius: 50%;
  top: 6%;
  left: 37.5%;
  z-index: 2;
  animation: 8s nod infinite;
}

.cat-head-copy {
  width: 100%;
  height: 100%;
  position: absolute;
  background: $paradise-pink;
  border-radius: 50%;
  z-index: 2;
}

.cheek-left {
  position: absolute;
  width: 42%;
  height: 50%;
  border-radius: 50%;
  background: $paradise-pink;
  border: 6px solid $pink-raspberry;
  top: 30%;
  left: 67%;
  z-index: 1;
}

.cheek-right {
  position: absolute;
  width: 42%;
  height: 50%;
  border-radius: 50%;
  background: $paradise-pink;
  border: 6px solid $pink-raspberry;
  top: 30%;
  right: 67%;
  z-index: 1;
}

.ear-left {
  position: absolute;
  background: $paradise-pink;
  border: 6px solid $pink-raspberry;
  border-radius: 10px;
  border-top-right-radius: 80px;
  width: 30%;
  height: 40%;
  top: -10%;
  left: -1%;
  transform: rotate(-20deg);
  z-index: 1;
}

.ear-right {
  position: absolute;
  background: $paradise-pink;
  border: 6px solid $pink-raspberry;
  border-radius: 10px;
  border-top-left-radius: 80px;
  width: 30%;
  height: 40%;
  top: -10%;
  right: -1%;
  transform: rotate(20deg);
  z-index: 1;
}

.inner-ear-left {
  position: absolute;
  background: $pale-pink;
  border-top-left-radius: 10px;
  border-top-right-radius: 80px;
  width: 60%;
  height: 50%;
  top: 10%;
  left: 10%;
  transform: rotate(-4deg);
}

.inner-ear-right {
  position: absolute;
  background: $pale-pink;
  border-top-right-radius: 10px;
  border-top-left-radius: 80px;
  width: 60%;
  height: 50%;
  top: 10%;
  right: 10%;
  transform: rotate(4deg);
}

.eye-left {
  position: absolute;
  border-radius: 50%;
  border: 3px solid $pink-raspberry;
  background: white;
  width: 25%;
  height: 25%;
  top: 25%;
  left: 20%;
  z-index: 3;
  animation: blink 1s infinite;
}

.eye-right {
  position: absolute;
  border-radius: 50%;
  border: 3px solid $pink-raspberry;
  background: white;
  width: 25%;
  height: 25%;
  top: 25%;
  right: 20%;
  z-index: 3;
  animation: blink 1s infinite;
}

.pupil {
  position: absolute;
  width: 50%;
  height: 50%;
  background: black;
  border-radius: 50%;
  top: 35%;
  left: 36%;
}

.pupil-spark {
  position: absolute;
  width: 20%;
  height: 20%;
  background: white;
  border-radius: 50%;
  top: 35%;
  left: 35%;
}

.nose {
  position: absolute;
  display: inline-block;
  background: white;
  bottom: 42%;
  left: 42%;
  width: 25px;
  height: 20px;
  border-top-right-radius: 40px 50px;
  border-top-left-radius: 40px 50px;
  border-bottom-right-radius: 5px;
  border-bottom-left-radius: 5px;
  border-left: 4px solid $pink-raspberry;
  border-right: 4px solid $pink-raspberry;
  border-bottom: 3px solid $pink-raspberry;
  z-index: 3;
}

.mouth {
  position: absolute;
  top: 58%;
  left: 50%;
  width: 70px;
  height: 45px;
  background: white;
  transform: translate(-50%, 0);
  border-top-left-radius: 40px 40px;
  border-top-right-radius: 40px 40px;
  border-bottom-left-radius: 40px 20px;
   border-bottom-right-radius: 40px 20px;
  z-index: 3;
}

.cupids-bow {
  position: absolute;
  background: $pink-raspberry;
  top: -1%;
  left: 51%;
  width: 3px;
  height: 15px;
}

.freckle-right-1 {
  position: absolute;
  background: $pale-pink;
  top: 30%;
  right: 10%;
  height: 5px;
  width: 5px;
  border-radius: 50%;
}

.freckle-right-2 {
  position: absolute;
  background: $pale-pink;
  top: 40%;
  right: 16%;
  height: 5px;
  width: 5px;
  border-radius: 50%;
}

.freckle-right-3 {
  position: absolute;
  background: $pale-pink;
  top: 50%;
  right: 10%;
  height: 5px;
  width: 5px;
  border-radius: 50%;
}

.freckle-left-1 {
  position: absolute;
  background: $pale-pink;
  top: 30%;
  left: 10%;
  height: 5px;
  width: 5px;
  border-radius: 50%;
}

.freckle-left-2 {
  position: absolute;
  background: $pale-pink;
  top: 40%;
  left: 16%;
  height: 5px;
  width: 5px;
  border-radius: 50%;
}

.freckle-left-3 {
  position: absolute;
  background: $pale-pink;
  top: 50%;
  left: 10%;
  height: 5px;
  width: 5px;
  border-radius: 50%;
}

.whisker-left-1 {
  position: absolute;
  background: $pink-raspberry;
  height: 2px;
  width: 50px;
  bottom: 32.5%;
  left: -56%;
  transform: rotate(-10deg)
}

.whisker-left-2 {
  position: absolute;
  background: $pink-raspberry;
  height: 2px;
  width: 50px;
  bottom: 51.5%;
  left: -52%;
  transform: rotate(-2deg)
}

.whisker-left-3 {
  position: absolute;
  background: $pink-raspberry;
  height: 2px;
  width: 50px;
  bottom: 71.5%;
  left: -56%;
  transform: rotate(10deg)
}

.whisker-right-1 {
  position: absolute;
  background: $pink-raspberry;
  height: 2px;
  width: 50px;
  bottom: 32.5%;
  right: -56%;
  transform: rotate(10deg)
}

.whisker-right-2 {
  position: absolute;
  background: $pink-raspberry;
  height: 2px;
  width: 50px;
  bottom: 55.2%;
  right: -52%;
  transform: rotate(-2deg)
}

.whisker-right-3 {
  position: absolute;
  background: $pink-raspberry;
  height: 2px;
  width: 50px;
  bottom: 71.5%;
  right: -56%;
  transform: rotate(-10deg)
}

.lips {
  position: absolute;
  background: $light-crimson;
  top: 20%;
  left: 35%;
  width: 25px;
  height: 10px;
  border-top: 5px solid $pink-raspberry;
  // border-bottom: 1px solid $pink-raspberry;
  border-top-left-radius: 30px 30px;
  border-top-right-radius: 30px 30px;
  border-bottom-right-radius: 20px 10px;
  border-bottom-left-radius: 20px 10px;
}


.cat-body {
  position: absolute;
  border-radius: 70% 45% 25% 45%;
  background: $paradise-pink;
  border: 6px solid $pink-raspberry;
  width: 35%;
  height: 55%;
  left: 32.5%;
  top: 25%;
  z-index: 1;
}

.cat-body-copy {
  position: absolute;
  border-radius: 70% 45% 25% 45%;
  background: $paradise-pink;
  width: 100%;
  height: 100%;
  z-index: 2;
}

.stomach {
  position: absolute;
  border-top-left-radius: 40%;
  border-top-right-radius: 40%;
  border-bottom-right-radius: 15%;
  border-bottom-left-radius: 15%;
  background: $pale-pink;
  height: 70%;
  width: 50%;
  bottom: .5%;
  left: 28.5%;
  z-index: 3;
}

.right-paw {
  position: absolute;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border: 6px solid $pink-raspberry;
  background: $paradise-pink;
  height: 40px;
  width: 60px;
  bottom: -2%;
  right: 5%;
  transform: rotate(-5deg);
  z-index: 3;
  
}

.left-paw {
  position: absolute;
  border-top-left-radius: 40px;
  border-top-right-radius: 40px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  border: 6px solid $pink-raspberry;
  background: $paradise-pink;
  height: 40px;
  width: 60px;
  bottom: -3%;
  left: 30%;
  transform: rotate(-5deg);
  z-index: 3;
}

.cat-tail {
  position: absolute;
  left: -60px;
  bottom: 100px;
  width: 55px;
  height: 200px;
  background: $paradise-pink;
  border: 6px solid $pink-raspberry;
  border-top-left-radius: 20px 10px;
  border-top-right-radius: 60px;
  transform: rotate(-45deg);
  transform-origin: 50% 60%;
  z-index: 1;
  animation: 10s wag infinite;
}

.stripe-left-1 {
  position: absolute;
  transform: rotate(112deg);
  width: 15px;
  height: 70px;
  border-radius: 50%;
  background: $light-crimson;
  left: 20%;
  top: 20%;
  z-index: 3;
}

.stripe-left-2 {
  position: absolute;
  transform: rotate(115deg);
  width: 15px;
  height: 80px;
  border-radius: 50%;
  background: $light-crimson;
  left: 16%;
  top: 28%;
  z-index: 3;
}

.stripe-right-1 {
  position: absolute;
  transform: rotate(-115deg);
  width: 15px;
  height: 80px;
  border-radius: 50%;
  background: $light-crimson;
  right: 11%;
  top: 28%;
  z-index: 3;
}

.stripe-right-2 {
  position: absolute;
  transform: rotate(-112deg);
  width: 15px;
  height: 70px;
  border-radius: 50%;
  background: $light-crimson;
  right: 14%;
  top: 20%;
  z-index: 3;
}

// CSS Animation

@keyframes nod {
  0% {
    transform: rotate(0);
  }
  30% {
    transform: rotate(5deg);
  }
  70% {
    transform: rotate(-5deg);
  }
  100% {
    transform: rotate(0);
  }
}

@keyframes wag {
   0% {
    transform: rotate(-45deg);
  }
  50% {
    transform: rotate(-55deg);
  }
  100% {
    transform: rotate(-45deg);
  }
}

@keyframes blink {
  0% {
    opacity: 0;
  }
  50% {
    opacity: 1;
  }
  100% {
    opacity: 2;
  }
}

View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.