Edit in JSFiddle

<svg xmlns="http://www.w3.org/2000/svg" version="1.1" class="svg-filters">
  <defs>
    <filter id="filter">
      <feTurbulence type="fractalNoise" baseFrequency="0.01" numOctaves="1" result="warp"></feTurbulence>
    </filter>
  </defs>
</svg>
<textarea>SVG filters are awesome!</textarea>
var turb = document.querySelectorAll('#filter feTurbulence')[0];
var params = {
	baseFrequencyX: 0.01,
	baseFrequencyY: 0.01
}
var gui = new dat.GUI();
gui.add(params, 'baseFrequencyX').min(0.01).max(0.2).step(0.001).onChange(update);
gui.add(params, 'baseFrequencyY').min(0.01).max(0.2).step(0.001).onChange(update);

function update() {
	turb.setAttribute('baseFrequency', params.baseFrequencyX + ' ' + params.baseFrequencyY);
}
.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;
}







/* demo related */
html, body {
  height: 100%;
  margin: 0;
}
body {
  display: -webkit-box;
  display: -moz-box;
  display: box;
  display: -webkit-flex;
  display: -moz-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -moz-box-orient: vertical;
  box-orient: vertical;
  -webkit-box-direction: normal;
  -moz-box-direction: normal;
  box-direction: normal;
  -webkit-flex-direction: column;
  -moz-flex-direction: column;
  flex-direction: column;
  -ms-flex-direction: column;
  -webkit-box-pack: center;
  -moz-box-pack: center;
  box-pack: center;
  -webkit-justify-content: center;
  -moz-justify-content: center;
  -ms-justify-content: center;
  -o-justify-content: center;
  justify-content: center;
  -ms-flex-pack: center;
  -webkit-box-align: center;
  -moz-box-align: center;
  box-align: center;
  -webkit-align-items: center;
  -moz-align-items: center;
  -ms-align-items: center;
  -o-align-items: center;
  align-items: center;
}