JSFiddle - React, Tailwind, and code Playground

by linzoey

HTML

<a>click here to download this svg!</a>

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, '#8bc1c7')
  add.stop(0.65, '#8bc1c7')
  add.stop(1, '#f7b267')
})

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

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

  draw () {
var ellipse = draw.ellipse(80, 45).fill('#F3E496').move(this.x+0,this.y+0)
var polyline = draw.polyline('160,15 120,38 160,60')
polyline.fill('#F3E496').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))



  }
}
function fishArray (n) {
    let outputArray = [];
    for (let i = 0; i < n ; i++) {
        outputArray.push(new Fish (1920, 980, 1000, 1000))
    }
    return outputArray
}

let myFish = fishArray(50);
  for(let i = 0; i < myFish.length ; i++){
    myFish[i].draw();
  }
  
  
const thisSvg = draw.svg();
const link = document.getElementsByTagName('a')[0]
const fileName = document.baseURI.replace(/(.*\/)([^\/]*)(\.svg)/, '$2-edited$3')
const data = 'data:image/svg+xml;base64,' + btoa(thisSvg)
link.setAttribute('download', fileName)
link.setAttribute('href', data)