Lego draw

by PhilQ

CSS

* { margin: 0; padding: 0; box-sizing: border-box; }
html, body { width: 100%; height: 100%; }

svg {
	width: 100%; height: 100%;
	background: #ddd;
}

JavaScript

/* Helper functions */
function deg2rad(deg) { return deg * (Math.PI/180); }
function rad2deg(rad) { return rad * (180/Math.PI); }

// From: Joseph Merdrignac @ https://stackoverflow.com/a/37411738/2142071
function getNode(n, v) {
	n = document.createElementNS('http://www.w3.org/2000/svg', n);
	for (var p in v) {
		n.setAttributeNS(null, p, v[p]);
	}
	return n;
}


// Sizes in mm
var SLW = 8, // standard Lego width
	SLH = 3.2, // standard Lego height (plate height; 1/3 of brick height)
	SLSD = 4.8, // standard Lego stud diameter
	SLSH = 1.8, // standard Lego stud height (1.7 + 0.1 of logo)
	svg,
	draw_scale = 4,
	draw_styles = {
		white: {
			'stroke': '#000000',
			'stroke-width': 1.5,
			'stroke-linecap': 'round',
			'stroke-linejoin': 'round',
			'fill': '#E4CD9E',
		},
	},
	distances = [
		[
			draw_scale * SLW * Math.sin(deg2rad(-60)),
			draw_scale * SLW * -Math.cos(deg2rad(-60))
		],
		[
			draw_scale * SLW * Math.sin(deg2rad(60)),
			draw_scale * SLW * -Math.cos(deg2rad(60))
		],
		[
			0,
			draw_scale * -SLH
		],
	];

function drawBrick(h, w, l, style, offsetX, offsetY) {
	var s = draw_styles[ style ];
	
	var points = [
		[
			distances[0][0] * w,
			distances[0][1] * w
		],
		[
			distances[1][0] * l,
			distances[1][1] * l
		],
		[
			0,
			distances[2][1] * h
		],
	];
	
	// left
	var p = 'M' +
		offsetX + ',' +
		offsetY +
		'L' +
		(offsetX + points[0][0]) + ',' +
		(offsetY + points[0][1]) +
		'L' +
		(offsetX + points[0][0] + points[2][0]) + ',' +
		(offsetY + points[0][1] + points[2][1]) +
		'L' +
		(offsetX + points[2][0]) + ',' +
		(offsetY + points[2][1]) +
		'L' +
		offsetX + ',' +
		offsetY +
		'Z';
	s['d'] = p;
	svg.appendChild( getNode('path', s) );
	
	// right
	var p = 'M' +
		offsetX + ',' +
		offsetY +
		'L' +
		(offsetX + points[2][0]) + ',' +
		(offsetY + points[2][1]) +
		'L' +
		(offsetX + points[2][0] + points[1][0]) + ',' +
		(offsetY + points[2][1] + points[1][1]) +
		'L' +
		(offsetX + points[1][0]) + ',' +
		(offsetY +...