Init

2024-08-20 08:13:30 +10:00 · 2024-08-20 08:13:30 +10:00 · 7eca6892db
commit 7eca6892db
3 changed files with 173 additions and 0 deletions
--- a/tiling.html
+++ b/tiling.html
@ -0,0 +1,49 @@
+<html>
+<head>
+	<title>Tiling</title>
+</head>
+<body>
+</body>
+<style>
+	@property --offset {
+	  syntax: '<length>';
+	  inherits: false;
+	  initial-value: 0px;
+	}
+
+	@keyframes shift {
+		0% {
+			--offset: 0px;
+		}
+
+
+		100% {
+			--offset: 100px;
+	  	}
+	}
+
+	body,
+	html {
+		height: 100vh;
+		width: 100vw;
+		padding: unset;
+		margin: unset;
+	}
+
+	body {
+		--offset: 0px;
+		--size: 20px;
+
+    	background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='40' height='40'>\
+    		<rect fill='%2391eae4' x='0' y='0' width='20px' height='20px'/>\
+    		<rect fill='%2386a8e7' x='0' y='20' width='20px' height='20px'/>\
+    		<rect fill='%2391eae4' x='20' y='20' width='20px' height='20px'/>\
+    		<rect fill='%2386a8e7' x='20' y='0' width='20px' height='20px'/>\
+    	</svg>");
+		
+		animation: shift 5s infinite linear;
+
+		background-position-x: var(--offset);
+		background-position-y: var(--offset);
+	}
+</style>