JSFiddle - React, Tailwind, and code Playground

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%">

			<feTurbulence type="fractalNoise" baseFrequency="0.03" stitchTiles="stitch" result="NOISE"/>
			<feColorMatrix
				in="MERGED"
				type="matrix"
				values="0 0 0 0 0
								0 0 0 0 0
								0 0 0 0 0
								4 4 4 0 -6"
			/>

		</filter>
	</defs>
</svg>

<div class="blobs"></div>

CSS

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

.blobs {
	background: #fff;
	filter: url(#noisify);
	height: 300px;
	width: 300px;
}