1body {
2 --s: 40px; /* the size of the wave */
3 --b: 18px; /* the thickness of the line*/
4
5 height: calc(100vh + 40px);
6 margin: -20px;
7 filter: blur(7px) contrast(20) hue-rotate(20deg);
8 background: #fff;
9 mix-blend-mode: darken;
10}
11body::before,
12body::after{
13 content: "";
14 position: fixed;
15 inset: 0;
16 background: linear-gradient(var(--_c,red) 0 0) left -100vw top 50% no-repeat;
17 --_g: calc(-.45*var(--s)), #0000 calc(99% - var(--b)),#000 calc(101% - var(--b)) 99%,#0000 101%;
18 --_s: calc(4*var(--s)) calc(3*var(--s));
19 --_r: calc(1.096*var(--s) + var(--b)/2);
20 -webkit-mask:
21 radial-gradient(var(--_r) at left 50% bottom var(--_g))
22 calc(50% - 2*var(--s)) calc(50% - 3*var(--s)/2 + var(--_o,0px))/var(--_s),
23 radial-gradient(var(--_r) at left 50% top var(--_g))
24 50% calc(50% + 3*var(--s)/2 + var(--_o,0px))/var(--_s);
25 animation: back 10s infinite linear;
26}
27body::after{
28 --_c: blue;
29 --_o: 3*var(--s)/2;
30 animation-direction: reverse;
31}
32
33@keyframes back {
34 to {background-position: right -100vw top 50%}
35}
36
37html {
38 background: #F4EAD5;
39 overflow: hidden;
40}
41html:before {
42 content: "";
43 position: fixed;
44 inset: 0;
45 background: inherit;
46}