<svg
  xmlns="http://www.w3.org/2000/svg"
  xmlns:xlink="http://www.w3.org/1999/xlink"
  width="200"
  height="200"
  viewBox="0 0 100 100"
  role="img"
  aria-labelledby="title"
>
  <title id="title">
    A Turbulent World
  </title>
  
  <defs>
    <filter id="my-filter">
      <feTurbulence baseFrequency="0.1" seed="0" numOctaves="1" />
      <feComposite operator="in" in="SourceGraphic" />
    </filter>
  </defs>
  
  <circle cx="50" cy="50" r="50" filter="url('#my-filter')" />
</svg>

<form>
  <fieldset>
    <legend>Base Frequency</legend>
      <div>
        <label for="baseFrequencyX">x</label>
        <input type="range" name="baseFrequencyX" id="baseFrequencyX" value="0.1" min="0.01" max="2" step="0.01">
        <span aria-hidden="true" id="baseFrequencyXDisplay">0.01</span>
      </div>
      <div>
        <label for="baseFrequencyY">y</label>
        <input type="range" name="baseFrequencyY" id="baseFrequencyY" value="0.1" min="0.01" max="2" step="0.01">
        <span aria-hidden="true" id="baseFrequencyYDisplay">0.01</span>
      </div>
    </fieldset>
  <fieldset>
    <legend>Type</legend>
    <div>
      <input type="radio" name="type" id="turbulence" value="turbulence" checked>
      <label for="turbulence">Turbulence</label>
    </div>
    <div>
      <input type="radio" name="type" id="fractalNoise" value="fractalNoise">
      <label for="fractalNoise">Fractal Noise</label>
    </div>
  </fieldset>
  
  <div class="fake-fieldset">
    <label for="seed">Seed</label>
    <input type="number" name="seed" id="seed" value="0" />
  </div>
  
  <div class="fake-fieldset">
    <label for="numOctaves">Octaves</label>
    <input type="number" name="numOctaves" id="numOctaves" value="1" />
  </div>
</form>
body, html {
  align-items: center;
  justify-content: center;
  margin: 0; 
  display: flex; 
  height: 100%; 
  width: 100%;
}

* {
  font-family: sans-serif;
}

fieldset > div + div {
  margin-top: 0.25em;
}

fieldset > div {
  display: flex;
  align-items: center;
}

* + fieldset,
* + .fake-fieldset {
  margin-top: 1em;
}

fieldset, .fake-fieldset {
  border: 1px solid #a0a0a0;
  padding: 0.5em 1em;
  position: relative;
}

.fake-fieldset {
  padding-top: 1em;
}

.fake-fieldset label {
  position: absolute;
  left: 1em;
  top: -0.75em;
  font-weight: bold;
  background: #fff;
  padding: 0.25em;
}

input {
  margin-top: 0;
}

[type="range"] {
  margin: 0 0.5em;
  width: calc(100% - 4em);
}

[type="number"] {
  display: block;
  width: 100%;
  box-sizing: border-box;
}

legend {
  font-weight: bold;
}

form {
  margin-left: 1em;
}

svg {
  min-width: 8em;
}
const turbulence = document.querySelector('feTurbulence');

let frequencyX = 0.1;
let frequencyY = 0.1;

document.querySelectorAll('input').forEach(input => {
  input.addEventListener('input', ({target}) => {
    const {name, value} = target;
    if(name === 'baseFrequencyX') {
      frequencyX = value;
      turbulence.setAttribute('baseFrequency', `${frequencyX} ${frequencyY}`)
      document.querySelector('#baseFrequencyXDisplay').textContent = frequencyX;
    } else if(name === 'baseFrequencyY') {
      frequencyY = value;
      turbulence.setAttribute('baseFrequency', `${frequencyX} ${frequencyY}`)
      document.querySelector('#baseFrequencyYDisplay').textContent = frequencyY;
    } else {
      turbulence.setAttribute(name, value);
    }
  });
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.