SVG.Ellipse

by johnwun

HTML

<div id="drawing"></div>

JavaScript

var stageWidth= 500;
var stageHeight = 500;

var thickness = 6;
var boxHeight = 40;
var boxWidth = 210;
var yOffset = 60;
var xOffset = 10;

var draw = SVG('drawing').size(stageWidth, stageHeight)
var border = draw.rect(stageWidth, stageHeight).stroke({width:1, color: '#f00'})
.fill({color: '#cfc', opacity:0.5})
var jags = [];

 for(var c = 1; c < boxWidth/(thickness); c++){
	jags.push(
    (c*thickness)
    + ','
    + ((c % 2 * thickness) + yOffset)
  )
  	jags.push(
    (c*thickness)
    + ','
    + (((c+1) % 2 * thickness) + yOffset)
  )
  
} 

var proofBox = draw.rect(boxWidth, boxHeight).stroke({width:1, color: '#f00'}).fill({color: '#cfc', opacity:0.5})
.move(xOffset,yOffset)
var grid = jags.join('\n')
var inverseGrid = jags
	.map(e => e.split(',')
		.map((n,i) => i%2
    	? parseInt(boxHeight) + parseInt(n)
      : n)
      .join(','))
	.reverse()
	.join('\n')
console.log(grid)
console.log(inverseGrid)
var polygon  = draw
	.polygon(
  	grid
    	.concat(['\n'])
      .concat(inverseGrid)
  )
  .fill('none')
  .stroke({ width: 1 })