JSFiddle - React, Tailwind, and code Playground

by linzoey

CSS

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

JavaScript

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

let pick = inputArray => inputArray[Math.round((inputArray.length - 1) * Math.random())];

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

var linear = draw.gradient('linear', function(add) {
  add.stop(0, '#174d57')
  add.stop(0.65, '#8bc1c7')
  add.stop(1, '#F5E9AB')
})

draw.rect(1920, 1080).move(0, 0).fill(linear.from(0, 1).to(0, 0))

var allFish = []

class Fish {
  constructor(xposition, yposition, c) {
    this.x = 4000 + Math.random() * (3900);
    this.y = Math.random() * (1000);
    this.color = c;

  }

  draw() {
    var ellipse = draw.ellipse(80, 45).fill(this.color).move(this.x + 0, this.y + 0)
    var polyline = draw.polyline('160,15 120,38 160,60')
    polyline.fill(this.color).move(this.x + 65, this.y + 0)
    var circle = draw.circle(6).fill('#0F1214').move(this.x + 20, this.y + 15)
    var circle2 = draw.circle(20).fill('#D3E0E9').move(this.x - 10 + (Math.random() * 10), this.y - 20 + (Math.random() * 20))
    var circle3 = draw.circle(30).fill('#D3E0E9').move(this.x + 5 + (Math.random() * 10), this.y - 55 + (Math.random() * 20))
    var circle4 = draw.circle(40).fill('#D3E0E9').move(this.x + 30 + (Math.random() * 10), this.y - 100 + (Math.random() * 20))
    let fish = draw.group()
    fish.add(ellipse)
    fish.add(polyline)
    fish.add(circle)
    fish.add(circle2)
    fish.add(circle3)
    fish.add(circle4)
    // put the fish group into the allFish array
    allFish.push(fish)
  }
}

class Seaweed {
  constructor(xposition, yposition) {
    this.x = Math.random() * (1900);
    this.y = Math.random() * (980);
  }

  draw() {
    var circle5 = draw.circle(30).fill('#9EE3B4').move(this.x + 10, 960)
    var circle6 = draw.circle(30).fill('#9EE3B4').move(this.x + 10, 985)
    var circle7 = draw.circle(30).fill('#9EE3B4').move(this.x + 10, 1010)
    var circle8 =...