JSFiddle - React, Tailwind, and code Playground

JavaScript

var R = Raphael(10, 10, 400, 400);

var l = R.path("M200 100L200 100L200 200");
l.attr({
    stroke: 'red',
    'stroke-width': 4
});

var c = R.circle(200, 200, 10).attr({
    fill: 'white',
    stroke: 'red',
    'stroke-width': 4
});

function move(dx, dy) {
    var x = 200 + dx, y = 200 + dy; 
    this.attr({cx: x, cy: y});
    l.attr({path: "M200 100L"+x+" "+y+"L200 100"});
}
function start() {
    c.stop();
    l.stop();
}
function end() {
    this.animate({cx: 200, cy: 200}, 2000, "elastic");
    l.animate({path: "M200 100L200 200L200 100"},
             2000, "elastic");
}
c.drag(move, start, end);

// Example by http://stackoverflow.com/users/613198/rsp
// for http://stackoverflow.com/questions/5335728