let x =10;


function setup() {
  
  createCanvas(1024,1024);
  background(255);
  colorMode(HSB, 360, 100, 100, 100);
  canvas.style = "position:absolute; left: 50%; width: 800px; margin-left: -400px; margin-top: 50px;";
  
}

function draw() {

  let gradient = drawingContext.createLinearGradient(
    width/2-200, height/2-200, width/2+200, height/2+200
  );
  gradient. addColorStop(0, color(300, 130, 100, 100));
  gradient.addColorStop(1, color(80, 60, 160, 100));

  drawingContext.strokeStyle = gradient;
  
  strokeWeight(2);
  
  


  for (x = 5; x < width; x += 40) {
    ellipse(x, 980, 40);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 940, 35);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 900, 30);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 860, 25);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 820, 20);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 780, 15);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 740, 10);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 700, 5);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 660, 3);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 20, 40);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 60, 35);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 100, 30);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 140, 25);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 180, 20);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 220, 15);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 260, 10);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 300, 5);
  }

  for (x = 5; x < width; x += 40) {
    ellipse(x, 340, 3);
  }
  
 

  

  

  
  

}
  
 





