JSFiddle - React, Tailwind, and code Playground

HTML

Draggable heart. Resize by grabbing blue box.
<div id="infobox">Draggable heart. Resize by grabbing blue box.</div>
<div id="ctx"></div>

JavaScript

window.onload = function() {
    var ctx = Raphael("ctx", 736, 500);
        // an example heart-shaped path, 
        // 128 pixels wide, origin at 0,0
    var heartPath="M64,20c0,0,8-20,32-20c28,0,32,20,32,36c0,48-64,92-64,92S0,84,0,36C0,20,8,0,32,0 S64,20,64,20z";
    
    
    var p = ctx.rect(50, 50, 128, 128).attr({
        fill: "#9BCAE1",
        stroke: "none",
        });
    var s = ctx.rect(128, 128, 10, 10).attr({
        fill: "#9BCAE1",
        stroke: "none",
        });
    
    //p.transform("t50,50S1,1");
    //s.transform("t50,50S1,1");
    // start, move, and up are the drag functions
    pstart = function (x,y) {
        
        this.attr({fill: "#EF8880"});
        // storing original coordinates
        var box = this.getBBox();
        this.ox = 0;
        this.oy = 0;
        this.ow = box.width;
        this.oh = box.height;
        var w = ctx.getById(0).attr("width");
        var h = ctx.getById(0).attr("height");
        //alert(w+" - "+h);
                // scale is current size/original size
                // store scale as a transform string
        this.scale = ["s" + this.ow/w, this.oh/h,0,0].join(",");
                // resize box in lower right corner:
        this.sizer.ox = this.sizer.attr("x");
        this.sizer.oy = this.sizer.attr("y");
        this.sizer.attr({opacity: .3});
    },
    pmove = function (dx, dy) {
        // move will be called with dx and dy
        // use transform to do the moving, add on the scale string
        document.getElementById("infobox").textContent = this.ox+" - "+dx;  
        this.transform(Raphael.format("t{0},{1}{2}",(this.ox+dx),(this.oy+dy),this.scale));
        this.sizer.attr({x: this.sizer.ox + dx, y: this.sizer.oy + dy});       
    },
    pup = function () {
     
        this.ox=this.ox+this.dx;
        this.oy=this.oy+this.dy;
        
        // restoring state
        this.attr({fill: "#BA2A29"});  
        this.sizer.attr({opacity: 1});        
    },
    rstart =...