JSFiddle - React, Tailwind, and code Playground

by phil_mcc

HTML

<div id='canvas'></div>

CSS

#canvas {
    border:1px solid black;
    width: 600px;
    height: 10000px;
    padding-left:10px;
}

JavaScript

var NUMBER_CIRCLES = 3000;
var ANIMATION_DELAY = 10000;
 var startingColor= {r: 255, g: 255, b: 0};


var paper = Raphael('canvas', 600, 10000);
var circleholder = paper.set();

var width = 10, height = 12, rad = 8;
var colours = ["#6F30A0","#5D3978","#421068","#A063D0","#AD80D0",
               "#B62E8A","#893C70","#760F55","#DB60B2","#DB81BD",
               "#4B39A5","#493F7C","#21126B","#7C6BD2","#9386D2"]

// get a rdm number between 0 and max
function randomNum(max) {
    return Math.floor(Math.random() * max + 1);
}

// draw 3000 circles in a grid
function drawAllCircles() {
    var cx = 0, cy = height, perline = 25;
    for (var i=0;i<NUMBER_CIRCLES;i++) {
        if (i%perline == 0) {
            cx = 0;
            cy += height*2;
        }
        cx +=width*2;
        circleholder.push(paper.circle(cx, cy, rad).attr({fill:'yellow'}));
    }
}

// update all to one colour
function updateSingColour() {
    circleholder.animate({fill:'blue'}, ANIMATION_DELAY);
}

// update all to a unique colour
function updateRandomColour() {
    var startTime = new Date().getTime();
   
    var targetColors = [];
    for (var i = 0; i < circleholder.length; i++) {
         targetColors.push(Raphael.color(colours[randomNum(14)]));
    }
    var animate = function() {
        var time = new Date().getTime();
        var dt = time - startTime;
        if (dt < ANIMATION_DELAY) {
            setTimeout(animate , 50);
            var percent = (dt/ANIMATION_DELAY);
            //apply intermediate color
            for (var i = 0; i < circleholder.length; i++) {
                var dr = (targetColors[i].r - startingColor.r)*percent;
                var dg = (targetColors[i].g - startingColor.g)*percent;
                var db = (targetColors[i].b - startingColor.b)*percent;
                circleholder[i].attr("fill", Raphael.rgb(startingColor.r + dr,
                                                         startingColor.g + dg,
                                             ...