JSFiddle - React, Tailwind, and code Playground

by cordesmj

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/raphael/2.1.2/raphael-min.js"></script>
<div id="canvas"></div>

JavaScript

$(document).ready (function()
        {
            var canvas = Raphael ('canvas', 400, 300);
            window.tset = canvas.set()
                .push(
                    window.tap = canvas.circle (100, 100, 40)
                        .attr ({stroke: 'black', fill: 'red'})
                )
                .push(
                    window.tap = canvas.circle (100, 100, 20)
                        .attr ({stroke: 'black', fill: 'blue'})
                )
                .push(
                    window.tap = canvas.circle (120, 80, 5)
                        .attr ({stroke: 'black', fill: 'green'})
                )
                .push(
                    window.tap = canvas.rect (70, 110, 10, 10)
                        .attr ({stroke: 'black', fill: 'yellow'})
                );

            setTimeout (function()
            {
                console.log ('Starting tset animation #1.');
                window.tset.animate ({transform:'t15 25'}, 1000, function()
                {
                    console.log ('Starting tset animation #2.');
                    window.tset.animate ({transform:'s2 2 85 75'}, 1000, function()
                    {
                        console.log ('Starting tset animation #3.');
                        window.tset.animate ({transform: 'm2 .4 .4 2 -30 -30'}, 1000);
                    });
                });
            }, 1000)
        });