JSFiddle - React, Tailwind, and code Playground

by mholt

HTML

<script src="http://github.com/DmitryBaranovskiy/raphael/raw/master/raphael.js"></script>

CSS

body {
    background-color: black;
}

JavaScript

$(document).ready(function() {
    // Strange behavior indeed...
    // The glows never fully disappear... bug?
    
    // Larger circle
    var paper = Raphael(0, 0, 360, 360);
    var myCircle = paper.circle(180, 180, 30).attr('stroke', '#FFF');
    myCircle.attr("fill", "#CCC");
    myCircle.hover(function() {
        this.glow({
            color: "#FFF",
            width: 100
        });
    }, function() {
        this.glow({
            width: 100,
            color: "#000"
        });
    });

    // Smaller circle
    var myCircle2 = paper.circle(100, 100, 20).attr("stroke", "#FFF");
    myCircle2.attr("fill", "#CCC");
    myCircle2.hover(function() {
        myCircle2.glow({
            color: "#FFF"
        });
    }, function() {
        myCircle2.glow({
            width: 0
        });
    });
});