spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/filters/turbulence-water.html7  Desc   : Living water ripple via animated feTurbulence displacement8  ============================================================9-->10<!--svgarden11title: Turbulence water12slug: turbulence-water13category: filters14tags: [filter, water, ripple, turbulence]15difficulty: advanced16techniques: [feTurbulence, feDisplacementMap, SMIL-on-filter-primitives, xChannelSelector]17how_it_works: >18  feTurbulence generates a field of Perlin noise, and feDisplacementMap uses that19  field as a map: each pixel of the source is pushed sideways by the red channel20  and vertically by the green channel, so smooth noise becomes a watery warp.21  The ripple lives because a SMIL animate retunes baseFrequency in a slow22  loop — changing the noise's spatial scale continuously reshapes the whole23  field, which reads as water moving. The pale stripes inside the shape exist24  purely to give the displacement visible material to bend.25customizable:26  - { var: "--sg-color", label: "Water", type: color, default: "#3E8ED0" }27  - { var: "--sg-size",  label: "Width", type: range, min: 100, max: 320, default: 180, unit: px }28created: 2026-08-1029-->30<div class="sg-turbulence-water" style="--sg-color:#3E8ED0; --sg-size:180px;">31  <svg viewBox="0 0 160 110" aria-hidden="true" focusable="false">32    <defs>33      <filter id="sg-turbulence-water-f" x="-15%" y="-15%" width="130%" height="130%">34        <feTurbulence type="turbulence" baseFrequency="0.014 0.045" numOctaves="2" seed="4" result="noise">35          <animate attributeName="baseFrequency" dur="7s" repeatCount="indefinite"36            values="0.014 0.045; 0.02 0.06; 0.014 0.045" />37        </feTurbulence>38        <feDisplacementMap in="SourceGraphic" in2="noise" scale="11"39          xChannelSelector="R" yChannelSelector="G" />40      </filter>41    </defs>42    <g filter="url(#sg-turbulence-water-f)">43      <rect class="sg-turbulence-water-pool" x="14" y="14" width="132" height="82" rx="18" />44      <path class="sg-turbulence-water-line" d="M26 38 H134" />45      <path class="sg-turbulence-water-line" d="M26 56 H134" />46      <path class="sg-turbulence-water-line" d="M26 74 H134" />47    </g>48  </svg>49</div>50<style>51  .sg-turbulence-water {52    width: var(--sg-size);53  }54  .sg-turbulence-water svg {55    display: block;56    width: 100%;57  }58  .sg-turbulence-water-pool {59    fill: var(--sg-color);60    opacity: 0.85;61  }62  .sg-turbulence-water-line {63    fill: none;64    stroke: rgba(255, 255, 255, 0.55);65    stroke-width: 3;66    stroke-linecap: round;67  }68</style>69