JSFiddle - React, Tailwind, and code Playground

by Chris Ball

HTML

<svg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg' id="barry">
  <filter id='noiseFilter'>
    <feTurbulence 
      type='fractalNoise' 
      baseFrequency='0.65' 
      numOctaves='3' 
      stitchTiles='stitch'/>
  </filter>
  
  <rect width='100%' height='100%' filter='url(#noiseFilter)'/>
</svg>

<div class="grain"></div>

CSS

.grain {
	background:
		linear-gradient(45deg, blue, transparent),
		url('https://grainy-gradients.vercel.app/noise.svg');
	height: 400px;
	width: 100%;
  filter: contrast(130%) brightness(500%);
}