SVG.js Playground

Just a default setup to start fiddling

by Peter Johnson

HTML

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

JavaScript

var radius = 150
var margin = 0

// initialize SVG.js
var draw = SVG()
	.addTo('body')
  .size(radius, radius)
  
var fgColor = '#fff'
  
var bgColor = '#372774'
var bgColor = '#000'
/* var background = draw
  .rect(radius*2, radius*2)
  .fill(bgColor) */

// var group = draw.group()

/* var borderWidth = 2
var borderSpacing = 4
var border = draw
  .circle(radius+(borderWidth*2)+(borderSpacing*2))
  .fill(bgColor)
  .move(margin-borderWidth-borderSpacing, margin-borderWidth-borderSpacing)
  .stroke({
    width: borderWidth,
    color: fgColor
   })  */

var circle = draw
	.circle(radius)
  .move(margin, margin)
  .fill('#fff')

var mask = draw.mask()
	.add(circle)

var top = draw
	.move(margin, margin)
	.rect(radius+margin, margin+(radius/2)+10)
  .fill(fgColor)
  .maskWith(mask)

var scale = (radius/500)
var multiplier = 1.5
var gap = 48 * scale
var baseY = (radius/2)
var foo = 7 * scale

for (var i=1; i<6; i++){
   draw
    .rect(radius, gap-(i*multiplier)-5)
    .move(margin, margin+baseY+(i*gap))
    .fill(fgColor)
    .maskWith(mask)
}

/* var rect2 = draw
  .move(margin, margin)
  .rect(radius+margin, (radius/2)+margin+10)
  .fill('#fff')

var mask2 = draw.mask()
  .add(rect2)

var circle2 = draw
  .circle(50)
  .move((radius/2)-5, (radius/2))
  .fill('#000')
  .maskWith(mask2) */
  
 console.log(draw.svg())