JSFiddle - React, Tailwind, and code Playground

by linzoey

HTML

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

CSS

body{
background-color:white;
}

JavaScript

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

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

class Point {
  constructor(x, y) {
    this.x = x;
    this.y = y;
  }
  move(xDistance, yDistance) {
    return new Point(this.x + xDistance, this.y + yDistance)
  }
}

function randomInteger(min, max) {
  return Math.floor(min + ((max - min) * Math.random()))
}

function pick(inputArray) {
  return inputArray[randomInteger(0, inputArray.length)]
}

class Butterfly {
  constructor(size, point) {
    this.butterflySize = size;
    this.xPosition = Math.random()* (1720) ;
    this.yPosition = Math.random()* (980) ;
    this.scaleAmount = undefined;
  }
  draw () {
  
    //this.scaleAmount = 1.2 + Math.random();

//butterfly 1
let rect = draw.circle(17).fill('black').move(this.xPosition+102, this.yPosition+102)

let path4 = draw.path('M160,90 C150,65 140,50 130,45')
path4.fill('none').move(this.xPosition+94, this.yPosition+120).rotate(40)
path4.stroke({ color: 'black', width: 10, linecap: 'round', linejoin: 'round' })

let path = draw.path('M361,107 C435,15 480,50 460,85 C450,110 475,120 445,135 S340,120 366.5,100')//S330,120 368,100
path.fill('none').move(this.xPosition+112, this.yPosition+65)
path.stroke({ color: 'black', width: 3, linecap: 'round', linejoin: 'round' })

let path1 = draw.path('M800,163 C830,175 825,235 785,235 S725,180 730,145')
path1.fill('none').move(this.xPosition+115, this.yPosition+137)//.rotate(10)
path1.stroke({ color: 'black', width: 3, linecap: 'round', linejoin: 'round' })

let path2 = draw.path('M160,100 C150,65 140,55 120,50')
path2.fill('none').move(this.xPosition+77, this.yPosition+56).rotate(10)
path2.stroke({ color: 'black', width: 3, linecap: 'round', linejoin: 'round' })

let path3 = draw.path('M160,100 C150,65 140,55 120,50')
path3.fill('none').move(this.xPosition+67, this.yPosition+56)
path3.stroke({ color: 'black',...