JSFiddle - React, Tailwind, and code Playground

by linzoey

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #ffffcc;
}

JavaScript

function buildArray (n, fillFunction) {
  let outputArray = [];
  for (let i = 0; i < n; i++) {
    outputArray.push(fillFunction(i))
  }
  return outputArray
}

let draw = SVG().addTo('body').size(1920, 1080)

class Flower {
  constructor (xposition,yposition)
  { 
    this.x = Math.random()* (1900);
    this.y = Math.random()* (1060);
    this.color = '#D2686E';
    
  }

  draw () {
  
  
  if (this.x >= 1000) {
      this.color = '#667D8B'
    }
    
  
var rect = draw.circle(30).fill(this.color).move(this.x+42,this.y+20)
var rect = draw.circle(30).fill(this.color).move(this.x+55,this.y+60)
var rect = draw.circle(30).fill(this.color).move(this.x+30,this.y+60)
var rect = draw.circle(30).fill(this.color).move(this.x+22,this.y+36)
var rect = draw.circle(30).fill(this.color).move(this.x+62,this.y+36)
var rect = draw.circle(30).fill('#EE9B9B').move(this.x+42,this.y+42)


  }
}
function flowerArray (n) {
    let outputArray = [];
    for (let i = 0; i < n ; i++) {
        outputArray.push(new Flower (1900, 1060, 1000, 1000))
    }
    return outputArray
}

let myFlower = flowerArray(100);
  for(let i = 0; i < myFlower.length ; i++){
    myFlower[i].draw();
  }