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 = point.x ;
    this.yPosition = point.y ;
    //this.animate = animate;
    this.scaleAmount = undefined;
  }
  draw() {

   this.scaleAmount = 0.5 + Math.random();

let rect = draw.circle(17).fill('gray').move(this.xPosition+201.5, this.yPosition+102)

let line = draw.line(10, 30, 10, 0).move(this.xPosition+210, this.yPosition+120)
line.stroke({ color: 'gray', width: 10, linecap: 'round' })

let line1 = draw.line(10, 30, 10, 0).move(this.xPosition+210, this.yPosition+155)
line1.stroke({ color: 'gray', width: 6, linecap: 'round' })

//let circle = draw.circle(70).fill('green').move(245,144)

let rWing1 = 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
rWing1.fill('none').move(this.xPosition+212, this.yPosition+65)
rWing1.stroke({ color: 'gray', width: 3, linecap: 'round', linejoin: 'round' })

let lWing1 = draw.path('M319,107 C245,15 200,50 220,85 C230,110 205,120 235,135 S340,120 313.5,100')
lWing1.fill('none').move(this.xPosition+105, this.yPosition+65)
lWing1.stroke({ color: 'gray', width: 3, linecap: 'round', linejoin: 'round' })

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