JSFiddle - React, Tailwind, and code Playground

by emwdx

HTML

<title>Counting dots</title>
    
      
       

    <body>
        <div id="canvas_container"></div>
    </body>

CSS

#canvas_container {
                width: 800px;
                border: 1px solid #aaa;
            }

JavaScript

var totalNumber = Math.floor(Math.random()*50);
var perRow = 10
var dotColor = "#03DC02"
var setColor = "#454BFF"
window.onload = function () {
    var paper = new Raphael(document.getElementById('canvas_container'), 800, 600);
    
    
    
        drawCircles(paper,totalNumber);
        
  

   

};

function drawCircles(paper, number) {
    var circles = new Array();
    var spacing = 50;
    for(i=0;i<totalNumber;i++){
    
    
    
    

    x = Math.floor(Math.random()*780)+10;
    y = Math.floor(Math.random()*570)+10;
   
   
    circles[i] = paper.circle(x, y, 20).attr({
        "fill": dotColor, "stroke": 0
    });
    
    
    }
    for(i=0;i<totalNumber;i++){
    circles[i].animate({
    	cx: spacing*(Math.floor(i/perRow))+50,
    	cy:spacing*(i%perRow) + 50,
    	easing:"<>"
    },4000);
           
    };
    for(i=0;i<totalNumber;i++){
    circles[i].attr({
    	cx: spacing*(Math.floor(i/perRow))+50,
    	cy:spacing*(i%perRow) + 50,
    	});
           
    };
    
    for(i=0;i<(totalNumber-(totalNumber%perRow));i++){
    var anim = Raphael.animation({
    	cx: spacing*1.7*(Math.floor(i/perRow))+50,
    	cy:550,
    	r: 30,
    	fill: setColor,
    	easing:"<>"
    },2000);
    circles[i].animate(anim.delay(5000));
           
    };
    var j = 0
    for(i=(totalNumber-(totalNumber%perRow));i<totalNumber;i++){
    
    var anim2 = Raphael.animation({
    	cx: spacing*((i-(totalNumber-(totalNumber%perRow)))%(perRow/2))+50,
    	cy:480-spacing*(Math.floor(j/(perRow/2))),
    	easing:"<>"
    	
    },2000);
    j++;
    circles[i].animate(anim2.delay(6000));
           
    }
   
}