html{overflow-x: hidden;}
body{width: 100%;height: 100%;background: #613900;}
.face{width: 500px;height: 500px;background: #ffc400;border-radius: 50%;margin: 50px auto;overflow: hidden;}
.eye{width: 300px; height: 100px;display: flex;justify-content:space-between;margin: 100px auto;}
.eyes{width: 120px;height: 120px;background: white;border-radius: 50%;}
.mouth{width: 235px;height: 100px;background: #bc7500;border-radius:0 0 100px 100px;margin: 110px auto;transition: .5s;}
.eye .eyes::before{content: '';display: block;width: 60px;height: 60px;background: #323231;transform: translate(-50%, -50%);position: relative;top: 35%;border-radius: 50%;left: 55px;}
.face:hover .mouth{border-radius:0 ;height: 50px;}
<div class="face">
<div class="eye">
<div class="eyes"></div>
<div class="eyes"></div>
</div>
<div class="mouth"></div>
</div>
let eyes = document.querySelectorAll('.eyes')
document.onmousemove = function(event){
eyes.forEach((item, index) => {
var x = item.offsetLeft + item.clientWidth / 2;
var y = item.offsetTop + item.clientHeight / 2;
var rad = Math.atan2(event.pageX - x, event.pageY - y);
var rot = (rad * (180 / Math.PI) * -1) + 180;
item.style.transform = 'rotate(' + rot + 'deg)'
})
}