<div class="wrapper">
	<label for="seedControl">seed</label>
	<input type="range" min="0" max="10" value="0" step="1" id="seedControl"/><span id="value">0</span>

<svg width="250" height="250">
  
  <filter id='noise2' x='0%' y='0%' width='100%' height='100%'>
      <feTurbulence baseFrequency="0.05" seed="0" />
</filter>
  
	<rect x="0" y="0" width="100%" height="50%" filter="url(#noise2)"></rect>
	<rect x="0" y="52%" width="100%" height="50%" filter="url(#noise2)"></rect>
    
</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%;
}

//seed Control
(function() {
	var seedControl = document.getElementById("seedControl"),
		seedSVG = document.querySelector("#seedControl ~ svg"),
		effect = seedSVG.querySelector("feTurbulence"),
		val = document.querySelector("#value");

	seedControl.addEventListener("change", updateseedSVG);
	seedControl.addEventListener("input", updateseedSVG);

	function updateseedSVG() {
		let v = seedControl.value;
		val.innerText = v;
		effect.setAttribute("seed", v);
	}
})();