oNqGRWK

index.html

<svg viewBox="0 0 512 512" width="256" height="256" xmlns="http://www.w3.org/2000/svg" style="position:absolute;top:0px;left:0px;width:100vw;height:100vh;">

<style>
:root {
	--grass-dark: #7ebe54;
	--grass-light: #97c667;
	--dirt-dark: #79553a;
	--dirt-light: #b9855c;
	
	--face-size: 32px;
	--face-size-half: calc(var(--face-size) / 2);

	--grass-dark: #7ebe54;
	--grass-light: #97c667;
	--dirt-dark: #79553a;
	--dirt-light: #b9855c;

	--chest-fill: #a26b23;
	--chest-stroke: #362f25;

	
	--checkerboard:
		linear-gradient(black 2%, transparent 2%, transparent 98%, black 98%),
		linear-gradient(90deg, black 2%, transparent 2%, transparent 98%, black 98%);
}

.root_container {
	display: flex;
	width: 512px;
	height: 512px;
	background-color: skyblue;
	overflow: hidden;
	align-items: center;
	justify-content: center;
	perspective: 300px;
/* 	perspective-origin: 50% 50%; */
/* 	perspective-origin: 50% 30%; */
	perspective-origin: 50% 20%;
}
.root {
/* 	perspective: 60px; */
	transform-style: preserve-3d;
	width: var(--face-size);
	height: var(--face-size);
	animation: root-spin 4s linear infinite;
}

@keyframes root-spin {
	0%   { transform: rotateY(0turn); }
	100% { transform: rotateY(1turn); }
}

.face {
	position: absolute;
	background-color: #F002;
	box-sizing: border-box;
	--background-size-scale: 1;
	background-size: calc(var(--background-size-scale) * var(--face-size)) calc(var(--background-size-scale) * var(--face-size));
	image-rendering: pixelated;
/* 	opacity: 0.5; */
/* 	transform-origin: top left; */
}

