SVG.js Playground

Just a default setup to start fiddling

by tmtron

HTML

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

JavaScript

// initialize SVG.js
var draw = SVG().addTo('body')

// draw pink square
const rectLeft = 10;
const rectWidth = 100;
draw.rect(rectWidth, 100).move(rectLeft, 50).fill('#f06')

const circleRadius = 50;
const circleMiddleX = (rectWidth - circleRadius) / 2 + rectLeft;
var whiteCircle = draw.circle(circleRadius).fill('white').move(circleMiddleX, 75);

var blueRect = draw.rect(50, 50).move(120, 50).fill('blue');
// add a title attribute - will show up when we hoover over the item
blueRect.element('title').words('abc def')

var greenRoundedRect = draw.rect(50, 50).move(180, 50).fill('green').radius(10);

const lineX = (rectWidth - circleRadius) / 2;
const line = draw.line(100, lineX, 120, lineX).stroke({
  width: 10,
  color: 'black',
})

line.animate(3000).plot([[0, lineX], [240, lineX]])

/*
const path = draw.path('M10 80 C 40 10, 65 10, 95 80 S 150 150, 180 80')
.move(120, 50);
// path.animate(2000).plot('M10 80 C 40 150, 65 150, 95 80 S 150 10, 180 80').loop(true, true)
var textpath = path.text('SVG.js rocks!')
*/

/*
var text = draw.text(function(add) {
  add.tspan('Lorem ipsum dolor sit amet ').newLine()
  add.tspan('consectetur').fill('#f06')
  add.tspan('.')
  add.tspan('Cras sodales imperdiet auctor.').newLine().dx(20)
  add.tspan('Nunc ultrices lectus at erat').newLine()
  add.tspan('dictum pharetra elementum ante').newLine()
})
*/

// export SVG
console.log(draw.svg());