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_t = this.transform();
    this.animate({r: 70, opacity: 0.25}, 500, ">");
};

this.move = function(dx, dy) {
    this.transform( this.original_t + 't' + dx + ',' + dy);
};

this.up = function() {
    this.transform( this.original_t );
    console.log("transformString: " + this.original_t);
    console.log("transformAttrib: " + this.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.index = fid;
    this.static = false;
    this.type = type;

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

}

var forms = [];
forms.push(new Form(unit * 91, unit * 14, 1, "rad"));
forms.push(new Form(unit * 50, unit * 14, 2, "rad"));
for (var i = 0; i < forms.length; i++) {
    R.set(forms[i].raph).drag(move, start, up);
}