JSFiddle - React, Tailwind, and code Playground

by kougiland

HTML

<div class="pointer">
    <div class="marker"></div>
</div>

CSS

.marker {
    background: #ED1C24;
height: 10px;
right: 0;
position: absolute;
top: 35px;
width: 10px;
border-radius: 100%;
cursor: pointer;
}
.pointer {
    height:72px;
    position:absolute;
    top:82px;
    width:72px;
    border:4px solid red;
    left:100px;
    border-radius:100%;
}

JavaScript

var img = $('.pointer');
var marker=$('.marker');
var offset = img.offset();

function mouse(evt) {
    var center_x = (offset.left) + (img.width() / 2);
    var center_y = (offset.top) + (img.height() / 2);
    var mouse_x = evt.pageX;
    var mouse_y = evt.pageY;
    var radians = Math.atan2(mouse_x - center_x, mouse_y - center_y);
    var degree = (radians * (180 / Math.PI) * -1) + 90;
    img.css('-webkit-transform', 'rotate(' + degree + 'deg)');
    img.css('-moz-transform', 'rotate(' + degree + 'deg)');
    img.css('transform', 'rotate(' + degree + 'deg)');
}

marker.mousedown(function (e) {
    $(document).mousemove(mouse);
});

$(document).mouseup(function() {
    $(document).off("mousemove");
});