JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/jquery-1.6.1.min.js"></script>
<!--canvas id="tester"></canvas-->

CSS

#tester{
    height:300px;
    width:300px;
    border:1px solid red;
}

JavaScript

2979ccr
    $(function() {
    var colors = ['teal', '#123456'];
    
    var paper = Raphael(10, 50, 320, 240);
    var circle = paper.circle(75, 75, 50);

    circle.attr('fill', '#f00');
    circle.attr({
        'cursor':'pointer',
        'stroke':'#123456',
        'stroke-linecap':'round',
        'stroke-dasharray':'- ',
        'stroke-width':5
    });

    circle.node.onclick = function() {
        var newColor;
        switch (circle.attr('fill')) {
        case colors[0]:
            newColor = colors[1];
            break;
        case colors[1]:
            newColor = colors[0];
            break;
        default:
            newColor = colors[0];
            break;
        }
        circle.attr('fill', newColor);
    };
    
    // can also use jquery here, but I'm not sure how that jives with the IE compatibility layers in Raphaël...
    circle.node.onmouseover = function(){
        circle.attr('stroke','teal');
    };
    circle.node.onmouseout = function(){
        circle.attr('stroke','#123456');
    };
    
    
    var i=0;
    function rotateCircleStroke(){
        $(circle.node).attr('stroke-dashoffset', i);
        i++;
    }
    
    setInterval(rotateCircleStroke, 30);
});