<div class="container">
  <svg width="100" height="100" class="eye">
    <circle cx="50" cy="50" r="50" fill="white" class="eyeball_left" />
    <circle cx="50" cy="50" r="20" fill="#0D0D20" class="pupil_left" />
  </svg>
  <svg width="100" height="100" class="eye">
    <circle cx="50" cy="50" r="50" fill="white" class="eyeball_right" />
    <circle cx="50" cy="50" r="20" fill="#0D0D20" class="pupil_right" />
  </svg>
</div>

body {
  margin: 0;
  padding: 0;
  background: #282631;
  display: flex;
  width: 100%;
  height: 100vh;
}
.container {
  margin: auto;
  position: relative;
}
.container:after {
  content: "";
  width: 5em;
  height: 5px;
  display: block;
  position: relative;
  background: red;
  top: 5em;
  margin: auto;
}
.image {
  position: absolute;
  top: 250px;
  left: 620px;
  z-index: -1;
}
.pupil_left {
  position: relative;
}
.pupil_right {
  position: relative;
}

let eyeball_left = document.querySelector(".eyeball_left"),
  pupil_left = document.querySelector(".pupil_left"),
  eyeArea_left = eyeball_left.getBoundingClientRect(),
  pupil_leftArea = pupil_left.getBoundingClientRect(),
  R_left = eyeArea_left.width / 2,
  r_left = pupil_leftArea.width / 2,
  centerX_left = eyeArea_left.left + R_left,
  centerY_left = eyeArea_left.top + R_left;

let eyeball_right = document.querySelector(".eyeball_right"),
  pupil_right = document.querySelector(".pupil_right"),
  eyeArea_right = eyeball_right.getBoundingClientRect(),
  pupil_rightArea = pupil_right.getBoundingClientRect(),
  R_right = eyeArea_right.width / 2,
  r_right = pupil_rightArea.width / 2,
  centerX_right = eyeArea_right.left + R_right,
  centerY_right = eyeArea_right.top + R_right;

document.addEventListener("mousemove", (e) => {
  let x_left = e.clientX - centerX_left,
    y_left = e.clientY - centerY_left,
    theta_left = Math.atan2(y_left, x_left),
    angle_left = (theta_left * 180) / Math.PI + 360;

  let x_right = e.clientX - centerX_right,
    y_right = e.clientY - centerY_right,
    theta_right = Math.atan2(y_right, x_right),
    angle_right = (theta_right * 180) / Math.PI + 360;

  pupil_left.style.transform = `translateX(${R_left - r_left + "px"}) rotate(${
    angle_left + "deg"
  })`;
  pupil_left.style.transformOrigin = `${r_left + "px"} center`;

  pupil_right.style.transform = `translateX(${
    R_right - r_right + "px"
  }) rotate(${angle_right + "deg"})`;
  pupil_right.style.transformOrigin = `${r_right + "px"} center`;
});