JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
<div id="screen">
    <canvas id="canvas" height="480" width="768"></canvas>
    <div id="center"></div>
</div>

CSS

html, body {
        margin: 0;
        padding: 0;
    }
    #canvas,
    #screen {
        width: 768px;
        height: 480px;
        background: black;
        position: relative;
        overflow: hidden;
        cursor: none;
    }
    #center {
        position: absolute;
        top: 50%;
        left: 50%;
        width: 40px;
        height: 40px;
        margin: -20px 0 0 -20px;
        background:...

JavaScript

function angle(ax, ay, bx, by) {
        var dy = by - ay;
        var dx = bx - ax;
        var theta = Math.atan2(dy, dx); // range (-PI, PI]
        theta *= 180 / Math.PI; // rads to degs, range (-180, 180]
        return theta;
    }
    function angle360(cx, cy, ex, ey) {
        var theta = angle(cx, cy, ex, ey); // range (-180, 180]
        if (theta < 0) theta = 360 + theta; // range [0, 360)
        return theta;
    }
    var shape = document.getElementById('canvas').getContext('2d');
    function midpoint(ax, ay, bx, by, per, off) {
        let a = angle360(ax, ay, bx, by);
        a = a + off;
        radians = a * (Math.PI/180);
        x = ax + Math.cos(radians) * 30;
        y = ay + Math.sin(radians) * 30;
        let mid = [x, y];
        return mid;
    }
    function draw(pointA, pointB) {
        shape.clearRect(0, 0, 768, 480);
        shape.beginPath();
        shape.fillStyle = 'rgba(255,255,255,0.2)';
        shape.moveTo(pointA.x,pointA.y);
        let mid = midpoint(pointA.x, pointA.y, pointB.x, pointB.y, 0.3, -30);
        shape.lineTo(mid[0],mid[1]);
        let a = angle360(pointA.x, pointA.y, pointB.x, pointB.y) + 90;
        $('#center').css({
            'transform': 'rotateZ('+a+'deg)'
        });
        shape.lineTo(pointB.x,pointB.y);
        let mid2 = midpoint(pointA.x, pointA.y, pointB.x, pointB.y, 0.3, 30);
        shape.lineTo(mid2[0],mid2[1]);
        shape.lineTo(pointA.x,pointA.y);
        shape.stroke();
        shape.closePath();
        shape.fill();
    }
    let screen = $('#screen');
    let pointA = {
        x: screen.width() / 2,
        y: screen.height() / 2
    };
    let pointB = {
        x: screen.width() / 2,
        y: screen.height() / 2
    };
    screen.on('mousemove', function (event) {
        pointB = {
            x: event.originalEvent.clientX,
            y: event.originalEvent.clientY
        };
        draw(pointA, pointB);
    });