simple SVG.js starter

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>

JavaScript

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

//Light
var polygon = draw.polygon('130,10 130,100 100,800 1700,800')
polygon.fill('#f06').move(20, 20)

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


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']))