JSFiddle - React, Tailwind, and code Playground

by linzoey

HTML

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

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(x, y, s) {
          this.butterflySize = 1;
          this.xPosition = x;
          this.yPosition = y;
          this.scaleAmount = 1;
          this.draw();
        }
        draw() {
          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').fill('white').move(this.xPosition + 194, this.yPosition + 120).rotate(40).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').fill('none').move(this.xPosition + 212, this.yPosition + 65).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').fill('white').move(this.xPosition + 215, this.yPosition + 137).stroke({ color: 'gray', width: 3, linecap: 'round', linejoin: 'round' });
          let antenna = randomAntenna(this.xPosition, this.yPosition);
          let wing = randomWing(this.xPosition, this.yPosition);

          let butterfly = draw.group();

          //butterfly.add(path);
          butterfly.add(path1);
          butterfly.add(antenna[0]);
      ...