body {
--s: 40px; /* the size of the wave */
--b: 18px; /* the thickness of the line*/
height: calc(100vh + 40px);
margin: -20px;
filter: blur(7px) contrast(20) hue-rotate(20deg);
background: #fff;
mix-blend-mode: darken;
}
body::before,
body::after{
content: "";
position: fixed;
inset: 0;
background: linear-gradient(var(--_c,red) 0 0) left -100vw top 50% no-repeat;
--_g: calc(-.45*var(--s)), #0000 calc(99% - var(--b)),#000 calc(101% - var(--b)) 99%,#0000 101%;
--_s: calc(4*var(--s)) calc(3*var(--s));
--_r: calc(1.096*var(--s) + var(--b)/2);
-webkit-mask:
radial-gradient(var(--_r) at left 50% bottom var(--_g))
calc(50% - 2*var(--s)) calc(50% - 3*var(--s)/2 + var(--_o,0px))/var(--_s),
radial-gradient(var(--_r) at left 50% top var(--_g))
50% calc(50% + 3*var(--s)/2 + var(--_o,0px))/var(--_s);
animation: back 10s infinite linear;
}
body::after{
--_c: blue;
--_o: 3*var(--s)/2;
animation-direction: reverse;
}
@keyframes back {
to {background-position: right -100vw top 50%}
}
html {
background: #F4EAD5;
overflow: hidden;
}
html:before {
content: "";
position: fixed;
inset: 0;
background: inherit;
}
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.