JSFiddle - React, Tailwind, and code Playground

by linzoey

HTML

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

JavaScript

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

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.xPosition = Math.random() * (1820) ;
    this.yPosition = Math.random() * (980);
    this.scaleAmount = undefined;
  }
  draw() {

    
    //this.scaleAmount = 1 ;//+ Math.random();

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

let path4 = draw.path('M160,90 C150,65 140,50 130,45')
path4.fill('none').move(this.xPosition+194, this.yPosition+120).rotate(40)
path4.stroke({ color: 'gray', 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+212, this.yPosition+65)
path.stroke({ color: 'gray', 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+215, this.yPosition+137)//.rotate(10)
path1.stroke({ color: 'gray', width: 3, linecap: 'round', linejoin: 'round' })

/*     if (this.xPosition >= 1000) {
      this.scaleAmount = 2
    } */

function randomAntenna (x,y){
let antennaGroup = ['group1','group2','group3'];
let antennaNumber = Math.floor(Math.random() * antennaGroup.length);
let a = antennaGroup[antennaNumber];
let shape = [];

if (a == 'group1') {

//group1 
shape[0] = draw.path('M160,100 C150,75 140,65 120,110')
.fill('none').move(x+177, y+80).rotate(25)
.stroke({ color: 'gray', width: 3, linecap: 'round',...