@property --c {
  syntax: '<color>';
  initial-value: #fff;
  inherits: true;
}

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;
  transition: --c 1s;
  
  &:hover {
    --c: #000;
  }

  &::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;
  }
}