<div class="retro-wave"></div>

@import "https://unpkg.com/open-props" layer(design.system);
@import "https://unpkg.com/open-props/normalize.min.css" layer(demo.support);

@layer demo {
  .retro-wave {
    background: var(--gradient-1);

    /* mask tldr;
       as the visible percentage increases,
       the masked percentage decreased
       visible starts at 1%
       masked starts at 7%
       for a recreding 7 hard lines mask effect
       (a loop and some calc could generate this)
    */
    mask: linear-gradient(
      to top,
      #000 1%,     /* 1% visible */
      0%,          /* hard line */
      #0000 8%,    /* 7% masked */
      0%,
      #000 10%,    /* 2% visible */
      0%,
      #0000 16%,   /* 6% masked */
      0%,
      #000 19%,    /* 3% visible */
      0%,
      #0000 24%,   /* 5% masked */
      0%,
      #000 28%,    /* 4% visible */
      0%,
      #0000 32%,   /* 4% masked */
      0%,
      #000 37%,    /* 5% visible */
      0%,
      #0000 40%,   /* 3% masked */
      0%,
      #000 46%,    /* 6% visible */
      0%,
      #0000 48%,   /* 2% masked */
      0%,
      #000 55%,    /* 7% visible */
      0%,
      #0000 56%,   /* 1% invisible */
      0%,
      #000 57%     /* visible til end */
    );
  }
}

@layer demo.support {
  body {
    background: hsl(280 100% 4%);
    display: grid;
    place-content: center;
    padding: var(--size-5);
    gap: var(--size-5);
  }
  
  .retro-wave {
    inline-size: min(60vmin, var(--size-content-3));
    aspect-ratio: var(--ratio-square);
    border-radius: var(--radius-round);
  }
}