Как сделать вращение стрелки за мышкой?
Как-то так:
snippet
Из описания вопроса не совсем понятно, какую именно логику следования стрелки за мышкой вы хотите получить (можно придумать разные варианты), но скорее всего вам нужно отталкиваться от логики вроде такой:
// Тут, конечно, лучше какие-нибудь id сделать для однозначности
const circle = document.querySelector('.circle');
const arrow = document.querySelector('.arrow');

document.addEventListener('mousemove', (e) => {    
    const circleRect = circle.getBoundingClientRect();
    const circleCenterX = circleRect.left + circle.offsetWidth / 2;
    const circleCenterY = circleRect.top + circle.offsetHeight / 2;
    const deltaX = e.clientX - circleCenterX;
    const deltaY = e.clientY - circleCenterY;
    const angleInRadians = Math.atan2(deltaY, deltaX) - Math.PI / 2;
    const angleInDegrees = 180 * angleInRadians / Math.PI;
    const angleFrom0To360 = (angleInDegrees + 360) % 360;
    const shouldEffectBeApplied = deltaY < 0;
    
    if (shouldEffectBeApplied) {
        arrow.style.transform = `rotate(${angleFrom0To360}deg)`;
    }
});
И еще в таких штуках всегда хорошо добавить какой-нибудь transition в CSS:
.arrow {
    transition: transform .1s linear;
}