simple SVG.js starterhttps://jsfiddle.net/linzoey/cg72wrsq/34/#run

Just a default setup to start fiddling

by linzoey

HTML

<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/[email protected]/dist/svg.min.js"></script>

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(20, 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(250, 10)
.animate().move(15, 145)
.animate().move(230, 115).animate(Infinity, true)

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 = '#a1a1a1'
    }
    

    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(155, 180).fill(linear.from(0, 1).to(0, 0))
var rect2 = draw.rect(65, 85).move(150, 180).fill('#a9cceb')
var polygon1 = draw.polygon('125,100 60,100 90,70')
polygon1.fill('#BEEDC7').move(150, 150.5)
var polygon2 = draw.polygon('125,100 100,100 125,30')
polygon2.fill('#BEEDC7').move(125.5, 195)
var polygon3 = draw.polygon('215,100 190,100 190,30')
polygon3.fill('#BEEDC7').move(214.5, 195)
let circle6 = draw.circle(55, 55).move(155,...