JSFiddle - React, Tailwind, and code Playground

by Grsmto

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.5/dat.gui.min.js"></script>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
  <defs>
    <filter id="filter">
      <feTurbulence type="fractalNoise" baseFrequency="0.000001" numOctaves="1" result="warp"></feTurbulence>
      <feDisplacementMap xChannelSelector="R" yChannelSelector="G" scale="60" in="SourceGraphic" in2="warp"></feDisplacementMap>
    </filter>
  </defs>
</svg>
<textarea>SVG filters are awesome!</textarea>

CSS

.svg-filters {
  position: absolute;
  visibility: hidden;
  width: 1px;
  height: 1px;
}

textarea {
  -webkit-filter: url("#filter");
  filter: url("#filter");
  width: 200px;
  height: 100px;
  border: 2px solid black;
  box-shadow: 0 0 0 10px transparent;
}

JavaScript

var turb = document.querySelectorAll('#filter feTurbulence')[0];
var dm = document.querySelectorAll('#filter feDisplacementMap')[0];
var params = {
	baseFrequencyX: 0.0001,
	baseFrequencyY: 0.0001,
  scale: 30
}
var gui = new dat.GUI();
gui.add(params, 'baseFrequencyX').min(0.0001).max(0.2).step(0.001).onChange(update);
gui.add(params, 'baseFrequencyY').min(0.0001).max(0.2).step(0.001).onChange(update);
gui.add(params, 'scale').min(0).max(100).step(1).onChange(update);

function update() {
	turb.setAttribute('baseFrequency', params.baseFrequencyX + ' ' + params.baseFrequencyY);
  dm.setAttribute('scale', params.scale);
}