JSFiddle - React, Tailwind, and code Playground

JavaScript

var paper = Raphael(10, 50, 320, 200);
var path=paper.path("M189.25,73.25L190,73L192,70L195,65L197,60L200,53L204,48L207,43L209,40L210,38L211,38L213,38L214,39L215,41L216,43L216,45L217,45L218,46L219,49L219,50L219,51L220,52L220,53L221,55L222,56");

var box = paper.rect(path.getBBox().x,path.getBBox().y, 50, 50);
        box.attr({"stroke" : "#87CEFA","fill-opacity":0.8,"fill":"#87CEFA"});

var resizer = paper.circle(path.getBBox().x+50,path.getBBox().y+50,5);
resizer.attr({"fill":"white","cursor":"nw-resize"});
resizer.drag(moveScale,startScale,endScale);
resizer.pair = [box,path];

    function startScale(){
        var box = this.pair[0];
        bBox = box.getBBox();
        this.previewBox = box.clone();
        this.previewBox.attr({"stroke":"#6633FF", "fill":"none"});
        this.previewBox.ow = bBox.width;
        this.previewBox.oh = bBox.height;
        
        this.centerX = box.getBBox().x;
        this.centerY = box.getBBox().y;
    }
function moveScale(dx,dy){
    var scaleX = (this.previewBox.ow + dx)/(this.previewBox.ow);
    var scaleY = (this.previewBox.oh + dy)/(this.previewBox.oh);
    this.previewBox.scale(scaleX,scaleY,this.centerX,this.centerY);
}
function endScale(){
    var bBox = this.previewBox.getBBox();        
    var scaleX = bBox.width/this.previewBox.ow;
    var scaleY = bBox.height/this.previewBox.oh;
    this.pair[0].scale(scaleX,scaleY,this.centerX,this.centerY);
    
    this.pair[1].scale(scaleX,scaleY,this.centerX,this.centerY);
    
    this.attr({cx:bBox.x+bBox.width,cy:bBox.y + bBox.height});
    
    this.previewBox.remove();
       
}