noise-blur svg filters

by Chris Ball

HTML

<svg class="visually-hidden" viewBox="0 0 400 400" height="400" width="400">
	<defs>
		<!-- noise filter -->
		<filter id="noisify" x="0%" y="0%" width="100%" height="100%">
			<!-- black background -->
			<feFlood flood-color="#000" flood-opacity="1" result="BLACK"/>
			<!-- blur input -->
			<feGaussianBlur in="SourceGraphic" edgeMode="none" stdDeviation="60" result="BLURREDSRC"/>
			<!-- bring da noise -->
			<feTurbulence type="fractalNoise" baseFrequency="0.5" stitchTiles="stitch" result="NOISE"/>
			<!-- merge above layers -->
			<feMerge result="MERGED">
    		<feMergeNode in="BLACK"/>
				<feMergeNode in="BLURREDSRC"/>
				<feMergeNode in="NOISE"/>
			</feMerge>
			<!-- up contrast and convert luminance to alpha -->
			<feColorMatrix
				in="MERGED"
				type="matrix"
				values="0 0 0 0 0
								0 0 0 0 0
								0 0 0 0 0
								2 2 2 0 -2.5"
			/>
		</filter>

		<!-- turn input red -->
		<filter id="red" x="0%" y="0%" width="100%" height="100%">
 			<feFlood flood-color="#c8414e" flood-opacity="1" result="COLOUR"/>
 			<feComposite in="COLOUR" in2="SourceGraphic" operator="in"/>
		</filter>

		<!-- turn input blue -->
		<filter id="alu" x="0%" y="0%" width="100%" height="100%">
 			<feFlood flood-color="#ACBFBF" flood-opacity="1" result="COLOUR"/>
 			<feComposite in="COLOUR" in2="SourceGraphic" operator="in"/>
		</filter>
	</defs>
</svg>

<svg width="100%" height="400" filter="url(#noisify) url(#red)">
	<filter id="filter">
		<feTurbulence type="fractalNoise" baseFrequency=".003" numOctaves="2" seed="4"/>
		<feComponentTransfer>
			<feFuncA type="discrete" tableValues="0 1 0"/>
		</feComponentTransfer>
		<feColorMatrix values="0 0 0 1 0
													 0 0 0 1 0
													 0 0 0 1 0
													 0 0 0 0 1"/>
	</filter>
  <rect width="100%" height="100%" filter="url(#filter)"/>
</svg>


<svg width="400" height="400" viewBox="0 0 400 400" fill="#fff" filter="url(#noisify) url(#red)">
	<circle cx="100" cy="150" r="100" />
	<circle cx="275" cy="275"...

SCSS

* {
  margin: 0;
  padding: 0;
}

body {
	height: 100%;
}

.visually-hidden {
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  height: 1px;
  overflow: hidden;
  position: absolute;
  white-space: nowrap;
  width: 1px;
}

.node-version {
	background: #000;
	height: 400px;
	position: relative;
	width: 100%;
	filter: url(#noisify) url(#alu);
	&::before,
	&::after {
		background: #fff;
		border-radius: 50%;
		content: '';
		display: block;
		height: 260px;
		position: absolute;
		width: 260px;
	}
	&::before {
		top: 50px;
		left: 50px;
	}
	&::after {
		top: 150px;
		left: 350px;
	}
}

.linear {
	background-image: linear-gradient(45deg, #fff 50%, #000 50%);
	height: 100vw;
	position: relative;
	width: 100vw;
	filter: url(#noisify) url(#alu);
}