console
<div class='box'>
<div class='a'></div>
<div class='b'></div>
<div class='c'></div>
<div class='d'></div>
<div class='e'></div>
<div class='f'></div>
<div class='g'></div>
<div class='h'></div>
<div class='i'></div>
<div class='j'></div>
<div class='s'></div>
</div>
$p:
$pi:
$b:
$o:
$dp:
$p2:
$s:
$y:
body{
width:100%;
height:100vh;
display:flex;
align-items:center;
justify-content:center;
background:linear-gradient(65deg, $b, $o, $y, $b);
.box{
width:500px;
height:500px;
position:relative;
max-width:100vw;
max-height:100vw;
box-shadow:0 20px 20px 0 rgba(0,0,0,0.2);
overflow:hidden;
.a,.b,.c,.d,.e,.f,.g,.h,.i, .j{
position:absolute;
width:100%;
height:100%;
left:0;
top:0;
background:$o;
animation:brighten 40s linear infinite alternate;
@keyframes brighten{
0%{
filter:brightness(0.75) hue-rotate(-15deg);
}
50%{
filter:brightness(1) hue-rotate(0deg);
}
100%{
filter:brightness(1) hue-rotate(0deg);
}
}
}
.a{
-webkit-clip-path: polygon(0% 36%, 42% 45%, 48% 49%, 46% 50%, 54% 54%, 52% 55%, 59% 60%, 59% 62%, 80% 73%, 76% 76%, 100% 89%, 82% 100%, 0% 100%);
clip-path: polygon(0% 36%, 42% 45%, 48% 49%, 46% 50%, 54% 54%, 52% 55%, 59% 60%, 59% 62%, 80% 73%, 76% 76%, 100% 89%, 82% 100%, 0% 100%);
z-index:10;
background:$p;
}
.b{
z-index:9;
-webkit-clip-path: polygon(100% 62%, 75% 51%, 0% 36%, 0% 100%, 100% 100%);
clip-path: polygon(100% 62%, 75% 51%, 0% 37%, 0% 100%, 100% 100%);
background:$pi;
}
.c{
z-index:10;
-webkit-clip-path: polygon(4% 49%, 100% 68%, 100% 57%);
clip-path: polygon(66% 49%, 100% 68%, 100% 57%);
background:linear-gradient(30deg,lighten($b, 10%) 57%, $b 57%);
animation:tide 5s ease-in-out infinite alternate;
@keyframes tide{
0%{
-webkit-clip-path: polygon(77% 52%, 100% 62%, 100% 57%);
clip-path: polygon(77% 52%, 100% 62%, 100% 57%);
}
100%{
-webkit-clip-path: polygon(4% 49%, 100% 68%, 100% 57%);
clip-path: polygon(66% 49%, 100% 68%, 100% 57%);
}
}
}
.d{
z-index:7;
-webkit-clip-path: polygon(77% 42%, 66% 46%, 60% 44%, 54% 45%, 47% 43%, 40% 45%, 100% 57%, 100% 44%, 88% 46%, 84% 44%, 81% 45%);
clip-path: polygon(77% 42%, 66% 46%, 60% 44%, 54% 45%, 47% 43%, 40% 45%, 100% 57%, 100% 44%, 88% 46%, 84% 44%, 81% 45%);
background:$dp;
}
.e{
z-index:6;
-webkit-clip-path: polygon(31% 43%, 46% 39%, 48% 41%, 59% 30%, 61% 33%, 72% 27%, 78% 31%, 83% 29%, 90% 37%, 100% 28%, 100% 58%);
clip-path: polygon(31% 43%, 46% 39%, 48% 41%, 59% 30%, 61% 33%, 72% 27%, 78% 31%, 83% 29%, 90% 37%, 100% 28%, 100% 58%);
background:$p2;
}
.f{
z-index:5;
-webkit-clip-path: polygon(0% 28%, 100% 15%, 100% 57%, 0% 36%);
clip-path: polygon(0% 28%, 100% 15%, 100% 57%, 0% 36%);
background:$s;
}
.g{
z-index:11;
-webkit-clip-path: polygon(0% 63%, 10% 48%, 7% 48%, 6% 45%, 4% 46%, 1% 46%, 5% 42%, 11% 42%, 9% 40%, 7% 41%, 6% 38%, 5% 39%, 2% 36%, 6% 36%, 11% 37%, 11% 35%, 8% 33%, 9% 33%, 7% 32%, 11% 32%, 13% 34%, 14% 38%, 21% 34%, 28% 38%, 26% 41%, 25% 39%, 24% 41%, 23% 39%, 22% 40%, 21% 39%, 21% 41%, 19% 39%, 18% 40%, 24% 45%, 24% 52%, 21% 55%, 21% 53%, 19% 55%, 19% 53%, 20% 51%, 18% 51%, 18% 50%, 17% 49%, 17% 47%, 15% 47%, 16% 51%, 14% 56%, 13% 57%, 13% 55%, 11% 55%, 13% 53%, 12% 53%, 13% 51%, 11% 51%, 1% 67%, 1% 68%);
clip-path: polygon(0% 63%, 10% 48%, 7% 48%, 6% 45%, 4% 46%, 1% 46%, 5% 42%, 11% 42%, 9% 40%, 7% 41%, 6% 38%, 5% 39%, 2% 36%, 6% 36%, 11% 37%, 11% 35%, 8% 33%, 9% 33%, 7% 32%, 11% 32%, 13% 34%, 14% 38%, 21% 34%, 28% 38%, 26% 41%, 25% 39%, 24% 41%, 23% 39%, 22% 40%, 21% 39%, 21% 41%, 19% 39%, 18% 40%, 24% 45%, 24% 52%, 21% 55%, 21% 53%, 19% 55%, 19% 53%, 20% 51%, 18% 51%, 18% 50%, 17% 49%, 17% 47%, 15% 47%, 16% 51%, 14% 56%, 13% 57%, 13% 55%, 11% 55%, 13% 53%, 12% 53%, 13% 51%, 11% 51%, 0% 67%, 0% 68%);
background:$dp;
transform-origin:0% 100%;
animation:swaying 5s ease-in-out infinite alternate;
@keyframes swaying{
0%{
transform:rotate(0deg);
-webkit-clip-path: polygon(0% 63%, 10% 48%, 7% 48%, 6% 45%, 4% 46%, 1% 46%, 5% 42%, 11% 42%, 9% 40%, 7% 41%, 6% 38%, 5% 39%, 2% 36%, 6% 36%, 11% 37%, 11% 35%, 8% 33%, 9% 33%, 7% 32%, 11% 32%, 13% 34%, 14% 38%, 21% 34%, 28% 38%, 26% 41%, 25% 39%, 24% 41%, 23% 39%, 22% 40%, 21% 39%, 21% 41%, 19% 39%, 18% 40%, 24% 45%, 24% 52%, 21% 55%, 21% 53%, 19% 55%, 19% 53%, 20% 51%, 18% 51%, 18% 50%, 17% 49%, 17% 47%, 15% 47%, 16% 51%, 14% 56%, 13% 57%, 13% 55%, 11% 55%, 13% 53%, 12% 53%, 13% 51%, 11% 51%, 1% 67%, 1% 68%);
clip-path: polygon(0% 63%, 10% 48%, 7% 48%, 6% 45%, 4% 46%, 1% 46%, 5% 42%, 11% 42%, 9% 40%, 7% 41%, 6% 38%, 5% 39%, 2% 36%, 6% 36%, 11% 37%, 11% 35%, 8% 33%, 9% 33%, 7% 32%, 11% 32%, 13% 34%, 14% 38%, 21% 34%, 28% 38%, 26% 41%, 25% 39%, 24% 41%, 23% 39%, 22% 40%, 21% 39%, 21% 41%, 19% 39%, 18% 40%, 24% 45%, 24% 52%, 21% 55%, 21% 53%, 19% 55%, 19% 53%, 20% 51%, 18% 51%, 18% 50%, 17% 49%, 17% 47%, 15% 47%, 16% 51%, 14% 56%, 13% 57%, 13% 55%, 11% 55%, 13% 53%, 12% 53%, 13% 51%, 11% 51%, 0% 67%, 0% 68%);
}
100%{
transform:rotate(-2deg) translateX(-1%) translateY(-1%);
-webkit-clip-path: polygon(0% 63%, 10% 48%, 7% 48%, 6% 45%, 4% 46%, 1% 46%, 5% 42%, 11% 42%, 9% 40%, 7% 41%, 6% 38%, 5% 39%, 2% 36%, 6% 36%, 11% 37%, 11% 35%, 8% 33%, 9% 33%, 7% 32%, 11% 32%, 13% 34%, 14% 38%, 21% 34%, 28% 38%, 26% 41%, 25% 39%, 24% 41%, 23% 39%, 22% 40%, 21% 39%, 21% 41%, 19% 39%, 18% 40%, 24% 45%, 24% 52%, 21% 55%, 21% 53%, 19% 55%, 19% 53%, 20% 51%, 18% 51%, 18% 50%, 17% 49%, 17% 47%, 15% 47%, 16% 51%, 14% 56%, 13% 57%, 13% 55%, 11% 55%, 13% 53%, 12% 53%, 13% 51%, 11% 51%, 1% 67%, 1% 68%);
clip-path: polygon(0% 63%, 10% 48%, 7% 48%, 6% 45%, 4% 46%, 1% 46%, 5% 42%, 11% 42%, 9% 40%, 7% 41%, 6% 38%, 5% 39%, 2% 36%, 6% 36%, 11% 37%, 11% 35%, 8% 37%, 9% 35%, 7% 32%, 11% 34%, 13% 34%, 14% 38%, 21% 36%, 28% 41%, 26% 46%, 25% 44%, 24% 41%, 23% 39%, 22% 44%, 21% 39%, 21% 41%, 19% 39%, 18% 40%, 24% 45%, 24% 52%, 21% 55%, 21% 56%, 19% 58%, 19% 53%, 20% 55%, 18% 55%, 18% 54%, 17% 49%, 17% 47%, 15% 47%, 16% 51%, 14% 56%, 13% 57%, 13% 55%, 11% 55%, 13% 53%, 12% 53%, 13% 51%, 11% 51%, 0% 67%, 0% 68%);
}
}
}
.h{
z-index:11;
-webkit-clip-path: polygon(0% 71%, 5% 71%, 13% 75%, 13% 77%, 14% 80%, 12% 81%, 15% 86%, 12% 84%, 15% 89%, 11% 86%, 13% 89%, 7% 88%, 9% 91%, 5% 89%, 7% 92%, 4% 90%, 4% 94%, 2% 93%, 3% 95%, 2% 97%, 6% 100%, 0% 99%);
clip-path: polygon(0% 71%, 5% 71%, 13% 75%, 13% 77%, 14% 80%, 12% 81%, 15% 86%, 12% 84%, 15% 89%, 11% 86%, 13% 89%, 7% 88%, 9% 91%, 5% 89%, 7% 92%, 4% 90%, 4% 94%, 2% 93%, 3% 95%, 2% 97%, 6% 100%, 0% 99%);
background:$dp;
animation:blowing 3s ease-in-out infinite alternate;
@keyframes blowing{
from{
-webkit-clip-path: polygon(0% 71%, 5% 71%, 13% 75%, 13% 77%, 14% 80%, 12% 81%, 15% 86%, 12% 84%, 15% 89%, 11% 86%, 13% 89%, 7% 88%, 9% 91%, 5% 89%, 7% 92%, 4% 90%, 4% 94%, 2% 93%, 3% 95%, 2% 97%, 6% 100%, 0% 99%);
clip-path: polygon(0% 71%, 5% 71%, 13% 75%, 13% 77%, 14% 80%, 12% 81%, 15% 86%, 12% 84%, 15% 89%, 11% 86%, 13% 89%, 7% 88%, 9% 91%, 5% 89%, 7% 92%, 4% 90%, 4% 94%, 2% 93%, 3% 95%, 2% 97%, 6% 100%, 0% 99%);
}
to{
-webkit-clip-path: polygon(0% 71%, 5% 71%, 13% 75%, 13% 77%, 14% 80%, 12% 81%, 15% 86%, 12% 84%, 15% 89%, 11% 86%, 13% 89%, 7% 88%, 9% 91%, 5% 89%, 7% 92%, 4% 90%, 4% 94%, 2% 93%, 3% 95%, 2% 97%, 6% 100%, 0% 99%);
clip-path: polygon(0% 71%, 5% 71%, 13% 75%, 13% 79%, 14% 84%, 12% 81%, 15% 86%, 12% 84%, 15% 91%, 11% 90%, 13% 93%, 7% 88%, 9% 95%, 5% 89%, 7% 92%, 4% 90%, 4% 99%, 2% 100%, 3% 95%, 2% 97%, 6% 100%, 0% 99%);
}
}
}
.i{
z-index:11;
-webkit-clip-path: polygon(45% 100%, 67% 88%, 52% 77%, 61% 70%, 50% 63%, 55% 60%, 49% 57%, 51% 57%, 44% 50%, 42% 49%, 48% 56%, 46% 56%, 52% 60%, 47% 63%, 57% 70%, 46% 77%, 59% 89%, 34% 99%);
clip-path: polygon(45% 100%, 67% 88%, 52% 77%, 61% 70%, 50% 63%, 55% 60%, 49% 57%, 51% 57%, 44% 50%, 42% 49%, 48% 56%, 46% 56%, 52% 60%, 47% 63%, 57% 70%, 46% 77%, 59% 89%, 34% 100%);
background:$y;
}
.s{
position:absolute;
z-index:5;
width:25%;
height:25%;
background:$y;
border-radius:500%;
top:40%;
left:50%;
transform:translateX(-50%);
animation:sunrise 40s linear infinite alternate;
@keyframes sunrise{
0%{
transform:translateX(-50%) translateY(0%);
}
50%{
transform:translateX(-50%) translateY(-150%);
}
100%{
transform:translateX(-50%) translateY(-150%);
}
}
}
}
}