JSFiddle - React, Tailwind, and code Playground

by dumptyd

HTML

<div class="container">
  <div class="object"></div>
</div>

SCSS

.container {
  height: 100vh;
  width: 100vw;
  background-color: #333;
  display: flex;
  align-items: center;
  justify-content: center;
}
.object {
  position: relative;
  width: 25%;
  padding-bottom: 25%;
  background-color: tomato;
  border-radius: 25%;
  
  &:after, &:before {
    content: '';
    height: 25%;
    width: 25%;
    background-color: #fff;
    position: absolute;
    top: calc(50% - 12.5%); left: 20%;
    border-radius: 50%;
  }
  &:before {
    left: auto;
    right: 20%;
  }
}

JavaScript

const box = document.querySelector('.object');
document.querySelector('.container').addEventListener('mousemove', e => {
	const [x, y] = [e.clientX, e.clientY];
  const rekt = box.getBoundingClientRect();
  const [cx, cy] = [rekt.x + (rekt.width / 2), rekt.y + (rekt.height / 2)];
  
  const [dx, dy] = [x - cx, y - cy];
 	const angle = Math.atan2(dy, dx) * (180 / Math.PI);
  
  box.style.transform = `rotate(${angle}deg)`;
});