<div class="head-wrapper">
  <div class="head | absolute">
    <div class="mark a | absolute"></div>
    <div class="mark b | absolute"></div>
    <div class="mark c | absolute"></div>
    <div class="mark d | absolute"></div>
    <div class="mark e | absolute"></div>
    <div class="mark f | absolute"></div>
    <div class="mark g | absolute"></div>
    <div class="mark h | absolute"></div>
    <div class="mark i | absolute"></div>
    <div class="jaws | absolute">
      <div class="whisker a | absolute"></div>
      <div class="whisker b | absolute"></div>
      <div class="whisker c | absolute"></div>
      <div class="whisker d | absolute"></div>
      <div class="whisker e | absolute"></div>
      <div class="whisker f | absolute"></div>
      <div class="mouth">
        <div class="left | absolute"></div>
        <div class="right | absolute"></div>
        <div class="center a | absolute"></div>
        <div class="center b | absolute"></div>
        <div class="center c | absolute"></div>
        <div class="center d | absolute"></div>
      </div>
    </div>
    <div class="nose | absolute"></div>
  </div>
  <div class="ear left | absolute wobble-hor-bottom">
    <div class="inner-ear | absolute"></div>
  </div>
  <div class="ear right | absolute wobble-hor-bottom">
    <div class="inner-ear | absolute"></div>
  </div>
  <div class="eye left | absolute"></div>
  <div class="eye right | absolute"></div>

</div>
body {
  display:grid;
  justify-content:center;
  align-items:center;
}

.head-wrapper {
  width: 358.5px;
  height: 313px;
  position:relative;
}

.head-wrapper:has(:active),
.head-wrapper:has(:hover) {
  --eye-size-scale: 0.3;
  --mouth-rotation: 1deg;
  --mouth-scaling: 1.03;
  --ear-animation: wobble-hor-bottom 0.8s both;
}

.head {
  background: #fcaa51;
  left: 34px;
  right: 39px;
  top: 8px;
  bottom: 0;
  border-top-left-radius: 100px;
  border-top-right-radius: 100px;
  border-bottom-right-radius: 115px 115px;
  border-bottom-left-radius: 115px 115px;
  overflow: hidden;
}
.ear {
  background: #fcaa51;
  width: 67px;
  height: 80px;
  border-radius: 50%;
}
.ear.left {
  left: 6px;
  top: -4px;
  rotate: -60deg;
}
.ear.right {
  right: 6px;
  top: -4px;
  rotate: 60deg;
}
.inner-ear {
  background: #fed1d4;
  left: 12px;
  top: 20px;
  right: 15px;
  bottom: 12px;
  border-radius: 50%;
}
.ear.right .inner-ear {
  left: 15px;
  right: 12px;
}

.eye {
  background: #574137;
  width: 19px;
  height: 27px;
  top: 138px;
  border-radius: 50%;
  transform: scaleY(var(--eye-size-scale, 1));
  transition: all 150ms;
}

.eye.left {
  left: 101px;
}

.eye.right {
  right: 107px;
}

.mark {
  background: #b15b00;
  width: 50px;
  height: 400px;
  border-radius: 50%;
  border-top-left-radius: 49% 48%;
  border-top-right-radius: 48% 49%;
  transform-origin: center top;
}

.mark.a {
  rotate: 70deg;
  top: 212px;
  left: 31px;
}
.mark.b {
  rotate: 80deg;
  top: 180px;
  left: 31px;
  width: 45px;
}
.mark.c {
  rotate: 90deg;
  top: 151px;
  left: 28px;
}

.mark.d {
  rotate: 177deg;
  top: 76px;
  left: 84px;
}
.mark.e {
  rotate: 180deg;
  top: 76px;
  left: 125px;
}
.mark.f {
  rotate: 185deg;
  top: 76px;
  left: 165px;
  width: 45px;
}
.mark.g {
  rotate: 264deg;
  top: 145px;
  left: 210px;
  width: 45px;
}
.mark.h {
  rotate: 270deg;
  top: 180px;
  left: 208px;
}
.mark.i {
  rotate: 285deg;
  top: 205px;
  left: 212px;
}
.jaws {
  background: #fbe3cb;
  left: 78px;
  right: 72px;
  bottom: 16px;
  top: 184px;
  border-top-left-radius: 50px 60px;
  border-top-right-radius: 50px 60px;
  border-bottom-right-radius: 60px 45px;
  border-bottom-left-radius: 55px 45px;
  transform: scaleX(var(--mouth-scaling));
  transition: scale 150ms;
}
.nose {
  background: #584237;
  left: 121px;
  right: 121px;
  bottom: 103px;
  top: 172px;
  border-radius: 50%;
}
.whisker {
  --color: #ffffff;
  width: 40px;
  height: 5px;
  border: solid 3px var(--color);
  border-color: var(--color) transparent transparent transparent;
  border-radius: 50% / 5px 5px 0 0;
}
.whisker.a {
  rotate: 3deg;
  left: -15px;
  top: 43px;
}
.whisker.b {
  rotate: -5deg;
  left: -15px;
  top: 58px;
}
.whisker.c {
  rotate: -25deg;
  left: -10px;
  top: 73px;
}
.whisker.d {
  rotate: 23deg;
  right: -15px;
  top: 70px;
}
.whisker.e {
  rotate: 7deg;
  right: -17px;
  top: 55px;
}
.whisker.f {
  rotate: -7deg;
  right: -17px;
  top: 43px;
}
.mouth .left,
.mouth .right {
  --color: #574137;
  border-left: 5px solid var(--color);
  border-bottom: 5px solid var(--color);
  border-right: 5px solid var(--color);
  border-radius: 0px 0px 150px 100px;

  width: 13px;
  height: 7px;
}
.mouth .left {
  left: 46px;
  bottom: 30px;
  rotate: -25deg;
}
.mouth .right {
  right: 50.8px;
  bottom: 30px;
  rotate: 25deg;
  transform: scaleX(-1);
}

.mouth .center {
  top: 0;
  left: 62px;
  height: 50px;
  width: 4px;
  background: #574137;
}
.mouth .center.b {
  top: 0;
  left: 65px;
  height: 50px;
  width: 4px;
}
.mouth .center.c {
  top: 30px;
  left: 61.5px;
  height: 32px;
  width: 6px;
  transform-origin: left center;
  rotate: 2deg;
}
.mouth .center.d {
  top: 30px;
  left: 65px;
  height: 32px;
  width: 4px;
  transform-origin: right center;
  rotate: -2deg;
}

/* HELPER */
.absolute {
  position: absolute;
}

.wobble-hor-bottom {
  animation: var(--ear-animation);
}

/* ----------------------------------------------
 * Generated by Animista on 2024-3-23 1:59:55
 * Licensed under FreeBSD License.
 * See http://animista.net/license for more info. 
 * w: http://animista.net, t: @cssanimista
 * ---------------------------------------------- */

/**
 * ----------------------------------------
 * animation wobble-hor-bottom
 * ----------------------------------------
 */
@keyframes wobble-hor-bottom {
  0%,
  100% {
    transform: translateX(0%);
    transform-origin: 50% 50%;
  }
  15% {
    transform: translateX(-15px) rotate(-3deg);
  }
  30% {
    transform: translateX(10px) rotate(3deg);
  }
  45% {
    transform: translateX(-10px) rotate(-2.6deg);
  }
  60% {
    transform: translateX(4px) rotate(1.4deg);
  }
  75% {
    transform: translateX(-2px) rotate(-0.8deg);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.