let cs = ["#fec5bb", "#fcd5ce", "#fae1dd", "#f8edeb", "#e8e8e4", "#d8e2dc", "#ece4db", "#ffe5d9", "#ffd7ba", "#fec89a"]

​

​

function setup() {

  createCanvas(windowWidth, windowHeight);

  let a = 0;

  let h = 0;

  let h2 = 1;

  for(i = 0; i < width / 2.5; i++){

    x = random(width);

    y = random(height);

    size = 10;

    count = round(random(2, 15));

    h = round(map(y, 0, height, 0, cs.length -1));

    r = cs[h];

    cirs[i] = new Cir(x, y, size, count, r);

  }

  cirs[cirs.length] = new Cir(random(width), height / 2, 10, 30, "#fffffc");

  cirs.sort((a, b) => (a.y > b.y) ? 1 : -1);

}

​

function draw() {

  background(150);

  for(i = 0; i < cirs.length; i++){

    cirs[i].show();

  }

  noLoop();

}

​

class Cir{

  constructor(x, y, size, count, r){

    this.x = x;

    this.y = y;

    this.size = size;

    this.count = count;

    this.r = r;

  }

  show(){

    strokeWeight(2);

    stroke(150);

    fill(this.r);

    let a = 0;

    for(a = this.count; a > 0; a--){

    circle(this.x, this.y, this.size + (a * this.size));

    }

        strokeWeight(4);

    point(this.x, this.y);

  }

  move(){

    this.y = this.y + random(-1, 1);

  }

}