<head>
  <script language="javascript" type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/p5.js/0.4.17/p5.min.js"></script>
</head>

<body>
</body>
html,
body {
  margin: 0;
  overflow: hidden;
}
var elx, ely;
var elrad = 50;

var step = 1;
var maxSteps;
var rand = [];
var rand1 = [];
var rand2 = [];
var rand3 = [];
var saveTime = 0;

function setup() {
  //setup the canvas and set some variables!
  createCanvas(windowWidth, windowHeight);
  elx = windowWidth / 2;
  ely = windowHeight / 2;
  maxSteps = windowWidth / elrad;

  for (var i = 0; i < maxSteps+1; i++) {
    rand[i] = random(255);
    rand1[i] = random(rand[i], 255);
    rand2[i] = random(rand[i]);
    rand3[i] = random(255);
  }
  
  background(200);
}

function draw() {

  //animate  
  if (millis() - saveTime > 50) {
    step += 1;
    saveTime = millis();
  }


  if (step > maxSteps) {
    step = 1;
    for (var i = 0; i < maxSteps+1; i++) {
      rand[i] = random(255);
      rand1[i] = random(rand[i], 255);
      rand2[i] = random(rand[i]);
      rand3[i] = random(255);
    }
  }

  noStroke();

  for (var i = step; i > 1; i--) {
    fill(rand1[i], rand2[i], rand3[i]);
    ellipse(elx, ely, elrad * i, elrad * i);
  }

}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.