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

this.scaleAmount = 1 + Math.random();
// Body
let head = 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)

// Wing * 4
let rWing1 = draw.path('M351,107 C435,5 480,10 460,60 C435,110 465,105 442,127 S350,105 351,107')//S330,120 368,100
rWing1.fill('white').move(this.xPosition+210, this.yPosition+50)
rWing1.stroke({ color: 'gray', width: 3, linecap: 'round', linejoin: 'round' })

let lWing1 = draw.path('M329,107 C245,5 200,10 220,60 C245,110 215,105 238,127 S330,105 329,107')
lWing1.fill('white').move(this.xPosition+96, this.yPosition+50)
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('white').move(this.xPosition+215, this.yPosition+137)//.rotate(10)
rWing2.stroke({ color: 'gray', width: 3, linecap: 'round',...