<div id="artboard">
  <div class="hair">
  </div>
  <div class="features">
    <div class="face"></div>
    <div class="hair__forehead"></div>
    <div class="eyebrow eyebrow__left"></div>
    <div class="eye eye__left">
      <div class="iris"></div>
    </div>
    <div class="eyebrow eyebrow__right"></div>
    <div class="eye eye__right">
      <div class="iris"></div>
    </div>
    <div class="ear ear__left"></div>
    <div class="ear ear__right"></div>
    <div class="nose"></div>
    <div class="mouth"></div>
    <div class="neck"></div>
    <div class="neck__round"></div>
    <div class="shirt"></div>
  </div>
</div>
body {
  background-color: #efefef;
}

#artboard {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.hair {
  position: relative;
  top: 10px;
  width: 220px;
  height: 360px;
  background-color: #e8ab4e;
  background: linear-gradient(0deg, #e8ab4e, #e09e47);
  border-radius: 35% 35% 16% 16%;
  z-index: 2;
}

.hair__forehead {
  position: absolute;
  top: -20px;
  left: -5px;
  width: 160px;
  height: 45px;
  transform: rotate(-5deg);
  border-radius: 0 0 50% 50%;
  background-color: #e09e47;
  z-index: 8;
}

.features {
  position: absolute;
  width: 160px;
  height: 220px;
}

.face {
  position: absolute;
  width: 160px;
  height: 200px;
  border-radius: 20% 20% 50% 50%;
  background-color: #f5ddb9;
  z-index: 4;
}

.eyebrow {
  position: absolute;
  top: 32px;
  width: 35px;
  height: 6px;
  clip-path: inset(1px 0);
  border-radius: 40% 40% 50% 50%;
  z-index: 6;
  background-color: #e8ab4e;
}

.eyebrow__left {
  left: 30px;
  transform: rotate(-4deg);
}

.eyebrow__right {
  right: 40px;
  transform: rotate(4deg);
}

.eye {
  position: absolute;
  top: 45px;
  width: 24px;
  height: 32px;
  border-radius: 45% 45% 50% 50%;
  background-color: #efefef;
  overflow: hidden;
  z-index: 6;
}

.eye__left {
  left: 38px;
}

.iris {
  width: 12px;
  height: 16px;
  background-color: #304d6b;
  border-radius: 50%;
  position: absolute;
  top: 0;
  left: 0;
}

.eye__right {
  right: 44px;
}

.nose {
  position: absolute;
  top: 90px;
  left: 0;
  right: 5px;
  margin: 0 auto;
  width: 20px;
  height: 22px;
  opacity: 0.75;
  background-color: #dfc7a3;
  border-radius: 25% 10% 25% 50%;
  background: linear-gradient(45deg, #dfc7a3, transparent);
  z-index: 6;
}

.ear {
  position: absolute;
  top: 65px;
  width: 16px;
  height: 22px;
  opacity: 0.5;
  background-color: #dfc7a3;
  z-index: 6;
}

.ear__left {
  left: -10px;
  border-radius: 20% 0 0 50%;
  background: linear-gradient(90deg, #dfc7a3, #dfc7a3, transparent);
}

.ear__right {
  right: -10px;
  border-radius: 0 20% 50% 0;
  background: linear-gradient(270deg, #dfc7a3, #dfc7a3, transparent);
}

.mouth {
  position: absolute;
  left: 0;
  right: 0;
  margin: 0 auto;
  top: 140px;
  width: 40px;
  height: 24px;
  background-color: #efefef;
  border-radius: 10% 10% 50% 50%;
  z-index: 6;
}

.neck {
  position: absolute;
  top: 180px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 65px;
  height: 70px;
  border-radius: 20% 20% 30% 30%;
  background-color: #ead2ad;
  z-index: 2;
}

.neck__round {
  position: absolute;
  top: 200px;
  left: 0;
  right: 0;
  margin: 0 auto;
  width: 65px;
  height: 65px;
  border-radius: 50%;
  background-color: #ead2ad;
  z-index: 10;
}

.shirt {
  clip-path: inset(10px 0 0 0);
  position: absolute;
  top: 220px;
  left: -20px;
  width: 200px;
  height: 160px;
  border-radius: 50% 50% 10% 10%;
  background-color: #95b2c0;
  z-index: 8;
}
(function () {
  document.onmousemove = handleMouseMove;
  function handleMouseMove(event) {
    const face = document.getElementsByClassName("face")[0];
    const forehead = document.getElementsByClassName("hair__forehead")[0];
    const irides = document.getElementsByClassName("iris");
    const vw = Math.max(
      document.documentElement.clientWidth,
      window.innerWidth || 0
    );
    const vh = Math.max(
      document.documentElement.clientHeight,
      window.innerHeight || 0
    );
    let eventDoc, doc, body;
    event = event || window.event;

    const iris_top = (event.pageY / vh) * 20;
    const iris_left = (event.pageX / vw) * 12;

    Array.prototype.map.call(irides, (x) => {
      x.style.top = iris_top + "px";
      x.style.left = iris_left + "px";
    });

    const face_skewX = (event.pageX / vw) * 3;
    const face_skewY = (event.pageY / vh) * 3;
    face.style.transform = `skew(${face_skewX}deg, ${face_skewY}deg)`;

    const forehead_rotate = (event.pageX / vw) * 5;
    forehead.style.transform = `rotate(${face_skewX}deg)`;
  }
})();

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.