Mesh wave grid

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/backgrounds/mesh-wave-grid.html
  Desc   : Pseudo-3D wireframe wave grid rolling toward the viewer
  ============================================================
-->
<div class="sg-mesh-wave-grid" style="--sg-color:#7F77DD; --sg-bg:#0D0B1E; --sg-size:170px;">
  <svg viewBox="0 0 400 210" preserveAspectRatio="none" aria-hidden="true" focusable="false">
    <defs>
      <linearGradient id="sg-mesh-wave-grid-sky" x1="0" y1="0" x2="0" y2="1">
        <stop class="sg-mesh-wave-grid-skytop" offset="0" />
        <stop offset="1" stop-color="#05060d" />
      </linearGradient>
    </defs>
    <rect x="0" y="0" width="400" height="210" fill="url(#sg-mesh-wave-grid-sky)" />
    <g class="sg-mesh-wave-grid-rays">
      <line x1="200" y1="26" x2="-60"  y2="210" /><line x1="200" y1="26" x2="30"  y2="210" />
      <line x1="200" y1="26" x2="115" y2="210" /><line x1="200" y1="26" x2="200" y2="210" />
      <line x1="200" y1="26" x2="285" y2="210" /><line x1="200" y1="26" x2="370" y2="210" />
      <line x1="200" y1="26" x2="460" y2="210" />
    </g>
    <g class="sg-mesh-wave-grid-rows">
      <path opacity="0.25"><animate attributeName="d" dur="5s" begin="0s" repeatCount="indefinite"
        values="M0 40 c 66 -3 134 3 200 0 c 66 -3 134 3 200 0;M0 40 c 66 3 134 -3 200 0 c 66 3 134 -3 200 0;M0 40 c 66 -3 134 3 200 0 c 66 -3 134 3 200 0" /></path>
      <path opacity="0.32"><animate attributeName="d" dur="5s" begin="-0.55s" repeatCount="indefinite"
        values="M0 54 c 66 -4 134 4 200 0 c 66 -4 134 4 200 0;M0 54 c 66 4 134 -4 200 0 c 66 4 134 -4 200 0;M0 54 c 66 -4 134 4 200 0 c 66 -4 134 4 200 0" /></path>
      <path opacity="0.4"><animate attributeName="d" dur="5s" begin="-1.1s" repeatCount="indefinite"
        values="M0 70 c 66 -6 134 6 200 0 c 66 -6 134 6 200 0;M0 70 c 66 6 134 -6 200 0 c 66 6 134 -6 200 0;M0 70 c 66 -6 134 6 200 0 c 66 -6 134 6 200 0" /></path>
      <path opacity="0.5"><animate attributeName="d" dur="5s" begin="-1.65s" repeatCount="indefinite"
        values="M0 88 c 66 -7 134 7 200 0 c 66 -7 134 7 200 0;M0 88 c 66 7 134 -7 200 0 c 66 7 134 -7 200 0;M0 88 c 66 -7 134 7 200 0 c 66 -7 134 7 200 0" /></path>
      <path opacity="0.6"><animate attributeName="d" dur="5s" begin="-2.2s" repeatCount="indefinite"
        values="M0 108 c 66 -9 134 9 200 0 c 66 -9 134 9 200 0;M0 108 c 66 9 134 -9 200 0 c 66 9 134 -9 200 0;M0 108 c 66 -9 134 9 200 0 c 66 -9 134 9 200 0" /></path>
      <path opacity="0.7"><animate attributeName="d" dur="5s" begin="-2.75s" repeatCount="indefinite"
        values="M0 130 c 66 -10 134 10 200 0 c 66 -10 134 10 200 0;M0 130 c 66 10 134 -10 200 0 c 66 10 134 -10 200 0;M0 130 c 66 -10 134 10 200 0 c 66 -10 134 10 200 0" /></path>
      <path opacity="0.8"><animate attributeName="d" dur="5s" begin="-3.3s" repeatCount="indefinite"
        values="M0 154 c 66 -12 134 12 200 0 c 66 -12 134 12 200 0;M0 154 c 66 12 134 -12 200 0 c 66 12 134 -12 200 0;M0 154 c 66 -12 134 12 200 0 c 66 -12 134 12 200 0" /></path>
      <path opacity="0.9"><animate attributeName="d" dur="5s" begin="-3.85s" repeatCount="indefinite"
        values="M0 180 c 66 -13 134 13 200 0 c 66 -13 134 13 200 0;M0 180 c 66 13 134 -13 200 0 c 66 13 134 -13 200 0;M0 180 c 66 -13 134 13 200 0 c 66 -13 134 13 200 0" /></path>
    </g>
  </svg>
</div>
<style>
  .sg-mesh-wave-grid {
    width: 100%;
    min-width: 240px;
    height: var(--sg-size);
    overflow: hidden;
    border-radius: 8px;
  }
  .sg-mesh-wave-grid svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .sg-mesh-wave-grid-skytop {
    stop-color: var(--sg-bg);
  }
  .sg-mesh-wave-grid-rays line {
    stroke: var(--sg-color);
    stroke-width: 1;
    opacity: 0.12;
  }
  .sg-mesh-wave-grid-rows path {
    fill: none;
    stroke: var(--sg-color);
    stroke-width: 1.5;
  }
</style>