<canvas id="c"></canvas>

body {
	overflow: hidden;
	margin: 0;
}
canvas {
	position: absolute;
}

let canvas = document.getElementById("c");
let ctx = canvas.getContext("2d", { alpha: false });
let w = (canvas.width = window.innerWidth);
let h = (canvas.height = window.innerHeight);
let w2 = w / 2,
	h2 = h / 2;
const PI = Math.PI;
const sin = Math.sin;
const cos = Math.cos;
const tan = Math.tan;
const floor = Math.floor;
const PI2 = PI * 2;

const angle = PI / 6;
const height = 200;
const side = height * tan(angle);

let img;
let pattern;
let offset = { x: 50, y: 10 };

window.onresize = function() {
	w = canvas.width = window.innerWidth;
	h = canvas.height = window.innerHeight;
	w2 = w / 2;
	h2 = h / 2;
};
window.onmousemove = function(e) {
	offset.x += img.width * (e.movementX / w);
	offset.y += img.height * (e.movementY / h);
};

function setup() {
	img = new Image();
	// img.src = "https://dl.dropboxusercontent.com/s/vd6jnmd2di62oxq/seamless-floral-skulls.png";
	img.src = "https://dl.dropboxusercontent.com/s/11yx6elrmznwfrt/seamless-flowers.svg?dl=0"
	img.onload = function() {
		pattern = ctx.createPattern(img, "repeat");
		loop();
	};
}

function loop() {
	ctx.clearRect(0, 0, w, h);

	for (let yi = 0; (yi - 1) * height < h2; yi++) {
		for (let xi = 0; (xi - 1) * side < w2; xi++) {
			let a = PI / 3;
			a = [0, 5 * a, 2 * a, 3 * a, 4 * a, a];
			let angleOffsetX = [0, -side, side, 0, -side, side];
			let angleOffsetY = [0, 0, height, height, height, 0];
			let ai = (yi % 2 == 0 ? xi : xi + 3) % 6;

			let x = xi * side;
			let y = yi * height;

			if (yi * height < h2) {
				drawTriangle(
					w2 + x + angleOffsetX[ai],
					h2 + y + angleOffsetY[ai],
					1,
					a[ai]
				);
				drawTriangle(
					w2 + x + angleOffsetX[ai],
					h2 + y + angleOffsetY[ai],
					-1,
					a[ai]
				);
			}

			if (xi != 0) {
				drawTriangle(
					w2 - angleOffsetX[ai] - x,
					h2 + angleOffsetY[ai] + y,
					1,
					-a[ai]
				);
				drawTriangle(
					w2 - angleOffsetX[ai] - x,
					h2 + angleOffsetY[ai] + y,
					-1,
					-a[ai]
				);
			}

			if (yi != 0) {
				drawTriangle(
					w2 + x + angleOffsetX[ai],
					h2 - y + angleOffsetY[ai],
					1,
					a[ai]
				);
				drawTriangle(
					w2 + x + angleOffsetX[ai],
					h2 - y + angleOffsetY[ai],
					-1,
					a[ai]
				);
			}

			if (yi != 0 && xi != 0) {
				drawTriangle(
					w2 - x - angleOffsetX[ai],
					h2 - y + angleOffsetY[ai],
					1,
					-a[ai]
				);
				drawTriangle(
					w2 - x - angleOffsetX[ai],
					h2 - y + angleOffsetY[ai],
					-1,
					-a[ai]
				);
			}
		}
	}
	// update pattern offset
	offset.x = (offset.x - 1 * sin(angle / 2)) % img.width;
	offset.y = (offset.y - 1 * cos(angle / 2)) % img.height;

	// loop
	requestAnimationFrame(loop);
}

function drawTriangle(posX, posY, scaleX, angle) {
	ctx.translate(posX, posY);
	ctx.rotate(angle);
	ctx.scale(scaleX, 1);
	ctx.translate(offset.x, offset.y);

	ctx.beginPath();
	ctx.moveTo(0 - offset.x, 0 - offset.y);
	ctx.lineTo(0 - offset.x, height - offset.y);
	ctx.lineTo(side - offset.x, height - offset.y);
	ctx.lineTo(0 - offset.x, 0 - offset.y);
	ctx.fillStyle = pattern;
	ctx.fill();

	ctx.setTransform(1, 0, 0, 1, 0, 0);
}

setup();