0x6a4aa35b…a79esent to0xb8952959…ccf4·#23,942,477·view on Etherscan
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>SHARDS #6</title>
<style>
:root {
/* Pattern 1: 7 bands */
--color1: #4348ec;
--color2: #000;
--pos1: 0%;
--pos2: 8.33%;
--pos3: 25%;
--pos4: 41.67%;
--pos5: 58.33%;
--pos6: 75%;
--pos7: 91.67%;
/* Pattern 2: 5 bands */
--color2-1: #4656cd;
--color2-2: #000;
--pos2-1: 0%;
--pos2-2: 12.5%;
--pos2-3: 37.5%;
--pos2-4: 62.5%;
--pos2-5: 87.5%;
/* Pattern 3: 3 bands */
--color3-1: #07dcb6;
--color3-2: #000;
--color4-1: #93a7f0;
--color4-2: #000;
--pos3-1: 0%;
--pos3-2: 50%;
--pos3-3: 100%;
}
body {
background-color: black;
margin: 0;
padding: 0;
width: 100vw;
height: 100vh;
overflow: hidden;
}
.gradient-container {
position: absolute;
overflow: hidden;
transition: all 0.3s ease;
clip-path: var(--clip-path);
}
.gradient-up {
background-image: repeating-linear-gradient(
to bottom,
var(--color1) var(--pos1),
var(--color2) var(--pos2),
var(--color1) var(--pos3),
var(--color2) var(--pos4),
var(--color1) var(--pos5),
var(--color2) var(--pos6),
var(--color1) var(--pos7)
);
animation: moveUpwards 5s linear infinite;
}
.gradient-down {
background-image: repeating-linear-gradient(
to bottom,
var(--color2-1) var(--pos2-1),
var(--color2-2) var(--pos2-2),
var(--color2-1) var(--pos2-3),
var(--color2-2) var(--pos2-4),
var(--color2-1) var(--pos2-5)
);
animation: moveDownwards 5s linear infinite;
}
.gradient-left {
background-image: repeating-linear-gradient(
to right,
var(--color3-1) var(--pos3-1),
var(--color3-2) var(--pos3-2),
var(--color3-1) var(--pos3-3)
);
animation: moveLeft 5s linear infinite;
}
.gradient-right {
background-image: repeating-linear-gradient(
to right,
var(--color4-1) var(--pos1),
var(--color4-2) var(--pos2),
var(--color4-1) var(--pos3),
var(--color4-2) var(--pos4),
var(--color4-1) var(--pos5),
var(--color4-2) var(--pos6),
var(--color4-1) var(--pos7)
);
animation: moveRight 5s linear infinite;
}
.strobe {
background-color: #000;
}
@keyframes moveUpwards {
0% {
background-position: 0 100%;
}
100% {
background-position: 0 -100%;
}
}
@keyframes moveDownwards {
0% {
background-position: 0 -100%;
}
100% {
background-position: 0 100%;
}
}
@keyframes moveLeft {
0% {
background-position: 100% 0;
}
100% {
background-position: -100% 0;
}
}
@keyframes moveRight {
0% {
background-position: -100% 0;
}
100% {
background-position: 100% 0;
}
}
</style>
</head>
<body>
<div id="puzzle-container">
<div class="gradient-container gradient-right"
style="left: 0.0vw; top: 0.0vh; width: 14.583333333333334vw; height: 86.29629629629629vh;
background-size: 29.166666666666668vw 86.29629629629629vh; animation-duration: 56s; --clip-path: polygon(0% 0%, 112% 0%, 119% 108%, 0% 100%);">
</div>
<div class="gradient-container gradient-up"
style="left: 0.0vw; top: 86.29629629629629vh; width: 1.8229166666666667vw; height: 13.703703703703704vh;
background-size: 1.8229166666666667vw 27.40740740740741vh; animation-duration: 32s; --clip-path: polygon(0% 0%, -148% 37%, 177% 100%, 0% 100%);">
</div>
<div class="gradient-container gradient-right"
style="left: 1.8229166666666667vw; top: 86.29629629629629vh; width: 4.114583333333333vw; height: 1.574074074074074vh;
background-size: 8.229166666666666vw 1.574074074074074vh; animation-duration: 47s; --clip-path: polygon(-110% 318%, 203% -29%, 20% 343%, -19% -265%);">
</div>
<div class="gradient-container gradient-up"
style="left: 1.8229166666666667vw; top: 87.87037037037037vh; width: 4.114583333333333vw; height: 7.685185185185185vh;
background-size: 4.114583333333333vw 15.37037037037037vh; animation-duration: 66s; --clip-path: polygon(-19% -75%, 20% 50%, 94% 32%, 183% 92%);">
</div>
<div class="gradient-container gradient-up"
style="left: 1.8229166666666667vw; top: 95.55555555555556vh; width: 3.5937499999999996vw; height: 4.444444444444445vh;
background-size: 3.5937499999999996vw 8.88888888888889vh; animation-duration: 45s; --clip-path: polygon(209% -13%, 205% 157%, -84% 100%, 39% 100%);">
</div>
<div class="gradient-container gradient-left"
style="left: 5.416666666666667vw; top: 95.55555555555556vh; width: 0.5208333333333333vw; height: 4.444444444444445vh;
background-size: 1.0416666666666665vw 4.444444444444445vh; animation-duration: 2s; --clip-path: polygon(723% 157%, 53% -118%, -1324% 100%, -1269% 100%);">
</div>
<div class="gradient-container gradient-left"
style="left: 5.9375vw; top: 86.29629629629629vh; width: 2.5520833333333335vw; height: 11.018518518518519vh;
background-size: 5.104166666666667vw 11.018518518518519vh; animation-duration: 12s; --clip-path: polygon(167% -4%, -210% 61%, -178% 149%, -13% 83%);">
</div>
<div class="gradient-container gradient-up"
style="left: 5.9375vw; top: 97.31481481481481vh; width: 2.5520833333333335vw; height: 2.685185185185185vh;
background-size: 2.5520833333333335vw 5.37037037037037vh; animation-duration: 94s; --clip-path: polygon(-13% -71%, -178% 201%, -86% 100%, -291% 100%);">
</div>
<div class="gradient-container gradient-down"
style="left: 8.489583333333334vw; top: 86.29629629629629vh; width: 6.09375vw; height: 9.814814814814815vh;
background-size: 6.09375vw 19.62962962962963vh; animation-duration: 99s; --clip-path: polygon(-130% 68%, 145% 66%, -4% 163%, -87% 30%);">
</div>
<div class="gradient-container gradient-left"
style="left: 8.489583333333334vw; top: 96.11111111111111vh; width: 6.09375vw; height: 3.888888888888889vh;
background-size: 12.1875vw 3.888888888888889vh; animation-duration: 10s; --clip-path: polygon(-87% -177%, -4% 160%, 31% 100%, -78% 100%);">
</div>
<div class="gradient-container gradient-left"
style="left: 14.583333333333334vw; top: 0.0vh; width: 80.9375vw; height: 100.0vh;
background-size: 161.875vw 100.0vh; animation-duration: 76s; --clip-path: polygon(2% 0%, 98% 0%, 96% 100%, -5% 100%);">
</div>
<div class="gradient-container gradient-down"
style="left: 95.52083333333333vw; top: 0.0vh; width: 4.479166666666667vw; height: 1.1111111111111112vh;
background-size: 4.479166666666667vw 2.2222222222222223vh; animation-duration: 92s; --clip-path: polygon(-32% 0%, 100% 0%, 100% 349%, 27% -577%);">
</div>
<div class="gradient-container gradient-up"
style="left: 95.52083333333333vw; top: 1.1111111111111112vh; width: 4.479166666666667vw; height: 98.88888888888889vh;
background-size: 4.479166666666667vw 197.77777777777777vh; animation-duration: 94s; --clip-path: polygon(27% -8%, 100% 3%, 100% 100%, -79% 100%);">
</div>
</div>
</body>
</html>