JSFiddle - React, Tailwind, and code Playground

by trolleymusic

HTML

<script src="https://raw.github.com/DmitryBaranovskiy/raphael/52bff469f60988f1391e8b3d7cb5349163df8ba1/raphael-min.js"></script>
<div id="base">
    <div id="blobby">Hello!</div>
</div>

CSS

#base {
    position: relative;
    width: 300px;
    height: 300px;
    background: rgba(0,0,255,0.3);
    margin: 10px;
}
#blobby {
    position: absolute;
    top: 10px;
    left: 10px;    
    width: 100px;
    height: 100px;
    border-radius: 40px;
    text-align: center;
    line-height: 100px;
    background: #00ff00;
}

JavaScript

var paper = Raphael(document.getElementById("base"), 300, 300);
var b = $('#blobby');

var a = {
    "fill" : b.css('background-color'),
    "x" : parseInt(b.css('left')) + 120,
    "y" : parseInt(b.css('top')) + 120,
    "stroke-opacity" : 0    
}


var shape = paper.rect(a.x, a.y, b.width(), b.height(), 40)

shape.attr(a)