JSFiddle - React, Tailwind, and code Playground

by Josan

HTML

Draggable heart. Resize by grabbing blue box.
<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.path(heartPath).attr({
        fill: "#BA2A29",
        stroke: "#3B2314",
        "stroke-width": 10,
        });
    var s = ctx.rect(118, 118, 10, 10).attr({
        fill: "#9BCAE1",
        stroke: "none",
        });
    
    // 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 = box.x;
        this.oy = box.y;
        this.ow = box.width;
        this.oh = box.height;
                // scale is current size/original size
                // store scale as a transform string
        this.scale = ["s" + this.ow/128, this.oh/128,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
        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 () {
        // restoring state
        this.attr({fill: "#BA2A29"});  
        this.sizer.attr({opacity: 1});        
    },
    rstart = function () {
        // storing original coordinates of the sizer
        this.ox = this.attr("x");
        this.oy = this.attr("y");
        // storing original coordinates of the path
        var box = this.shape.getBBox();
        this.shape.ox = box.x;
        this.shape.oy = box.y;
        this.shape.ow = box.width;
...