JSFiddle - React, Tailwind, and code Playground

by linzoey

CSS

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

JavaScript

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

var radial = draw.gradient('radial', function(add) {
	add.stop(0, '#D2686E')
  add.stop(1, '#91B2C7')
})

var rect = draw.circle(400).fill(radial).move(400, -40)
var rect = draw.circle(200).fill('#D2686E').move(500, 50)

//land-1
var rect = draw.rect(1920, 580).fill('#748E9F').move(0, 500)
//land-2
var rect2 = draw.rect(1920, 580).fill('#8CA3B2').move(0, 600)
//land-3
var rect = draw.rect(1920, 580).fill('#A7C1D2').move(0, 700)
//land-4
var rect = draw.rect(1920, 580).fill('#C8D9E3').move(0, 800)


class Tree {
  constructor (xposition,yposition, size, aPosition)
  { 
    this.x = xposition;
    this.y = yposition;
    this.treeSize = size;
    this.treePosition = aPosition;
  
  }

  draw () {

//tree-1
var polyline = draw.polyline('95,0 60,100 130,100')
polyline.fill('#748E9F').move(this.x-10, this.y+20)
var rect1 = draw.rect(20, 50).move(this.x+15, this.y+100).fill('#748E9F')
//tree-2
var ellipse = draw.ellipse(60, 100).fill('#8CA3B2').move(this.x+40, this.y+130)
var rect1 = draw.rect(20, 50).move(this.x+60, this.y+200).fill('#8CA3B2')
//flower
var rect = draw.circle(30).fill('#A7C1D2').move(this.x+22, this.y+240)
var rect = draw.circle(30).fill('#A7C1D2').move(this.x+35, this.y+280)
var rect = draw.circle(30).fill('#A7C1D2').move(this.x+10, this.y+280)
var rect = draw.circle(30).fill('#A7C1D2').move(this.x+2, this.y+256)
var rect = draw.circle(30).fill('#A7C1D2').move(this.x+42, this.y+256)
var rect = draw.circle(30).fill('#A7C1D2').move(this.x+20, this.y+257)
var polyline = draw.polyline('0,80 0,10')
polyline.fill('none').move(this.x+37.5, this.y+290)
polyline.stroke({ color: '#A7C1D2', width: 12, linecap: 'round', linejoin: 'round' })


  }
}
function treeArray (n) {
    let outputArray = [];
    for (let i = 0; i < n ; i++) {
        outputArray.push(new Tree ((i*90),350, 1000, 1000))
    }
    return outputArray
}

let myTree = treeArray(25);
  for(let i = 0; i < myTree.length ; i++){
    myTree[i].draw();
  }