body {
/* code adapted from Temani Afif's at CSS Tricks: https://css-tricks.com/how-to-create-wavy-shapes-patterns-in-css/ */
--s: 60px;
--c: #fff;
--c1: radial-gradient(68.08px at 50% calc(100% + 60px),#0000 calc(99% - 2px),#000 calc(101% - 2px) 99%,#0000 101%);
--c2: radial-gradient(68.08px at 50% -60px,#0000 calc(99% - 2px),#000 calc(101% - 2px) 99%,#0000 101%);
--s1: 120px 32px repeat-x;
--mask:
var(--c1) 0 calc(50% - 16px + .5px) / var(--s1),
var(--c2) var(--s) calc(50% + 16px) / var(--s1),
var(--c1) 0 calc(50% - 6px + .5px) / var(--s1),
var(--c2) var(--s) calc(50% + 26px) / var(--s1),
var(--c1) 0 calc(50% + 20px + .5px) / var(--s1),
var(--c2) var(--s) calc(50% + 52px) / var(--s1),
var(--c1) 0 calc(50% + 30px + .5px) / var(--s1),
var(--c2) var(--s) calc(50% + 62px) / var(--s1);
background: #aaa;
height: 100vh;
margin: 0;
overflow: hidden;
&::before {
background: linear-gradient(90deg, #000 50%, var(--c) 0) 0 0 / calc(var(--s) * 2) 100%;
content: "";
inset: 0;
mask: var(--mask);
position: absolute;
translate: 0 -100px;
}
&::after {
background: linear-gradient(90deg, #000 50%, var(--c) 0) calc(var(--s) / -2) 0 / calc(var(--s) * 2) 100%;
content: "";
inset: 0;
mask: var(--mask);
position: absolute;
translate: 0 100px;
}
}
About This Illusion
One set of lines looks straighter (top) while the other looks more curved (bottom). In reality, both sets are equally wavy. The only difference is how they are colored: changing the color at the peaks makes the lines look straighter. Changing it at the inflection points makes them look more curved.
The CSS code for the wavy lines is adapted from a Temani Afif snippet on CSS-Tricks and his wavy shape generator.
Try This
- Mouse over the demo to see the illusion in action.