Toekan - bg pattern

by PhilQ

HTML

<div class="row">
	<div class="ticket black"></div>
</div>

SCSS

* { padding: 0; margin: 0; box-sizing: border-box; }
html, body {
	float: left;
	width: 100%;
	height: 100%;
	background-color: #0143A3;
	overflow: hidden;
}

.row { display: inline-block; float: left; clear: both; width: 100%; }

$vsize: 40px; //50
$hsize: (2 * $vsize);
$indent: ($hsize / 2);
$ticket-size: 18px; //12

.row:nth-child(2n):before {
	content: '';
	display: inline-block;
	float: left;
	width: $indent;
	height: $vsize;
}
.ticket {
	display: inline-block;
	float: left;
	width: $hsize;
	height: $vsize;
	padding: ( ( min( $hsize, $vsize ) - $ticket-size ) / 2 );
	opacity: 0.3;
	transform-origin: 50% 50%;
	background-position: center center;
	background-origin: content-box;
	background-size: contain;
	background-clip: content-box;
	background-repeat: no-repeat;
}
//A
.row:nth-child(4n+1) .ticket:nth-child(2n+1), .row:nth-child(4n+3) .ticket:nth-child(2n) {
	transform: rotate(45deg);
}
//B
.row:nth-child(4n+1) .ticket:nth-child(2n), .row:nth-child(4n+3) .ticket:nth-child(2n+1) {
	transform: rotate(225deg);
}
//C
.row:nth-child(4n+2) .ticket:nth-child(2n+1), .row:nth-child(4n) .ticket:nth-child(2n) {
	transform: rotate(135deg);
}
//D
.row:nth-child(4n+2) .ticket:nth-child(2n), .row:nth-child(4n) .ticket:nth-child(2n+1) {
	transform: rotate(315deg);
}

.black {
	background-image:...

JavaScript

var $body, $row, $ticket;

$(document).ready(function(){
	$body = $('body').first();
	$row = $('.row').first();
	$ticket = $('.ticket').first();
	$w = $body.width();
	$h = $body.height();
	$tw = $ticket.outerWidth();
	$th = $ticket.outerHeight();
	var nx = Math.floor( ($w-($tw/2)) / $tw ) - 1;
	var ny = Math.floor( $h / $th ) - 1;

	for (var i=nx; i-->0;) {
		$row.append($ticket.clone());
	}
	for (var i=ny; i-->0;) {
		$body.append($row.clone());
	}
});