Created
July 28, 2022 03:27
-
-
Save adrianmgg/86e3c1e0f3ac727b3bf52bd56b18a62a to your computer and use it in GitHub Desktop.
oNqGRWK
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<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> | |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
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']], | |
]; | |
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}))`); | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment