JSFiddle - React, Tailwind, and code Playground

by Gregor Adams

HTML

<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<div id="holder"></div>

CSS

#holder {
            background-color: #333;
}

JavaScript

var r = Raphael("holder", window.innerWidth, window.innerHeight)

    function findReflected(coord, about) {
        var diff = about - coord;
        return about + diff;
    }

    function curve(x1, y1, cx1, cy1, cx2, cy2, x2, y2, cx3, cy3, x3, y3, color) { //zx --x1
        var cx2b = findReflected(cx2, x2),
            cy2b = findReflected(cy2, y2),
            path = [
                ["M", x1, y1],
                ["C", cx1, cy1, cx2, cy2, x2, y2, "S", cx3, cy3, x3, y3]
            ],
            path2 = [
                ["M", x1, y1],
                ["L", cx1, cy1],
                ["M", cx2, cy2],
                ["L", cx2b, cy2b],
                ["M", x3, y3],
                ['L', cx3, cy3]
            ],
            curve = r.path(path).attr({
                stroke: color || Raphael.getColor(),
                "stroke-width": 4,
                "stroke-linecap": "round"
            }),
            controls = r.set(
            r.path(path2).attr({
                stroke: "none"
            }),
            r.circle(x1, y1, 7).attr({
                fill: "#ccc",
                stroke: "none"
            }),
            r.circle(cx1, cy1, 5).attr({
                fill: "transparent",
                stroke: "none"
            }),
            r.circle(cx2, cy2, 5).attr({
                fill: "transparent",
                stroke: "none"
            }),
            r.circle(x2, y2, 5).attr({
                fill: "transparent",
                stroke: "none"
            }),
            r.circle(cx2b, cy2b, 5).attr({
                fill: "transparent",
                stroke: "none"
            }),
            r.circle(cx3, cy3, 5).attr({
                fill: "transparent",
                stroke: "none"
            }),
            r.circle(x3, y3, 7).attr({
                fill: "#ccc",
                stroke: "none"
            })

            );
        controls[1].update = function (x, y) {
            var X = this.attr("cx") + x,
            ...