<div class="wrapper">
	
	<label><input type="radio" name="type" value="fractalNoise" />fractalNoise</label>
	<label><input type="radio" name="type" value="turbulence" checked/> turbulence</label>
	

<svg width="250" height="250">
  
  <filter id='noise' x='0%' y='0%' width='100%' height='100%'>
      <feTurbulence baseFrequency="0.03" type="turbulence" />
</filter>
  
	<rect x="0" y="0" width="100%" height="100%" filter="url(#noise)" fill="none"></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="radio"]{
	margin-right: .25em;
	vertical-align: middle;
}

label {
	font-size: 1.5em;
	display: inline-block;
	margin: 1.2em;
}

.wrapper {
	max-width: 80%;
}
View Compiled
(function() {
	var radios = document.getElementsByName("type"),
		SVG = document.querySelector("svg"),
		effect = SVG.querySelector("feTurbulence");
	
	for (var i = 0, length = radios.length; i < length; i++){
		radios[i].addEventListener('change', updateSVG);
	}
	
	function updateSVG() {
		effect.setAttribute("type", this.value);
	}
	
})();

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.