<div class="wrapper">
	<label for="bFControl">baseFrequency</label>
	<input type="range" min="0.01" max="1" value="0.05" step="0.01" id="bFControl"/> <span id="value">0.05</span>
	

<svg width="250" height="250">
  
  <filter id='noise' x='0%' y='0%' width='100%' height='100%'>
      <feTurbulence baseFrequency="0.05" />
</filter>
  
  <rect x="0" y="0" width="100%" height="100%" filter="url(#noise)" fill="none">
    
</svg>
	</div>
	
@import url('https://fonts.googleapis.com/css?family=Yanone+Kaffeesatz');

body {
	padding: 5vw;
	font-family: 'Yanone Kaffeesatz', sans-serif;
	background-color: #212121;
	color: #fff;
}

svg {
	display: block;
	width: 100%;
	margin-top: 1em;
	background: #fff;
}

input[type="range"]{
	max-width: 300px;
}

#value {
	font-size: 1.1em;
	margin-left: .5em;
}

label {
	font-size: 1.5em;
	display: block;
	margin-bottom: 1em;
}

.wrapper {
	max-width: 80%;
}
View Compiled
// baseFrequency Control
(function() {
	var bFControl = document.getElementById("bFControl"),
		bFSVG = document.querySelector("#bFControl ~ svg"),
		effect = bFSVG.querySelector("feTurbulence"),
		val = document.querySelector("#value");

	bFControl.addEventListener("change", updatebFSVG);
	bFControl.addEventListener("input", updatebFSVG);

	function updatebFSVG() {
		let v = bFControl.value;
		
		val.innerText = v;

		effect.setAttribute("baseFrequency", v);
	}
})();

View Compiled
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.