Displacement glitch

<!--
  ============================================================
  SVGarden — https://www.svgarden.dev
  Author : Simon-Pierre Boucher
  Contact: contact@spboucher.ai
  File   : snippets/filters/displacement-glitch.html
  Desc   : Periodic glitch distortion pulses on a logo mark
  ============================================================
-->
<div class="sg-displacement-glitch" style="--sg-color:#7F77DD; --sg-size:96px;">
  <svg viewBox="0 0 32 32" aria-hidden="true" focusable="false">
    <defs>
      <g id="sg-displacement-glitch-mark">
        <rect x="14.7" y="13" width="2.6" height="15" rx="1.3" />
        <path d="M16 18 C 16 12, 10 12, 7 7 C 14 7, 17 11, 16 18 Z" />
        <path d="M16 22 C 16 17, 21 17, 25 12 C 18 12, 15 16, 16 22 Z" />
      </g>
      <filter id="sg-displacement-glitch-f" x="-30%" y="-30%" width="160%" height="160%">
        <feTurbulence type="fractalNoise" baseFrequency="0.002 0.55" numOctaves="1" seed="8" result="bands" />
        <feDisplacementMap in="SourceGraphic" in2="bands" xChannelSelector="R" yChannelSelector="G" scale="0">
          <animate attributeName="scale" dur="2.6s" repeatCount="indefinite" calcMode="discrete"
            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" />
        </feDisplacementMap>
      </filter>
    </defs>
    <use class="sg-displacement-glitch-r" href="#sg-displacement-glitch-mark" />
    <use class="sg-displacement-glitch-b" href="#sg-displacement-glitch-mark" />
    <use class="sg-displacement-glitch-main" href="#sg-displacement-glitch-mark"
      filter="url(#sg-displacement-glitch-f)" />
  </svg>
</div>
<style>
  .sg-displacement-glitch {
    width: var(--sg-size);
    height: var(--sg-size);
  }
  .sg-displacement-glitch svg {
    display: block;
    width: 100%;
    height: 100%;
  }
  .sg-displacement-glitch-main {
    fill: var(--sg-color);
  }
  .sg-displacement-glitch-r,
  .sg-displacement-glitch-b {
    opacity: 0;
    animation: sg-displacement-glitch-split 2.6s steps(2, jump-none) infinite;
  }
  .sg-displacement-glitch-r {
    fill: #f43f7d;
    transform: translateX(-0.045em);
  }
  .sg-displacement-glitch-b {
    fill: #2fd2f0;
    transform: translateX(0.045em);
    animation-delay: 0.05s;
  }
  @keyframes sg-displacement-glitch-split {
    0%, 54%  { opacity: 0; }
    58%, 74% { opacity: 0.85; }
    82%, 100% { opacity: 0; }
  }
</style>