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: #BEE7E9;
}

JavaScript

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

//Light
var polygon = draw.polygon('270,100 170,100 100,800 1700,800')
polygon.fill('#F4606C').move(40, 100)
polygon.opacity(0.5)

//UFO
let ellipse = draw.ellipse(190, 50).move(70, 60).fill('#19CAAD')
let ellipse1 = draw.ellipse(130, 40).move(100, 50).fill('#F8B195')
let circle0 = draw.circle(15, 15).move(160,92).fill('#E6CEAC')
let circle1 = draw.circle(15, 15).move(236,77).fill('#E6CEAC')
let circle2 = draw.circle(15, 15).move(80, 77).fill('#E6CEAC')
let circle3 = draw.circle(15, 15).move(120,89).fill('#E6CEAC')
let circle4 = draw.circle(15, 15).move(200,89).fill('#E6CEAC')

//fire
let rect0 = draw.rect(55, 95).move(155, 180).fill('#db6767')
let rect1 = draw.rect(65, 85).move(150, 180).fill('#a9cceb')
var polygon = draw.polygon('125,100 60,100 90,70')
polygon.fill('#BEEDC7').move(150,150.5)
var polygon = draw.polygon('125,100 100,100 125,30')
polygon.fill('#BEEDC7').move(125.5,195)
var polygon = draw.polygon('215,100 190,100 190,30')
polygon.fill('#BEEDC7').move(214.5,195)
let circle6 = draw.circle(50, 50).move(158,190).fill('#A0EEE1    ')

SVG.on(rect, 'mousemove', (e) => {
    const { x, y } = rect.point(e.pageX, e.pageY);
    console.log(e.pageX,e.pageY);
    })

console.log(rect.attr(['width','height']))