JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js"></script>
<body>
    <div id="canvas">
    </div>


</body>

CSS

svg path {
  stroke-width: 1px;
}
body {
  background-color: #BADA55;
}
.wrapper {
  clip-path: url("#clipping");
}
#canvas {
  width: 100%;
  height: 100%;
}

JavaScript

var $ = jQuery;
var vpw = $(window).width();
var vph = $(window).height();
var unit = vpw / 100;

var rad = [ 
    {x: 3,  y: 9}, 
    {x: 0,  y: 6}, 
    {x: 0,  y: 3}, 
    {x: 3,  y: 0}, 
    {x: 6,  y: 0}, 
    {x: 9,  y: 3}, 
    {x: 9,  y: 6}, 
    {x: 6,  y: 9}, 
];

var R = Raphael(0, 0, vpw, vph);
R.setViewBox(0, 0, vpw, vph);

this.start = function() {
    if (this.reference.static) return;
    //this.original_x = Raphael.parseTransformString(this.attr("transform"))[0][1];
    //this.original_y = Raphael.parseTransformString(this.attr("transform"))[0][2];
    this.animate({r: 70, opacity: 0.25}, 500, ">");
};

this.move = function(dx, dy) {
    var ts = Raphael.parseTransformString(this.attr("transform"));
    ts[0][1] = this.original_x + dx; 
    ts[0][2] = this.original_y + dy; 
    this.attr({transform: ts.toString()});
};

this.up = function() {
    var ts; 

    var transformString = "t" + this.original_x + "," + this.original_y;
    this.attr("transform", transformString);
    console.log("transformString: " + transformString);
    console.log("transformAttrib: " + this.attr("transform"));

    this.attr({fill: "#fff"});
    this.animate({r: 50, opacity: 1}, 500, ">");
};

// Forms
function Form(x, y, fid, type) {
    var path;
    if (type == "dom") {
        path = dom;
    } else if (type == "rad") {
        path = rad;
    }   
    // SVG Path
    var svgPath = "M" + unit * path[0].x + "," + unit * path[0].y;
    for (var i = 1; i < path.length; i++) {
        svgPath += "L" + unit * path[i].x + "," + unit * path[i].y;
    }   
    svgPath += "z";
    this.raph = R.path(svgPath).attr({
        stroke: "hsb(0, 1, 1)",
        fill: "#fff", 
        opacity: 1.0, 
        cx: 100, 
        cy: 900 
    }).transform("t" + x + "," + y); 
    
    this.raph.original_x = x;
    this.raph.original_y = y;

    this.index = fid;
    this.static = false;
    this.type = type;

    var that = this;
    this.raph.reference = that;

}

var forms =...