JSFiddle - React, Tailwind, and code Playground

by Amol Tate

HTML

<script src="https://rawgit.com/DmitryBaranovskiy/raphael/master/raphael-min.js"></script>
 <body>
     
        <div id="holder"></div>
        <div id="form">
            <br/><br/>
            <select id="easingx">
                <option value="">Linear</option>
                <option value=">">Ease In</option>
                <option value="<">Ease Out</option>
                <option value="<>">Ease In and Out</option>
                <option value="bounce">Bounce</option>
                <option value="elastic">Elastic</option>
                <option value="backIn">Back In</option>
                <option value="backOut">Back Out</option>
            </select>
            <select id="easingy">
                <option value="">Linear</option>
                <option value=">">Ease In</option>
                <option value="<">Ease Out</option>
                <option value="<>">Ease In and Out</option>
                <option value="bounce">Bounce</option>
                <option value="elastic">Elastic</option>
                <option value="backIn">Back In</option>
                <option value="backOut">Back Out</option>
            </select>
            <button id="run">Run</button>
        </div>
      
    </body>

CSS

body {
    background: #333;
    color: #fff;
    font: 300 100.1% "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
}
#holder {
    height: 480px;
    left: 50%;
    margin: -240px 0 0 -320px;
    position: absolute;
    top: 50%;
    width: 640px;
}
#copy {
    bottom: 0;
    font: 300 .7em "Helvetica Neue", Helvetica, "Arial Unicode MS", Arial, sans-serif;
    position: absolute;
    right: 1em;
    text-align: right;
}
#copy a {
    color: #fff;
} 

#holder {
                height: 400px;
                margin: -200px 0 0 -200px;
                width: 400px;
            }
            #form {
                position: absolute;
                top: 50%;
                left: 50%;
                width: 400px;
                height: 100px;
                margin: -200px 0 0 -200px;
            }


#holder {
    height: 480px;
    left: 50%;
    margin: 0 0 0 -320px;
    position: absolute;
    top: 0;
    width: 640px;
}
#copy {
    bottom: 0;
    font-size: .7em;
    position: absolute;
    right: 1em;
    text-align: right;
}

JavaScript

Raphael(function () {
                var r = Raphael("holder"),
                    easingx = document.getElementById("easingx"),
                    easingy = document.getElementById("easingy"),
                    run = document.getElementById("run"),
                    set = r.set(r.circle(300, 200, 8),r.circle(200, 100, 8),r.circle(100, 200, 8),r.circle(200, 300, 8),r.circle(200, 200, 8)).attr({stroke: "none", fill: "#666"}),
                    c = r.circle(200, 200, 10).attr({stroke: "#fff", "stroke-width": 4}),
                    fade = function (id) {
                        return function () {
                            set[id].attr({fill: "#fff", r: 12}).animate({fill: "#666", r: 8}, 500);
                        };
                    };

                
                run.onclick = function () {
                    var ex = easingx.value,
                        ey = easingy.value;
                    c.stop().animate({
                        "20%": {cy: 200, easing: ey, callback: fade(0)},
                        "40%": {cy: 100, easing: ey, callback: fade(1)},
                        "60%": {cy: 200, easing: ey, callback: fade(2)},
                        "80%": {cy: 300, easing: ey, callback: fade(3)},
                        "100%": {cy: 200, easing: ey, callback: fade(4)}
                    }, 5000).animate({
                        "20%": {cx: 300, easing: ex},
                        "40%": {cx: 200, easing: ex},
                        "60%": {cx: 100, easing: ex},
                        "80%": {cx: 200, easing: ex},
                        "100%": {cx: 200, easing: ex}
                    }, 5000);
                };
            });