.grass-side {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAeFBMVEVSbDBTbjFRazBJYitPaC5FXChNZi1YdDRMZSxKYitLZCxHXik8USJOZy1SbTBZdTVUbzFVcDKWbEpLYytHXylefDhcejdMZS1beDZ5VTpjgzxIYCpPaS5YdTReezhhfzpZPSlBViVGXShsbGy5hVxQai+Hh4d0WERQrb6MAAAAkUlEQVR42jXNhUFDARAFwYu7LbroQR6f/ivEmQamajSeTKaz+WK0XK03213t54fjiYvL2dX1eDNf3dStd/drH6zHp+d+ebU4x7c2M3YYLCSN0p6lLRuku7XVVNRBExOR0gSUBoVCEVtQ25LWblUTKTExdNIwWChEzmBjl40QfyUl+i7YaQOFHdtO/G8DDoKC/Qmx1BfCx2UnPwAAAABJRU5ErkJggg==");
}
.grass-top {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAMAAAAoLQ9TAAAAvVBMVEVSbDBukEJRazBJYitPaC5FXChNZi1YdDRTbjFMZSxKYitLZCxdezc8USJOZy1SbTBZdTVUbzFVcDJGXShHXylefDhcejdMZS1beDZEWydIYCpLYytPaS5YdTReezhhfzpBViVmhj1AViVJYSpQai9Ray9IXypadzVgfjlhgDpoiT8/VSRffjlUbzJBVyVHXilWcjNOaC5ceTdlhT1XczNEWidffThkhDxmhz1sjUFCWCZDWSZCWSZZdjVrjUCjIKlNAAAA40lEQVR42gUAgZpCMPi3Nmx2GAQTJ+bUpeGKS1fv/1j3ARhot8PEtGzKHP7hgmf6IgiDiMR7ZJgsgdTNckcWBRzKin2GNRwbKtogU6RzBU54Bl9d1fUn2Z+/Q34h0oVguO617Y3Mk91VTgBknAvVUZKzn77lAgNmt6S4p7momMY+iYGP9dLralyXSDXIIiCiX9cclpC1Kp5WrGG0xBzVE3psvMNSYMirXSpy5QhlPleSUTgLTYO2+aMtzQ7zJkCXR5UF2nihcvRleYL09XiuF0DE81h8SzZobOmkA6DpfY/zQlr/QxgZnqgPDc4AAAAASUVORK5CYII=");
}
.dirt {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQBAMAAADt3eJSAAAAFVBMVEV5VTp0WESWbEq5hVyHh4dsbGxZPSnofxQIAAAAaUlEQVR4XgWAwQnDMAxFH19U544gFOqzsCHnnDpAJxAJeP8RCjMsaTPU+lrMTXlR7OJTw1IWxHEzXmo8tdsxistqSbCSkSQhuYJG7Q1LyGo+Z16EDv3idjyygIV4p5+WxOO+RBIzriT9D3iRD0YTDb7VAAAAAElFTkSuQmCC");
}
.chest-side {
/* 	--background-size-scale: 0.875; */
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAY1BMVEUfHBchHRcnIx4oJB0qJR0qJR4rJh8sJR0zLiU2LyU2MCY3MSdBOy9EPDBFPC9FPTFGPjJpUilzVi51VCl3WjCCWyZ/XyKEYi+OYSaSYyOQZiqVbC6iayOnbh+kciereS2PaR2blygDAAAAb0lEQVQIHQXAMVJEMQgA0Acho6WF97+khe7+BJz4OpS5BX/lGy2YyZ+6J2AMHbXebM9+rJB1XkHcRHtXfXZyyaCrCzbD7coPeo0hztQJsmW48ahqIdExpXo0AdNRmcQE9Mryy/ZsT8URZbXsIe46/x9RODOJSABXAAAAAElFTkSuQmCC");
}
.chest-top {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAP1BMVEUrJh8zLiU3MSc2MCYoJB2EYi+SYyOQZip/XyI1LyaOYSanbh+iayM2LyWPaR2reS2kcieVbC4qJR04LyUyLSYraup3AAAAe0lEQVR42kXMSxLDIAwEUUkJIAz6xbn/WTOUF+mC1fAgYmaRFy56k7Q+hp6GNqZ5rae9dzcSdY/wcF85hFgzMzyRK5NUBlaMESVkfaO/rYgFfUgx8fkK7rw+diQowjyY7FqPhb4e65hRlpA01apzRjWhj91z3tPM5nfyDxClCDir1GCnAAAAAElFTkSuQmCC");
}
.chest-front {
	background-image: url("data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA4AAAAOCAMAAAAolt3jAAAAflBMVEVFPTFEPDBFPC9GPjJBOy82MCYzLiUsJx8sJx4rJh8qJR4qJR0sJR0oJB0nIx4hHRcfHBdFNRpUPhZhQRZhSSdzTx53UBx5WCV1VClzVi53WjCCWyZ/XyKFXB+IWRmLYiSOYSaSYyOQZiqVbC6iayOnbh+kciereS2PaR2EYi+Nf4loAAAAfUlEQVR42g2Hx0FAQRBCH7Pz81E7sP+2vJqzgktGQxD+OgCjuRP4o3aSum//Cb7eyAp21ydsX+j1XITVFSjBH+Ls3EZ8/8FW8NDZAj/F2JnVWsE3IaAxr6BMiT990TGiACsr88oggNitAYoAPNz8frHxNbVqRRcyZUH6d/kHB/Y5bEONcbAAAAAASUVORK5CYII=");
}
</style>

<foreignObject x="0%" y="0%" width="100%" height="100%">
<div class="root_container" xmlns="http://www.w3.org/1999/xhtml">
<div class="root">
</div>
</div>

</foreignObject>


</svg>

onqgrwk.markdown

oNqGRWK

A Pen by adrianmgg on CodePen.

License.

script.js

import { create, createNS } from "https://cdn.skypack.dev/@amgg/elhelper@2.0.5";

const createSVG = (...args) => createNS('http://www.w3.org/2000/svg', ...args);

const root = document.querySelector('.root');

const face_size = 32;

