Bauhaus Pattern SVG v1

bauhaus-pattern-svg-v1.markdown

Bauhaus Pattern SVG v1

A Pen by Laurent Baumann on CodePen.

License.

index.html

<svg id="svg"></svg>
<div id="linkContainer">
	<a id="link" href="" />Download SVG</a>
	<a id="random" href="javascript:run()" />Shuffle</a>
</div>

script.js

function run() {
	// Edit those parameters!
	cellSize = 32;
	cellMargin = 4;
	numOfRow = 12;
	numOfCol = 16;
	
	twoAcross = cellSize * 2 + cellMargin;
	Cells = [];
	canvasHeight = cellSize * numOfRow + cellMargin * (numOfRow - 1);
	canvasWidth = cellSize * numOfCol + cellMargin * (numOfCol - 1);
	
	while (svg.firstChild) {
		svg.removeChild(svg.firstChild);
	}

	svg = document.getElementById("svg");
  svg.setAttributeNS(null,"width", canvasWidth);
  svg.setAttributeNS(null,"height", canvasHeight);

	generateBaseCells();
	generateBridges();
	draw();
	setTimeout(function() {
		generateDownloadLink();
	}, 300, false);
}

window.onload = function() {
	run();
}

var Cell = function(x, y) {
	this.x = x;
	this.y = y;
	this.index = y * numOfCol + x;
	this.hasBridge = false;
	this.isBridged = false;
	this.bridgeDirection = "";
	
	this.draw = function() {
			var pixelX = this.x * cellSize + this.x * cellMargin;
			var pixelY = this.y * cellSize + this.y * cellMargin;
		
			var mc = 0.05;
			var mx = 1 - mc;
			horizontalCornerPattern = [
				[mx, mx, mc, mc],
				[mc, mc, mx, mx],
				[mx, mc, mx, mc],
				[mc, mx, mc, mx],
				[mc, mc, mc, mc],
				[mx, mc, mc, mc],
				[mc, mx, mc, mc],
				[mc, mc, mx, mc],
				[mc, mc, mc, mx],
			]
		
			verticalCornerPattern = [
				[mc, mx, mc, mx],
				[mx, mc, mx, mc],
				[mc, mx, mx, mc],
				[mx, mc, mc, mx],
				[mc, mc, mc, mc],
				[mx, mc, mc, mc],
				[mc, mx, mc, mc],
				[mc, mc, mx, mc],
				[mc, mc, mc, mx],
			]
		
			squareCornerPattern = [
				[mc, mc, mc, mc],
				[0.5, 0.5, 0.5, 0.5],
				[mx, mc, mc, mc],
				[mc, mx, mc, mc],
				[mc, mc, mx, mc],
				[mc, mc, mc, mx],
			]
		
			colors = [
				"#F3A110",
				"#9F97FF",
				"#EE6659",
				"#6DCBC2"
			]
		
			randomColor = colors[Math.floor(Math.random() * colors.length)];
			
			if(this.hasBridge) {
				switch(this.bridgeDirection) {
					case "down":
						randomPattern = verticalCornerPattern[Math.floor(Math.random() * verticalCornerPattern.length)];
						var square = generateRoundRect(pixelX, pixelY, cellSize, twoAcross,
							cleanNum(cellSize * randomPattern[0]),
							cleanNum(cellSize * randomPattern[1]),
							cleanNum(cellSize * randomPattern[2]),
							cleanNum(cellSize * randomPattern[3]),
							randomColor);
						svg.appendChild(square);
						break;
					case "right": // horizontal
						randomPattern = horizontalCornerPattern[Math.floor(Math.random() * horizontalCornerPattern.length)];
						var square = generateRoundRect(pixelX, pixelY, twoAcross, cellSize,
							cleanNum(cellSize * randomPattern[0]),
							cleanNum(cellSize * randomPattern[1]),
							cleanNum(cellSize * randomPattern[2]),
							cleanNum(cellSize * randomPattern[3]),
							randomColor);
						svg.appendChild(square);
						break;
				}
			} else if(!this.hasBridge && !this.isBridged) {
				randomPattern = squareCornerPattern[Math.floor(Math.random() * squareCornerPattern.length)];
				
				var square = generateRoundRect(pixelX, pixelY, cellSize, cellSize,
							cleanNum(cellSize * randomPattern[0]),
							cleanNum(cellSize * randomPattern[1]),
							cleanNum(cellSize * randomPattern[2]),
							cleanNum(cellSize * randomPattern[3]),
							randomColor);
				svg.appendChild(square);
			}
	}
	
	this.createBridge = function(direction) {
		this.hasBridge = true;
		this.bridgeDirection = direction;
	}
	
	return this;
}

