<div class="mickey" role="img" aria-label="Black-and-white head of Mickey Mouse">
  <div class="mickey__ear-right"></div>
  <div class="mickey__ear-left"></div>
  <div class="mickey__head"></div>
  <div class="mickey__mouth-back-right"></div>
  <div class="mickey__mouth-back-left"></div>
  <div class="mickey__lip"></div>
  <div class="mickey__mouth-bottom"></div>
  <div class="mickey__mouth-top"></div>
  <div class="mickey__tongue"></div>
  <div class="mickey__eye-back-right"></div>
  <div class="mickey__eye-back-left"></div>
  <div class="mickey__dimple-right"></div>
  <div class="mickey__dimple-left"></div>
  <div class="mickey__eye-front-right"></div>
  <div class="mickey__eye-front-left"></div>
  <div class="mickey__nose-back"></div>
  <div class="mickey__nose-middle"></div>
  <div class="mickey__nose-front"></div>
</div>

* {
  border: 0;
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
:root {
  --hue: 223;
  --bg: hsl(var(--hue),10%,50%);
  --fg: hsl(var(--hue),10%,10%);
  --trans-dur: 0.3s;
  font-size: calc(32px + (48 - 32) * (100vw - 320px) / (2560 - 320));
}
body {
  background-color: var(--bg);
  color: var(--fg);
  display: flex;
  font: 1em/1.5 sans-serif;
  height: 100vh;
}
.mickey {
  --x: 0;
  --x-abs: 0;
  --y: 0;
  --y-abs: 0;
  margin: auto;
  position: relative;
  width: 7.85em;
  height: 6.85em;
}
.mickey div {
  position: absolute;
}
.mickey__ear-right,
.mickey__ear-left,
.mickey__head {
  background-color: #000;
}
.mickey__ear-right,
.mickey__ear-left {
  border-radius: 50%;
  top: 0.175em;
  width: 3em;
  height: 2.55em;
}
.mickey__ear-right {
  left: -0.1em;
  transform: translate(calc(var(--x) * -0.35em),calc(var(--y) * -0.35em)) rotate(-45deg);
}
.mickey__ear-left {
  right: -0.1em;
  transform: translate(calc(var(--x) * -0.35em),calc(var(--y) * -0.35em)) rotate(45deg);
}
.mickey__head {
  border-radius: 50% 50% 50% 50% / 2.5em 2.5em 2.15em 2.15em;
  top: 1.55em;
  left: calc(50% - 2.525em);
  width: 5.05em;
  height: 4.65em;
  transform: translate(calc(var(--x) * -0.25em),calc(var(--y) * -0.25em));
}
.mickey__eye-back-right,
.mickey__eye-back-left,
.mickey__mouth-back-right,
.mickey__mouth-back-left,
.mickey__mouth-top,
.mickey__lip,
.mickey__nose-back,
.mickey__nose-middle {
  background-color: #fff;
}
.mickey__eye-back-right,
.mickey__eye-back-left {
  top: 1.85em;
  width: 1.9em;
  height: 3em;
  transform: translate(calc(var(--x) * -0.22em),calc(var(--y) * -0.22em));
}
.mickey__eye-back-right {
  border-radius: 50% 50% 0 60% / 40% 50% 0 60%;
  left: 2.2em;
}
.mickey__eye-back-left {
  border-radius: 50% 50% 60% 0 / 50% 40% 60% 0;
  right: 2.2em;
}
.mickey__eye-front-right,
.mickey__eye-front-left {
  background-color: #000;
  border-radius: 50%;
  top: 2.95em;
  width: 0.55em;
  height: 1.35em;
  transform: translate(calc(var(--x) * 0.07em),calc(var(--y) * 0.07em));
}
.mickey__eye-front-right {
  left: 3.2em;
}
.mickey__eye-front-left {
  right: 3.2em;
}
.mickey__mouth-back-right,
.mickey__mouth-back-left {
  border-radius: 50%;
  box-shadow: 0 0 0 0.05em #000;
  top: 4.35em;
  width: 2.8em;
  height: 1.5em;
}
.mickey__mouth-back-right {
  left: 1.15em;
  transform: translate(calc(var(--x) * -0.08em),calc(var(--y) * 0.1em)) scale(calc(1 + var(--x-abs) * 0.13),1) rotate(55deg);
}
.mickey__mouth-back-left {
  right: 1.15em;
  transform: translate(calc(var(--x) * -0.08em),calc(var(--y) * 0.1em)) scale(calc(1 + var(--x-abs) * 0.13),1) rotate(-55deg);
}
.mickey__mouth-top,
.mickey__mouth-bottom {
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  transform: translate(calc(var(--x) * 0.1em),calc(var(--y) * 0.1em));
}
.mickey__mouth-top {
  box-shadow: 0 0.1em 0 #000;
  clip-path: polygon(0 0.3em,100% 0.3em,100% 100%,0 100%);
  top: 4em;
  left: 1.9em;
  width: 4.05em;
  height: 1.7em;
}
.mickey__mouth-bottom {
  background-color: #000;
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  clip-path: polygon(0 1.1em,100% 1.1em,100% 100%,0 100%);
  top: 3.25em;
  left: 2em;
  width: 3.85em;
  height: 3.3em;
}
.mickey__lip {
  border-radius: 0 0 50% 50% / 0 0 100% 100%;
  box-shadow: 0 -0.05em 0 #000 inset;
  clip-path: polygon(0 0.8em,100% 0.8em,100% 100%,0 100%);
  top: 5.05em;
  left: 2.4em;
  width: 3.05em;
  height: 1.8em;
  transform: translate(calc(var(--x) * 0.12em),calc(var(--y) * 0.12em));
}
.mickey__tongue {
  border-radius: 0 0 100% 100% / 0 0 100% 100%;
  overflow: hidden;
  top: 5.9em;
  left: 3.225em;
  width: 1.4em;
  height: 0.56em;
  transform: translate(calc(var(--x) * 0.11em),calc(var(--y) * 0.11em));
}
.mickey__tongue:before,
.mickey__tongue:after {
  background-color: #fff;
  border-radius: 50% 50% 0 0;
  content: "";
  display: block;
  position: absolute;
  width: 0.875em;
  height: inherit;
}
.mickey__tongue:after {
  right: 0;
}
.mickey__dimple-right,
.mickey__dimple-left {
  border-radius: 50%;
  box-shadow: 0 0.05em 0 #000 inset;
  top: 4.25em;
  width: 0.3em;
  height: 0.2em;
}
.mickey__dimple-right {
  left: 1.775em;
  transform: translate(calc(var(--x) * 0.1em),calc(var(--y) * 0.1em)) rotate(-30deg);
}
.mickey__dimple-left {
  right: 1.775em;
  transform: translate(calc(var(--x) * 0.1em),calc(var(--y) * 0.1em)) rotate(30deg);
}
.mickey__nose-back {
  border-radius: 50%;
  top: 4.15em;
  left: 2.925em;
  width: 2em;
  height: 0.9em;
  transform: translate(calc(var(--x) * 0.4em),calc(var(--y) * 0.4em));
}
.mickey__nose-middle {
  border-radius: 50% 50% 50% 50% / 0.32em 0.32em 0.68em 0.68em;
  box-shadow: 0 0.05em 0 #000 inset;
  top: 4.05em;
  left: 3.065em;
  width: 1.72em;
  height: 1em;
  transform: translate(calc(var(--x) * 0.4em),calc(var(--y) * 0.4em));
}
.mickey__nose-front {
  background-color: #000;
  border-radius: 50%;
  top: 4.32em;
  left: 3.4em;
  width: 1.1em;
  height: 0.7em;
  transform: translate(calc(var(--x) * 0.7em),calc(var(--y) * 0.7em));
}

window.addEventListener("DOMContentLoaded",() => {
  const mm = new MickeyMouse(".mickey");
});

class MickeyMouse {
  constructor(el) {
    this.el = document.querySelector(el);

    this.init();
  }
  get isMobile() {
    return "ontouchstart" in document.documentElement;
  }
  get maxDistance() {
    const { innerWidth, innerHeight } = window;

    if (innerWidth > innerHeight) return innerWidth / 2;
    return innerHeight / 2;
  }
  init() {
    const moveEvent = this.isMobile ? "touchmove" : "mousemove";

    document.addEventListener(moveEvent,this.update.bind(this));

    if (this.isMobile) document.addEventListener("touchstart",this.update.bind(this));
  }
  update(e) {
    let eX = 0
    let eY = 0;

    if (this.isMobile) {
      const firstTouch = e.touches[0];
      eX = firstTouch.clientX;
      eY = firstTouch.clientY;  
    } else {
      eX = e.clientX;
      eY = e.clientY;
    }

    const x = Math.round(eX - window.innerWidth / 2);
    const y = Math.round(eY - window.innerHeight / 2);
    const max = this.maxDistance;
    const percentX = x / max;
    const percentY = y / max;

    this.el?.style.setProperty("--x",percentX);
    this.el?.style.setProperty("--x-abs",Math.abs(percentX));
    this.el?.style.setProperty("--y",percentY);
    this.el?.style.setProperty("--y-abs",Math.abs(percentY));
  }
}