JSFiddle - React, Tailwind, and code Playground

by linzoey

HTML

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

CSS

html, body {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  background: #595f9c;
}

JavaScript

function buildArray(n, fillFunction) {
  let outputArray = [];
  for (let i = 0; i < n; i++) {
    outputArray.push(fillFunction(i))
  }
  return outputArray
}

// initialize SVG.js

let draw = SVG().addTo('body').size(1700, 800)

var linear = draw.gradient('linear', function(add) {
  add.stop(0, '#595f9c')
  add.stop(1, '#f40064')
})

var radial = draw.gradient('radial', function(add) {
  add.stop(0, '#0f9')
  add.stop(1, '#595f9c')
})

var radial2 = draw.gradient('radial', function(add) {
	add.stop(0, '#FFFFA7')
  add.stop(0.3, '#ffaf4d')
  add.stop(1, '#ffb04f')
})

let ellipse3 = draw.ellipse(300, 160).move(920, 10).fill(radial)

var polygon = draw.polygon('30,-20 35,25 80,30 35,35 30,80 25,35 -20,30 25,25')
polygon.fill(radial2).move(915, 170)

class Star {
  constructor() {
    this.x = Math.random() * (1700);
    this.y = Math.random() * (800);
    this.size = Math.random() * 2.75 + 0.25;
    this.t = Math.random() * (6.28318530717958647693);
    this.color = '#FFFFA7';

  }

  addStar() {


    if (this.size >= 2.5) {
      this.color = '#6acc95'
    }
    
    if (this.size <= 1) {
      this.color = '#667D8B'
    }
    

    this.t += 0.1;
    let scale = this.size + Math.sin(this.t) * 4;
    return draw.circle(scale,scale).move(this.x, this.y).fill(this.color)
   
  }
}

let myStars = buildArray(1000, i => new Star());

myStars.forEach(s => s.addStar())
//myStars.forEach(s => console.log(s.size))


//fire
var rect1 = draw.rect(55, 150).move(1055, 280).fill(linear.from(0, 1).to(0, 0))
var rect2 = draw.rect(65, 85).move(1050, 280).fill('#a9cceb')
var polygon1 = draw.polygon('125,100 60,100 90,70')
polygon1.fill('#BEEDC7').move(1050, 250.5)
var polygon2 = draw.polygon('125,100 100,100 125,30')
polygon2.fill('#BEEDC7').move(1025.5, 295)
var polygon3 = draw.polygon('215,100 190,100 190,30')
polygon3.fill('#BEEDC7').move(1114.5, 295)
let circle6 = draw.circle(55, 55).move(1055, 285).fill('#A0EEE1')
let circle7 = draw.circle(45, 45).move(1060.5,...