function cleanNum(num) {
	return Math.round(num * 10) / 10
}

function generateBaseCells() {
	for(var i = 0; i < numOfCol; i++) {
		cellRow = [];
		for(var j = 0; j < numOfRow; j++) {
			cell = new Cell(i, j);
			cellRow.push(cell);
		}
		Cells.push(cellRow);
	}
}

function clearBridges() {
	for(var i = 0; i < numOfCol; i++) {
		for(var j = 0; j < numOfRow; j++) {
			Cells[i][j].hasBridge = false;
			Cells[i][j].isBridged = false;
			Cells[i][j].bridgeDirection = "";
		}
	}
}

function generateBridges() {
	for(var i = 0; i < numOfCol; i++) {
		for(var j = 0; j < numOfRow; j++) {
			if(i < numOfCol - 1 && j < numOfRow - 1 ) {
				if(!Cells[i][j].hasBridge && !Cells[i][j].isBridged) {
					if(Math.random() > .25) {
						if(Math.random() > .5) {
							if(!Cells[i+1][j].hasBridge && !Cells[i+1][j].isBridged) {
								Cells[i][j].createBridge("right");
								Cells[i+1][j].isBridged = true;
								Cells[i+1][j].bridgeDirection = "right";
							}
						} else {
							if(!Cells[i][j+1].hasBridge && !Cells[i][j+1].isBridged) {
								Cells[i][j].createBridge("down");
								Cells[i][j+1].isBridged = true;
								Cells[i][j+1].bridgeDirection = "down";
							}				
						}
					}
				}
			}
		}
	}
}

function draw() {
	for(var i = 0; i < numOfCol; i++) {
		for(var j = 0; j < numOfRow; j++) {
			Cells[i][j].draw();
		}
	}
}

function generateRect(x, y, w, h, color) {
  var rect = document.createElementNS("http://www.w3.org/2000/svg", "rect");
  rect.setAttributeNS(null,"fill", color);
  rect.setAttributeNS(null,"stroke","none");
  rect.setAttributeNS(null,"x", x);
  rect.setAttributeNS(null,"y", y);
  rect.setAttributeNS(null,"width", w);
  rect.setAttributeNS(null,"height", h);
  return rect;
}

function generateRoundRect(x, y, w, h, tl, tr, br, bl, color) {
	var startingX = Math.round(x);
	var startingY = Math.round(y + tl);
	var middleWithTop = Math.round(w - tl - tr);
	var middleWithBottom = Math.round(w - bl - br);
	var middleHeightLeft = Math.round(h - bl - tl);
	var middleHeightRight = Math.round(h - br - tr);
	var path = `M${startingX},${startingY} a${tl},${tl} 0 0 1 ${tl},-${tl} h${middleWithTop} a${tr},${tr} 0 0 1 ${tr},${tr} v${middleHeightRight} a${br},${br} 0 0 1 -${br},${br} h-${middleWithBottom} a${bl},${bl} 0 0 1 -${bl},-${bl} v-${middleHeightLeft} z`;
	
	var shape = document.createElementNS("http://www.w3.org/2000/svg", "path");
	shape.setAttributeNS(null,"fill", color);
	shape.setAttributeNS(null,"d", path);
	
	return shape;
}

function generateDownloadLink() {
	var svgData = document.getElementById("svg").outerHTML;
	
	if(!svgData.match(/^<svg[^>]+xmlns="http\:\/\/www\.w3\.org\/2000\/svg"/)){
			svgData = svgData.replace(/^<svg/, '<svg xmlns="http://www.w3.org/2000/svg"');
	}
	if(!svgData.match(/^<svg[^>]+"http\:\/\/www\.w3\.org\/1999\/xlink"/)){
			svgData = svgData.replace(/^<svg/, '<svg xmlns:xlink="http://www.w3.org/1999/xlink"');
	}
	
	svgData = '<?xml version="1.0" standalone="no"?>\r\n' + svgData;
	
	var svgBlob = new Blob([svgData], {type:"image/svg+xml;charset=utf-8"});
	var svgUrl = URL.createObjectURL(svgBlob);
	var downloadLink = document.getElementById("link");
	downloadLink.href = svgUrl;
	downloadLink.download = new Date().valueOf() + ".svg";
}

style.css

html, body {
	background-color: rgb(255,248,240);
}

#svg {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translatex(-50%) translatey(-50%);
	z-index: -1;
}