SVG filter — поломанный текст

SVG фильтры FeTurbulence, feColorMatrix, feDisplacementMap, которые применили к тексту для придания эффекта повреждения, деформации букв

HTML

<svg>
  <filter id="filter">
    <feTurbulence type="turbulence" baseFrequency="0.002 0.008" numOctaves="2" seed="2" stitchTiles="stitch" result="turbulence"/>
    <feColorMatrix type="saturate" values="30" in="turbulence" result="colormatrix"/>
    <feColorMatrix type="matrix" values="1 0 0 0 0
  0 1 0 0 0
  0 0 1 0 0
  0 0 0 150 -15" in="colormatrix" result="colormatrix1"/>
    <feComposite in="SourceGraphic" in2="colormatrix1" operator="in" result="composite"/>
    <feDisplacementMap in="SourceGraphic" in2="colormatrix1" scale="15" xChannelSelector="R" yChannelSelector="A" result="displacementMap"/>
</filter>
</svg>

<div class="text" contenteditable>vector</div>

CSS

HTML, BODY {
  height: 100%;
}

BODY {
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #000;
  font: 23vw/1 Arial Black, sans-serif;
  text-align: center;
}

.text {
  white-space: nowrap;
  -webkit-filter: url(#filter);
          filter: url(#filter);
  outline: none;
  color: yellow;
}
.text::-moz-selection {
  background: rgba(255, 255, 255, 0.2);
}
.text::selection {
  background: rgba(255, 255, 255, 0.2);
}

svg {
  position: absolute;
  width: 0;
  height: 0;
}