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;
}

function collision (p1x, p1y, r1, p2x, p2y, r2) {
    var a;
    var x;
    var y;

    a = r1 + r2;
    x = p1x - p2x;
    y = p1y - p2y;

    if ( a > Math.sqrt( (x*x) + (y*y) ) ) {
        return true;
    } else {
        return false;
    }   
}

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);
    circle.data('myAnim', anim);

    
};
setInterval(function(){
    flyMeteor();
},200);	

var bigCircle = paper.circle(250, 250, 80).attr({
    fill:'green',
    stroke: 0
});

    setInterval( function() {
        paper.forEach( function(el) { 
            if( el.type=='circle' ) { 
                if( collision( el.attr('cx'), el.attr('cy'), el.attr('r'), bigCircle.attr('cx'), bigCircle.attr('cy'), bigCircle.attr('r') ) ) {
                    if( el.data('myAnim') ) {
                        el.stop( el.data('myAnim') );
                        el.remove();
                    }
                };
            }
       } );



        },50);