<!-- https://www.youtube.com/watch?v=Sftw1qKo_n0 -->

<div class="y-1">
  <div class="y-2"></div>
</div>
<div class="y-3">
  <div class="y-4"></div>
</div>

body {
  display: flex;
  align-items: center;
  justify-content: space-around;
  height: 100vh;
}
.y-1, .y-3 {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  border: 3px solid navy;
  position: relative;
  float: left;
}
.y-2, .y-4 {
  width: 30px;
  height: 30px;
  background-color: green;
  position: absolute;
  left: 70px;
  bottom: 35px;
  border-radius: 100%;
}

document.addEventListener('DOMContentLoaded', () => {
  let eye1 = document.querySelector('.y-1');
  let eye2 = document.querySelector('.y-3');
  document.onmousemove = function (event) {
    let coord = eye1.getBoundingClientRect();
    let cx = coord.left + coord.width/2;
    let cy = coord.top + coord.height/2;
    let x = event.x - cx;
    let y = event.y - cy;

    let coord2 = eye2.getBoundingClientRect();
    let cx2 = coord2.left + coord2.width/2;
    let cy2 = coord2.top + coord2.height/2;
    let x2 = event.x - cx2;
    let y2 = event.y - cy2;

    document.querySelector('.y-1').style.transform = 'rotate(' + 57.2958 * arcctg(x,y) + 'deg';
    document.querySelector('.y-3').style.transform = 'rotate(' + 57.2958 * arcctg(x2,y2) + 'deg';

    function arcctg(x,y) {
      if (x > 0 && y > 0) return Math.PI / 2 - Math.atan(x / y);
      if (x < 0 && y > 0) return Math.PI / 2 - Math.atan(x / y);
      if (x < 0 && y < 0) return Math.PI + Math.atan(y / x);
      if (x > 0 && y < 0) return 3 * Math.PI / 2 + Math.abs(Math.atan(x / y));
    }
  }
});