49 lines
933 B
HTML
49 lines
933 B
HTML
<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> |