<div>
  type：
  <label><input type="radio" name="type" value="fractalNoise" onchange="onTypeChange(arguments[0])" />fractalNoise</label>
  <label><input type="radio" name="type" value="turbulence" checked onchange="onTypeChange(arguments[0])" />turbulence</label>
</div>
<div>
  numOctaves：
  <input id="numOctaves" type="number" min="0" step="1" value="1" oninput="onNumOctavesChange(arguments[0])" />
</div>
<div>
  baseFrequency：
  <input id="baseFrequency" type="number" min="0" step="0.01" value="0" oninput="onBaseFrequencyChange(arguments[0])" />
</div>
<div>
  seed：
  <input id="seed" type="number" min="0" step="1" value="1" oninput="onSeedChange(arguments[0])" />
</div>
<div>
  stitchTiles：
  <label><input type="radio" name="stitchTiles" value="stitch" onchange="onStitchChange(arguments[0])" />stitch</label>
  <label><input type="radio" name="stitchTiles" value="noStitch" checked onchange="onStitchChange(arguments[0])" />noStitch</label>
</div>
<br>

<svg witdh="200" height="200" viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
  <filter id="myFilter" x="0" y="0" width="100%" height="100%">
    <feTurbulence id="feTurbulence" baseFrequency="0.025" />
  </filter>

  <rect x="0" y="0" width="200" height="200" filter="url(#myFilter)" />
</svg>

function onTypeChange(e) {
  const feTurbulence = document.getElementById("feTurbulence");
  feTurbulence.setAttribute("type", e.target.value);
}

function onNumOctavesChange(e) {
  const feTurbulence = document.getElementById("feTurbulence");
  feTurbulence.setAttribute("numOctaves", e.target.value);
}

function onBaseFrequencyChange(e) {
  const feTurbulence = document.getElementById("feTurbulence");
  feTurbulence.setAttribute("baseFrequency", e.target.value);
}

function onSeedChange(e) {
  const feTurbulence = document.getElementById("feTurbulence");
  feTurbulence.setAttribute("seed", e.target.value);
}

function onStitchChange(e) {
  const feTurbulence = document.getElementById("feTurbulence");
  feTurbulence.setAttribute("stitchTiles", e.target.value);
}