spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/backgrounds/wave-divider.html7  Desc   : Animated layered wave section divider8  ============================================================9-->10<!--svgarden11title: Wave divider12slug: wave-divider13category: backgrounds14tags: [background, waves, divider, parallax]15difficulty: advanced16techniques: [periodic-paths, translate-property, layering, calc-durations]17how_it_works: >18  Each wave path repeats the exact same 600-unit curve segment three times, so19  sliding it left by precisely one wavelength lands on an identical shape —20  that's the whole secret of a seamless loop. The three layers animate the21  modern `translate` property (leaving `transform` free for their static22  vertical offsets) at 1×, 1.5× and 2.2× the base duration, and the speed23  difference creates the parallax depth.24customizable:25  - { var: "--sg-color",    label: "Wave color", type: color, default: "#7F77DD" }26  - { var: "--sg-size",     label: "Height",     type: range, min: 60, max: 200, default: 110, unit: px }27  - { var: "--sg-duration", label: "Speed",      type: range, min: 3, max: 16, step: 0.5, default: 7, unit: s }28created: 2026-08-1029-->30<div class="sg-wave-divider" style="--sg-color:#7F77DD; --sg-size:110px; --sg-duration:7s;">31  <svg viewBox="0 0 1200 120" preserveAspectRatio="none" aria-hidden="true" focusable="false">32    <path d="M0 60 c150 -38 450 38 600 0 c150 -38 450 38 600 0 c150 -38 450 38 600 0 V120 H0 Z" />33    <path d="M0 60 c150 -38 450 38 600 0 c150 -38 450 38 600 0 c150 -38 450 38 600 0 V120 H0 Z" />34    <path d="M0 60 c150 -38 450 38 600 0 c150 -38 450 38 600 0 c150 -38 450 38 600 0 V120 H0 Z" />35  </svg>36</div>37<style>38  .sg-wave-divider {39    width: 100%;40    min-width: 260px;41    height: var(--sg-size);42    overflow: hidden;43  }44  .sg-wave-divider svg {45    display: block;46    width: 100%;47    height: 100%;48  }49  .sg-wave-divider path {50    fill: var(--sg-color);51    animation: sg-wave-divider-roll var(--sg-duration) linear infinite;52  }53  .sg-wave-divider path:nth-of-type(1) {54    opacity: 0.25;55    transform: translateY(-14px);56    animation-duration: calc(var(--sg-duration) * 2.2);57  }58  .sg-wave-divider path:nth-of-type(2) {59    opacity: 0.5;60    transform: translateY(-7px);61    animation-duration: calc(var(--sg-duration) * 1.5);62  }63  @keyframes sg-wave-divider-roll {64    from { translate: 0 0; }65    to   { translate: -600px 0; }66  }67</style>68