JSFiddle - React, Tailwind, and code Playground

HTML

<div class='area'>
  <div class='block A'>A</div>
  <div class='block B'>B</div>
  <div class='block C'>C</div>
    
  <div class='center'></div>
  <canvas id='canvas' width='400px' height='400px'></canvas>
</div>

CSS

.area {
    position: relative;
    width: 400px;
    height: 400px;
}

.block {
    position: absolute;
    display: block;

    margin: -10px 0 0 -10px;
    
    text-align: center;
    
    width: 20px;
    height: 20px;
    
    border: 1px solid #333;
}

.center {
    position: absolute;
    top: 197px;
    left: 197px;
    width: 4px;
    height: 4px;
    border-radius: 2px;
    border: 1px solid #333;
}

JavaScript

var l = 150,
    pos = { x: null, y: null },
    $doc = $(document),
    ctx,
    $blocks = $('.block');

var x = function(angle) {
        return Math.cos(Math.PI * angle / 180);
    },
    y = function(angle) {
        return Math.sin(Math.PI * angle / 180);
    },
    init = function() {
        $blocks.each(function() {
            var $this = $(this),
                
                i = Math.round(Math.random()*360);
            
            $this.css({
                top: l*x(i) + 200,
                left: l*y(i) +200
            });
        });
    },
    update = function() {
        var x, y, $this;
        ctx.clearRect(0,0,400,400);
        ctx.beginPath();
        $blocks.each(function() {
            $this = $(this);

            x = $this.css('left');
            y = $this.css('top');
            
            ctx.moveTo(200, 200);
            ctx.lineTo(parseFloat(x), parseFloat(y));
        });
        ctx.stroke();
    },
    up = function() {
        $doc.unbind('mousemove')
    },
    move = function(e) {
        
        X = e.clientX - 200;
        Y = e.clientY - 200;
        
        C = Math.sqrt(X*X+Y*Y);
        
        x1 = l*(X/C)+200;
        y1 = l*(Y/C)+200;

        pos.target.css({ top: y1, left: x1})  
       
        update();
    },
    down = function(e) {
        pos.x = e.clientX;
        pos.y = e.clientY;
        pos.target = $(this);
        
        $doc.mouseup(up)
            .mousemove(move);
    };
    
$blocks
.mousedown(down)
    
.mouseup(function() {
           
});

ctx = document.getElementById('canvas').getContext('2d');

init();
update();

//for (var i = 0; i < 360; i++) {
//    ctx.beginPath();
//    ctx.moveTo(200, 200);
//    ctx.lineTo(l*x(i)+200, l*y(i)+200);
//    ctx.stroke();
//}