JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css">
<div class="wrapper"></div>

JavaScript

$(document).ready(function () {
    console.log("ready!");

    var pdefs = {
        circle: {
            path: Raphael._getPath.circle({
                attrs: {
                    cx: 130,
                    cy: 320,
                    r: 100
                }
            }),
            transform: 'r90'
        }
    },
    useDef = 'circle';




    $(function () {
        var paper = Raphael($('.wrapper')[0], 600, 600),

            path = paper.path(Raphael.transformPath(pdefs[useDef].path, pdefs[useDef].transform))
                .attr('stroke-width', 5)
                .attr('stroke', 'rgb(80,80,80)'),

            knob = paper.ellipse(0, 0, 22, 12)
                .attr('fill', '#ddd')
                .attr('stroke', 'rgba(80,80,80,0.3)'),

            $shim = $('<div>')
                .css({
                position: 'absolute',
                width: 50,
                height: 50
            })
                .appendTo($('.wrapper')),

            len = path.getTotalLength(),
            bb = path.getBBox(),
            mid = {
                x: bb.x + bb.width / 2,
                y: bb.y + bb.height / 2
            },

            pal = path.getPointAtLength(0);

        knob.translate(pal.x, pal.y).rotate(pal.alpha);
        $shim.css({
            left: pal.x - 25,
            top: pal.y - 25,
            cursor: 'pointer'
        });

        //var path_circle =
        var path_circle = 'M80,80a40,40 0 1,0 80,0a40,40 0 1,0 -80,0'
        var path_square = 'M80,120l80,0 0,-80 -80,0Z'
        var path_ellipse = 'M88,80a32,44 0 1,0 64,0a32,44 0 1,0 -64,0'

        //object to be morphed, starts as a circle
        var morphing_shape = paper.path(path_circle).attr({
            stroke: "#8FB26B",
                "stroke-width": 4
        });

        //circle outside ring slider
        paper.path('M260,300a20,20 0 1,0 40,0a20,20 0 1,0 -40,0').attr({
            stroke: "#333",
                "stroke-width": 2
        });

        //square...