SVG Grain noise filter

by PhilQ

HTML

<svg id="test" width="300" height="300" viewBox="0 0 100 100" color-interpolation-filters="sRGB">
	<filter id="noise" x="-10%" y="-10%" width="120%" height="120%">
		<feTurbulence type="fractalNoise" baseFrequency="5" numOctaves="2" result="turbulence" />
		<feColorMatrix in="turbulence" type="luminanceToAlpha" result="turb2" />


		<feComponentTransfer in="turb2" result="b1">
			<feFuncA type="linear" slope="1.2"/><!-- 1.0 - 1.4 -->
		</feComponentTransfer>
		<feComponentTransfer in="b1" result="n1">
			<feFuncA type="table" tableValues="0 0 0 0 1"/>
		</feComponentTransfer>

		<feComponentTransfer in="turb2" result="invturb2">
			<feFuncA type="table" tableValues="1 0"/>
		</feComponentTransfer>
		<feComponentTransfer in="invturb2" result="b2">
			<feFuncA type="linear" slope="1.2"/><!-- 1.0 - 1.4 -->
		</feComponentTransfer>
		<feComponentTransfer in="b2" result="n2">
			<feFuncA type="table" tableValues="0 0 0 0 1"/>
		</feComponentTransfer>


		<feComponentTransfer in="n1" result="whitenoise">
			<feFuncR type="table" tableValues="1"/>
			<feFuncG type="table" tableValues="1"/>
			<feFuncB type="table" tableValues="1"/>
			<feFuncA type="table" tableValues="0 0.3"/>
		</feComponentTransfer>

		<feComponentTransfer in="n2" result="blacknoise">
			<feFuncR type="table" tableValues="0"/>
			<feFuncG type="table" tableValues="0"/>
			<feFuncB type="table" tableValues="0"/>
			<feFuncA type="table" tableValues="0 0.3"/>
		</feComponentTransfer>


		<feBlend in="SourceGraphic" in2="whitenoise" mode="lighten" result="blendwhite" />

		<feBlend in="SourceGraphic" in2="blacknoise" mode="darken" result="blendblack" />

		<feBlend in="blendblack" in2="whitenoise" mode="lighten" result="blendboth" />



		<feFlood x="0%" y="0%" width="50%" height="50%" result="topleft" />
		<feComposite in2="topleft" in="blendwhite" operator="in" result="topl" />

		<feFlood x="50%" y="0%" width="50%" height="50%" result="topright" />
		<feComposite in2="topright" in="blendblack"...

CSS

.enlarge {
	width: 400px;
	height: 400px;
}

JavaScript

$( document ).ready(function() {

	$('#test').on('click', function(ev) {
		$(this).toggleClass('enlarge');
	});

});