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('50,800 500,300 60,40 1700,800')
polygon.fill('#f06').move(120, 90)

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

// draw pink square
let rect = draw.rect(1700, 800).move(0,0).fill('#f06')
rect.fill({ color: '#f06', opacity: 0 })
rect.stroke({ color: '#f06', opacity: 1, width: 5 })

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