JSFiddle - React, Tailwind, and code Playground

HTML

<div id="canvas" style="width: 300px; height: 300px; border: 2px solid #000;position:relative;"></div>

<input type="button" onclick="test()" value="Animate">

JavaScript

function init() {
    // crate a canvas to work on   
    R = Raphael(document.getElementById('canvas'), "100%", "100%");

    //create the central circle
    c = R.circle(150, 150, 50).attr({
        fill: "hsb(0, 1, 1)",
        stroke: "none",
        opacity: 0.5
    });
}

//animate the circle
function test() {
    c.attr('opacity', 0);
    c.animate({
        opacity: 1
    }, 1000);
}