Glas vorm

by PhilQ

HTML

<svg id="svg" xmlns="http://www.w3.org/2000/svg" height="600" width="600"></svg>

CSS

svg {
	border: 1px solid #f00;
}

path.a {
	stroke: black;
	stroke-width: 1;
	fill: transparent;
}

JavaScript

function makeSVG(tag, attrs) {
	var el= document.createElementNS('http://www.w3.org/2000/svg', tag);
	for (var k in attrs)
		el.setAttribute(k, attrs[k]);
	return el;
}

function arcPath(x,y, w,h, dw, dh, horizontal, bottom_right, with_move) {
	var sx = x,
		sy = y,
		ex = (horizontal ? (x+w) : x),
		ey = (!horizontal ? (y+h) : y),
		dx = (w * 0.5 * dw),
		dy = (h * 0.5 * dh),
		d = '';
		
	if (with_move) {
		d = d + 'M' + x + ' ' + y;
	}
	d = d + ' C ';
	
	if ( !horizontal && !bottom_right ) {
		d = d + Math.round(sx - dx) + ' ';
	} else {
		d = d + Math.round(sx + dx) + ' ';
	}
	if ( horizontal && !bottom_right ) {
		d = d + Math.round(sy - dy) + ', ';
	} else {
		d = d + Math.round(sy + dy) + ', ';
	}
	
	if ( !horizontal && bottom_right ) {
		d = d + Math.round(ex + dx) + ' ';
	} else {
		d = d + Math.round(ex - dx) + ' ';
	}
	if ( horizontal && bottom_right ) {
		d = d + Math.round(ey + dy) + ', ';
	} else {
		d = d + Math.round(ey - dy) + ', ';
	}
	
	d = d + ex + ' ' + ey;
	
	return d;
	// return '<path class="arc" d="' + d + '" />';
}

var sharpness = 0.6,
	bend = 0.25;

$( document ).ready(function(){
	var $svg = $("#svg");
	
	// arcPath(x,y, w,h, dw, dh, horizontal, bottom_right, with_move)

	var mid = {'x':300,'y':300};
	var size = {'b':420,'e':280}; // 210 - 420 = 210
	var s = (size.b - size.e);

	for (var i = 0; i < 16; i++) {
		s = (size.b - size.e);
		var io_p = (15 - i) / 15;
		var sx = mid.x - ( (size.e + (io_p * s)) * 0.5 );
		var sy = mid.y - ( (size.e + (io_p * s)) * 0.5 );
		var ex = mid.x + ( (size.e + (io_p * s)) * 0.5 );
		var ey = mid.y + ( (size.e + (io_p * s)) * 0.5 );
		s = (size.e + (io_p * s));
		b = bend * io_p;
		document.getElementById('svg').appendChild( makeSVG('path', {'d': arcPath(sx,sy, s,s, sharpness, b, true, false, true), 'class': 'a'}) );
		document.getElementById('svg').appendChild( makeSVG('path', {'d': arcPath(ex,sy, s,s, b, sharpness, false, true, true), 'class': 'a'}) );
		document.getElementById('svg').appendChild(...