spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/backgrounds/mesh-wave-grid.html7  Desc   : Pseudo-3D wireframe wave grid rolling toward the viewer8  ============================================================9-->10<!--svgarden11title: Mesh wave grid12slug: mesh-wave-grid13category: backgrounds14tags: [background, wireframe, pseudo-3d, smil]15difficulty: advanced16techniques: [SMIL-path-morph, perspective-spacing, phase-offset-begin, layered-opacity]17how_it_works: >18  There is no 3D here — the depth is drawn, not computed. Row spacing widens19  from 14 units at the horizon to 26 near the viewer, stroke opacity climbs20  from 0.25 to 0.9, and static rays fan out from a vanishing point; those21  three perspective cues do all the work. Each row then morphs between the22  same wave shape and its inverted twin via SMIL, and giving row n a begin23  offset of −0.55n seconds turns identical animations into a phase gradient,24  which reads as a swell rolling diagonally across the mesh. Same-structure25  d strings (one M, two relative curves) keep every tween smooth.26customizable:27  - { var: "--sg-color", label: "Grid color", type: color, default: "#7F77DD" }28  - { var: "--sg-bg",    label: "Sky color",  type: color, default: "#0D0B1E" }29  - { var: "--sg-size",  label: "Height",     type: range, min: 100, max: 280, default: 170, unit: px }30created: 2026-08-1031-->32<div class="sg-mesh-wave-grid" style="--sg-color:#7F77DD; --sg-bg:#0D0B1E; --sg-size:170px;">33  <svg viewBox="0 0 400 210" preserveAspectRatio="none" aria-hidden="true" focusable="false">34    <defs>35      <linearGradient id="sg-mesh-wave-grid-sky" x1="0" y1="0" x2="0" y2="1">36        <stop class="sg-mesh-wave-grid-skytop" offset="0" />37        <stop offset="1" stop-color="#05060d" />38      </linearGradient>39    </defs>40    <rect x="0" y="0" width="400" height="210" fill="url(#sg-mesh-wave-grid-sky)" />41    <g class="sg-mesh-wave-grid-rays">42      <line x1="200" y1="26" x2="-60"  y2="210" /><line x1="200" y1="26" x2="30"  y2="210" />43      <line x1="200" y1="26" x2="115" y2="210" /><line x1="200" y1="26" x2="200" y2="210" />44      <line x1="200" y1="26" x2="285" y2="210" /><line x1="200" y1="26" x2="370" y2="210" />45      <line x1="200" y1="26" x2="460" y2="210" />46    </g>47    <g class="sg-mesh-wave-grid-rows">48      <path opacity="0.25"><animate attributeName="d" dur="5s" begin="0s" repeatCount="indefinite"49        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>50      <path opacity="0.32"><animate attributeName="d" dur="5s" begin="-0.55s" repeatCount="indefinite"51        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>52      <path opacity="0.4"><animate attributeName="d" dur="5s" begin="-1.1s" repeatCount="indefinite"53        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>54      <path opacity="0.5"><animate attributeName="d" dur="5s" begin="-1.65s" repeatCount="indefinite"55        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>56      <path opacity="0.6"><animate attributeName="d" dur="5s" begin="-2.2s" repeatCount="indefinite"57        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>58      <path opacity="0.7"><animate attributeName="d" dur="5s" begin="-2.75s" repeatCount="indefinite"59        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>60      <path opacity="0.8"><animate attributeName="d" dur="5s" begin="-3.3s" repeatCount="indefinite"61        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>62      <path opacity="0.9"><animate attributeName="d" dur="5s" begin="-3.85s" repeatCount="indefinite"63        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>64    </g>65  </svg>66</div>67<style>68  .sg-mesh-wave-grid {69    width: 100%;70    min-width: 240px;71    height: var(--sg-size);72    overflow: hidden;73    border-radius: 8px;74  }75  .sg-mesh-wave-grid svg {76    display: block;77    width: 100%;78    height: 100%;79  }80  .sg-mesh-wave-grid-skytop {81    stop-color: var(--sg-bg);82  }83  .sg-mesh-wave-grid-rays line {84    stroke: var(--sg-color);85    stroke-width: 1;86    opacity: 0.12;87  }88  .sg-mesh-wave-grid-rows path {89    fill: none;90    stroke: var(--sg-color);91    stroke-width: 1.5;92  }93</style>94