JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://seez.ch/raphael-min.js"></script>
<div id="canvas"></div>
JavaScript
var paper = Raphael("canvas", 800, 800);
var cx = 400;
var cy = 400;
// Helpers
function rand(min, max) {
return Math.random() * (max - min) + min;
}
var bigCircle = paper.circle(cx, cy, 500);
function flyMeteor(){
var ptOnCircle = bigCircle.getPointAtLength(rand(1,bigCircle.getTotalLength()));
var anim = Raphael.animation({
fill: 'black',
opacity: 0,
cx: ptOnCircle.x,
cy: ptOnCircle.y,
stroke: 0,
r: 0
},1200,function(){
this.remove();
});
var circle = paper.circle(cx, cy, 4).attr({
fill:'black',
stroke: 0
}).animate(anim);
};
setInterval(function(){
flyMeteor();
},200);
var circle = paper.circle(250, 250, 80).attr({
fill:'green',
stroke: 0
});