<body>
  <div class="box-canvas">
    <div class="left-ear ear"></div>
    <div class="right-ear ear"></div>
    <div class="hair"></div>
    <div class="tail"></div>
    <div class="body">
      <div class="left-eye eye"></div>
      <div class="right-eye eye"></div>
      <div class="left-paw"></div>
    </div>
    <div class="whisker-left whisker"></div>
    <div class="whisker-right whisker"></div>
    <div class="left-foot"></div>
  </div>
</body>
body{
  background: #99D7C0;
}

.box-canvas{
  position: relative;
  margin: auto;
  display: block;
  margin-top: 8%;
  margin-bottom: 8%;
  width: 600px;
  height:600px;
  background: #99D7C0;
}

/* Main mouse body shape */
.body {
  position: absolute;
  left: 150px;
  top: 100px;
  width: 300px;
  height: 400px;
  background: grey;
  clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
  border-radius: 50% 50% 20% 20%;
}

/* Nose */
.body::after {
  content: '';
  position: absolute;
  background: pink;
  width: 20px;
  height: 20px;
  top: 150px;
  left: 140px;
  clip-path: polygon(100% 0, 0 0, 50% 100%);
  border-radius: 25%;
}

/* Shared ear styles */
.ear {
  width: 175px;
  height: 175px;
  background: gray;
  border-radius: 50%;
}

/* Inner ears */
.ear::after {
  content: '';
  position: absolute;
  top: 18px;
  width: 150px;
  height: 150px;
  background: #edb6be;
  border-radius: 50%;
}

/* Inner left ear */
.ear:first-child::after {
  left: 25px;
}

/* Left ear */
.left-ear {
  position: absolute;
  top: 50px;
  left: 100px;
}

/* Right ear */
.right-ear {
  position: absolute;
  top: 50px;
  right: 100px;
}

/* Top hair detail */
.hair {
  position: absolute;
  left: 300px;
  top: 30px;
  width: 50px;
  height: 75px;
  background: gray;
  clip-path: polygon(29% 83%, 28% 94%, 45% 80%, 44% 100%, 0 100%);
}

.eye {
  animation: eyeBlink 2s infinite;
}

/* Outer left eye */
.left-eye {
  position: absolute;
  top: 100px;
  left: 100px;
  background: black;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* Outer right eye */
.right-eye {
  position: absolute;
  top: 100px;
  right: 100px;
  background: black;
  width: 20px;
  height: 20px;
  border-radius: 50%;
}

/* Pupil detail */
.eye::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: 5px;
  width: 5px;
  height: 5px;
  background: white;
  border-radius: 50%;
  animation: pupilBlink 2s infinite;
}

/* Shared whisker styles */
.whisker {
  position: absolute;
  top: 250px;
  width: 150px;
  height: 5px;
  background: #424242;
  animation: whiskerTwitch 2s infinite;
}

/* Upper left whisker */
.whisker-left {
  left: 100px;
}

/* Lower left whisker */
.whisker-left::after {
  position: absolute;
  content: '';
  top: 45px;
  width: 150px;
  height: 5px;
  background: #424242;
  transform: rotate(-20deg);
}

/* Upper right whisker */
.whisker-right {
  right: 100px;
}

/* Lower right whisker */
.whisker-right::after {
  position: absolute;
  content: '';
  top: 45px;
  width: 150px;
  height: 5px;
  background: #424242;
  transform: rotate(20deg);
}

/* Left paw */
.left-paw {
  position: absolute;
	top: 200px;
  width: 40px;
	height: 50px;
	background-color: transparent;
	border-radius: 50%;
	box-shadow: 0px 8px 0px 0px darkgrey;
  transform: rotate(-20deg);
	left: 50px;
}

/* Right paw */
.left-paw::after {
  content: '';
  position: absolute;
	top: 55px;
  width: 40px;
	height: 50px;
	background-color: transparent;
	border-radius: 50%;
	box-shadow: 0px 8px 0px 0px darkgrey;
  transform: rotate(40deg);
  left: 150px;
}

/* Lower tail portion */
.tail {
  position: absolute;
  right: 0;
  top: 200px;
  width: 180px; 
  height: 250px;  
  border: solid 20px #edb6be;
  border-color: transparent #edb6be #edb6be transparent ;
  border-radius: 0 100px 100px/50% 0;
}

/* Upper tail portion */
.tail::after {
  content: '';
  position: absolute;
  left: 180px;
  top: -50px;
  width: 50px;
  height: 75px;
  border: solid 20px #edb6be;
  border-color:  #edb6be transparent transparent #edb6be ;
  border-radius: 100px 100px/75% 0 0;
}

/* Left foot */
.left-foot {
  position: absolute;
  top: 425px;
  left: 150px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: gray;
  box-shadow: inset 0px 8px 0px 0px darkgrey;
}

/* Right foot */
.left-foot::after {
  content: '';
  position: absolute;
  top: 0;
  left: 225px;
  width: 75px;
  height: 75px;
  border-radius: 50%;
  background: gray;
  box-shadow: inset 0px 8px 0px 0px darkgrey;
}

/* Whisker animation */
@keyframes whiskerTwitch {
  0% {
    transform: translateY(5px);
  }
  10% {
    transform: translateY(0);
  }
}

/* Eye blink animation */
@keyframes eyeBlink {
  0% {
    height: 0;
  }
  10% {
    height: 20px;
  }
} 

/* Pupil blink aimation */
@keyframes pupilBlink {
  0% {
    opacity: 0;
  }
 
  9% {
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.