JSFiddle - React, Tailwind, and code Playground

by ten1seven

HTML

<div id="circle"></div>

CSS

#circle {
    background: #eee;
    height: 300px;
    width: 300px;
}

JavaScript

var paper = Raphael(document.getElementById("circle"), 300, 300);

var c1 = paper.circle(20, 20, 20);
c1.attr({
    'stroke-width': 0,
    'fill': '#4dc3e9'
});

var l1 = paper.path('M17 10L27 20M27 20L17 30');
l1.attr({
    'stroke': '#fff',
    'stroke-width': 2,
});

var st = paper.set(c1,l1);
st.attr({
    'scale': 0.1,
    'opacity': 0
});

st.attr({ 'opacity': 1 }).animate({ 'scale': 1 }, 300);