spb/svgarden Public

1<!--2  ============================================================3  SVGarden — https://www.svgarden.dev4  Author : Simon-Pierre Boucher5  Contact: contact@spboucher.ai6  File   : snippets/filters/displacement-glitch.html7  Desc   : Periodic glitch distortion pulses on a logo mark8  ============================================================9-->10<!--svgarden11title: Displacement glitch12slug: displacement-glitch13category: filters14tags: [filter, glitch, displacement, logo]15difficulty: advanced16techniques: [feDisplacementMap, "feTurbulence (fractalNoise)", SMIL-keyTimes-discrete, rgb-split]17how_it_works: >18  The tear comes from feTurbulence tuned anisotropically — baseFrequency is19  nearly zero on X and high on Y, producing horizontal noise bands — which20  feDisplacementMap converts into sideways slice shifts, the signature CRT21  glitch. A SMIL animate drives the displacement scale through a values list22  with calcMode="discrete", so the distortion jumps between states instead of23  easing, arriving in stuttering bursts. Two offset copies of the mark in24  broadcast magenta and cyan flash in sync via stepped CSS keyframes to fake25  the RGB channel split of a failing signal.26customizable:27  - { var: "--sg-color", label: "Mark color", type: color, default: "#7F77DD" }28  - { var: "--sg-size",  label: "Size",       type: range, min: 48, max: 200, default: 96, unit: px }29created: 2026-08-1030-->31<div class="sg-displacement-glitch" style="--sg-color:#7F77DD; --sg-size:96px;">32  <svg viewBox="0 0 32 32" aria-hidden="true" focusable="false">33    <defs>34      <g id="sg-displacement-glitch-mark">35        <rect x="14.7" y="13" width="2.6" height="15" rx="1.3" />36        <path d="M16 18 C 16 12, 10 12, 7 7 C 14 7, 17 11, 16 18 Z" />37        <path d="M16 22 C 16 17, 21 17, 25 12 C 18 12, 15 16, 16 22 Z" />38      </g>39      <filter id="sg-displacement-glitch-f" x="-30%" y="-30%" width="160%" height="160%">40        <feTurbulence type="fractalNoise" baseFrequency="0.002 0.55" numOctaves="1" seed="8" result="bands" />41        <feDisplacementMap in="SourceGraphic" in2="bands" xChannelSelector="R" yChannelSelector="G" scale="0">42          <animate attributeName="scale" dur="2.6s" repeatCount="indefinite" calcMode="discrete"43            values="0; 0; 9; 2; 7; 0; 4; 0" keyTimes="0; 0.55; 0.6; 0.65; 0.7; 0.75; 0.78; 0.82" />44        </feDisplacementMap>45      </filter>46    </defs>47    <use class="sg-displacement-glitch-r" href="#sg-displacement-glitch-mark" />48    <use class="sg-displacement-glitch-b" href="#sg-displacement-glitch-mark" />49    <use class="sg-displacement-glitch-main" href="#sg-displacement-glitch-mark"50      filter="url(#sg-displacement-glitch-f)" />51  </svg>52</div>53<style>54  .sg-displacement-glitch {55    width: var(--sg-size);56    height: var(--sg-size);57  }58  .sg-displacement-glitch svg {59    display: block;60    width: 100%;61    height: 100%;62  }63  .sg-displacement-glitch-main {64    fill: var(--sg-color);65  }66  .sg-displacement-glitch-r,67  .sg-displacement-glitch-b {68    opacity: 0;69    animation: sg-displacement-glitch-split 2.6s steps(2, jump-none) infinite;70  }71  .sg-displacement-glitch-r {72    fill: #f43f7d;73    transform: translateX(-0.045em);74  }75  .sg-displacement-glitch-b {76    fill: #2fd2f0;77    transform: translateX(0.045em);78    animation-delay: 0.05s;79  }80  @keyframes sg-displacement-glitch-split {81    0%, 54%  { opacity: 0; }82    58%, 74% { opacity: 0.85; }83    82%, 100% { opacity: 0; }84  }85</style>86