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.scaleAmount = undefined;
  }
  draw() {

    this.scaleAmount = this.butterflySize * 0.5;

    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 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 + 212, this.yPosition + 65)
    path.stroke({
      color: 'gray',
      width: 3,
      linecap: 'round',
      linejoin: 'round'
    })

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

    let path2 = draw.path('M800,163 C830,175 825,235 785,235 S725,180 730,145')
   ...