const faces = [
	// [[x, y, z], [rx, ry], [w, h], [classes]]
	// [[0, 1, 0], [0, 0], [1, 1], []],
	// [[0, 1, 0], [1, 0], [1, 1], []],
	// [[0, 1, 0], [0, 1], [1, 1], []],
	
	[[.5, .5, -1.5], [1, 0], [3, 3], ['grass-top'], []],
	[[-2.5, .5, 1.5], [1, 0], [6, 3], ['grass-top'], []],

	[[0.5, 3, 0], [0, 1], [6, 2], ['dirt'], []],
	[[0.5, 2, 0], [0, 1], [6, 1], ['grass-side'], []],
	[[-2.5, 3, 3], [0, 0], [6, 2], ['dirt'], []],
	[[-2.5, 2, 3], [0, 0], [6, 1], ['grass-side'], []],
	[[-2.5, 3, 0], [0, 0], [3, 2], ['dirt'], []],
	[[-2.5, 2, 0], [0, 0], [3, 1], ['grass-side'], []],
	[[-1, 3, -1.5], [0, 1], [3, 2], ['dirt'], []],
	[[-1, 2, -1.5], [0, 1], [3, 1], ['grass-side'], []],
	[[.5, 3, -3], [0, 0], [3, 2], ['dirt'], []],
	[[.5, 2, -3], [0, 0], [3, 1], ['grass-side'], []],
	[[-4, 3, 1.5], [0, 1], [3, 2], ['dirt'], []],
	[[-4, 2, 1.5], [0, 1], [3, 1], ['grass-side'], []],
	
	// TODO fix chest size (shouldn't be full block)
	// TODO add chest latch thing
	[[1, 1, -1.5], [0, 1], [1, 1], ['chest-side'], []],
	[[2, 1, -1.5], [0, 1], [1, 1], ['chest-side'], []],
	[[1.5, 1, -1], [0, 0], [1, 1], ['chest-side'], []],
	[[1.5, 1, -2], [0, 0], [1, 1], ['chest-front'], []],
	[[1.5, .5, -1.5], [1, 0], [1, 1], ['chest-top'], []],


// 	[[0,  2, 1], [0, 0], ['grass-side']],
// 	[[1,  2, 1], [0, 0], ['grass-side']],
// 	[[-1, 2, 1], [0, 0], ['grass-side']],
// 	[[0,  3, 1], [0, 0], ['dirt']],
// 	[[1,  3, 1], [0, 0], ['dirt']],
// 	[[-1, 3, 1], [0, 0], ['dirt']],
// 	[[0,  4, 1], [0, 0], ['dirt']],
// 	[[1,  4, 1], [0, 0], ['dirt']],
// 	[[-1, 4, 1], [0, 0], ['dirt']],
// 	[[1.5, 2, 1.5], [0, 1], ['grass-side']],
// 	[[1.5, 2, 2.5], [0, 1], ['grass-side']],
// 	[[1.5, 2, 3.5], [0, 1], ['grass-side']],
// 	[[1.5, 3, 1.5], [0, 1], ['dirt']],
// 	[[1.5, 3, 2.5], [0, 1], ['dirt']],
// 	[[1.5, 3, 3.5], [0, 1], ['dirt']],
// 	[[1.5, 4, 1.5], [0, 1], ['dirt']],
// 	[[1.5, 4, 2.5], [0, 1], ['dirt']],
// 	[[1.5, 4, 3.5], [0, 1], ['dirt']],

// 	[[-1.5, 2, 1.5], [0, 1], ['grass-side']],
// 	[[-1.5, 2, 2.5], [0, 1], ['grass-side']],
// 	[[-1.5, 2, 3.5], [0, 1], ['grass-side']],
// 	[[-1.5, 3, 1.5], [0, 1], ['dirt']],
// 	[[-1.5, 3, 2.5], [0, 1], ['dirt']],
// 	[[-1.5, 3, 3.5], [0, 1], ['dirt']],
// 	[[-1.5, 4, 1.5], [0, 1], ['dirt']],
// 	[[-1.5, 4, 2.5], [0, 1], ['dirt']],
// 	[[-1.5, 4, 3.5], [0, 1], ['dirt']],
];

console.log('----------------------------------------------------------------');

const identity_mat = new DOMMatrixReadOnly([
	1, 0, 0, 0,
	0, 1, 0, 0,
	0, 0, 1, 0,
	0, 0, 0, 1,
]);

for(const [[x, y, z], [rx, ry], [w, h], classes, mat_funcs] of faces) {
	let mat = identity_mat
		// .translate(-w*face_size/2, -h*face_size/2, -h*face_size/2)
		// .translate(-w*face_size/2, 0, -h*face_size/2)
		.translate(x*face_size, y*face_size, z*face_size)
		.translate(0,-2*face_size, 0)
		.rotate(rx*90, ry*90, 0)
		// .scale(w, h, 1, -x*face_size, -y*face_size, -z*face_size)
		;
	for(const f of mat_funcs) mat = f(mat);
	create('div', {
		parent: root,
		classList: ['face', ...classes],
		style: {
			transform: mat.toString(),
			width: `${w * face_size}px`,
			height: `${h * face_size}px`,
		},
	});
	console.log([w, h], classes, `((${mat.m11}, ${mat.m12}, ${mat.m13}, ${mat.m14}), (${mat.m21}, ${mat.m22}, ${mat.m23}, ${mat.m24}), (${mat.m31}, ${mat.m32}, ${mat.m33}, ${mat.m34}), (${mat.m41}, ${mat.m42}, ${mat.m43}, ${mat.m44}))`);
}