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 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, '#a8e9f0')
})

draw.rect(1920, 1080).move(0, 0).fill(linear.from(0, 1).to(0, 0))
var group = []

class Fish {
  constructor (xposition,yposition,c)
  { 
    this.x = 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))
group.push(ellipse)
group.push(polyline)
group.push(circle)
group.push(circle2)
group.push(circle3)
group.push(circle4)
  }
}

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

  draw () {
  
  var ellipse = draw.ellipse(80, 45).fill('#FBBE81').move(this.x+0,this.y+0).opacity(0.5)
var polyline = draw.polyline('160,15 120,38 160,60')
polyline.fill('#FBBE81').move(this.x+65,this.y+0).opacity(0.5)
var circle = draw.circle(6).fill('#0F1214').move(this.x+20,this.y+15).opacity(0.5)
  
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 =...