svg.js sandbox

by Максим Булавинов

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;
	overflow: hidden;
}

.bg-dark {
	background: #777;
}

JavaScript

// initialize SVG.js
var draw = SVG().addTo('body').size('100%', '100%');

draw.mousedown(function(){ this.addClass("bg-dark") })
	.mouseup(function(){ this.removeClass("bg-dark") })


// draw square
const rect = draw.rect(100, 100).move(60, 60).fill('#4fe');

const ellipse = draw.ellipse(200, 100).move(50, 100)
		.stroke({ color: '#f06', width: 2 }).fill({ color: '#f06', opacity: 0.0 });
ellipse.mousedown(function(){ this.fill({ opacity: 0.9 }) })
	.mouseup(function(){ this.fill({ opacity: 0 }) })

const line = draw.line(0, 100, 100, 0).move(200, 20)
	.stroke({ color: '#5f6', width: 2, linecap: 'round' });
line.click(function(){this.dmove(10, 0)});

setTimeout(()=>{
	rect.animate(1000).dmove(-50, -50).size(120, 80);
}, 1000)