JSFiddle - React, Tailwind, and code Playground

by sreenathn

HTML

<script src="https://cdn.rawgit.com/wout/svg.draggable.js/master/svg.draggable.min.js"></script>
<script src="https://cdn.rawgit.com/wout/svg.import.js/master/svg.import.min.js"></script>
<script src="https://cdn.rawgit.com/wout/svg.absorb.js/master/svg.absorb.min.js"></script>
<div id="drawing" width="800" height="800"></div>

JavaScript

var canvasWidth = 800;
var canvasHeight = 800;
var draw = SVG('drawing').size(canvasWidth, canvasHeight);

function resize(baseWidth, baseHeight, elementWidth, elementHeight) {
    if (elementWidth > elementHeight) {
        scale = baseWidth / elementWidth;
    } else {
        scale = baseHeight / elementHeight;
    }
    return [elementWidth * scale, elementHeight * scale];
};

var poster = '<?xml version="1.0" encoding="UTF-8"?> \
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="190pt" height="176pt" viewBox="0 0 190 176" version="1.1"> \
<defs> \
<clipPath id="clip1"> \
  <path d="M 28 20 L 162 20 L 162 154 L 28 154 Z "/> \
</clipPath> \
<clipPath id="clip2"> \
  <path d="M 95.34375 153.902344 C 58.597656 153.902344 28.8125 124.113281 28.8125 87.371094 C 28.8125 50.628906 58.597656 20.839844 95.34375 20.839844 C 132.085938 20.839844 161.871094 50.628906 161.871094 87.371094 C 161.871094 124.113281 132.085938 153.902344 95.34375 153.902344 "/> \
</clipPath> \
<clipPath id="clip3"> \
  <path d="M 95.34375 153.902344 C 58.597656 153.902344 28.8125 124.113281 28.8125 87.371094 C 28.8125 50.628906 58.597656 20.839844 95.34375 20.839844 C 132.085938 20.839844 161.871094 50.628906 161.871094 87.371094 C 161.871094 124.113281 132.085938 153.902344 95.34375 153.902344 "/> \
</clipPath> \
<radialGradient id="radial0" gradientUnits="userSpaceOnUse" cx="0" cy="0" fx="0" fy="0" r="1" gradientTransform="matrix(66.5291,0,0,66.5291,95.3418,87.3711)"> \
<stop offset="0" style="stop-color:rgb(0%,0%,0%);stop-opacity:0;"/> \
<stop offset="0.752809" style="stop-color:rgb(0%,0%,0%);stop-opacity:0;"/> \
<stop offset="0.752809" style="stop-color:rgb(92.224121%,13.500977%,17.396545%);stop-opacity:1;"/> \
<stop offset="0.753775" style="stop-color:rgb(92.079163%,13.520813%,17.41333%);stop-opacity:1;"/> \
<stop offset="0.75474" style="stop-color:rgb(92.022705%,13.548279%,17.417908%);stop-opacity:1;"/> \
<stop offset="0.755706"...