JSFiddle - React, Tailwind, and code Playground
HTML
<section></section>
<svg>
<filter id="noise">
<feTurbulence id="turbulence">
<animate attributeName="baseFrequency" dur="8s" values="0.9 0.9;0.8 0.8; 0.9 0.9" ></animate>
</feTurbulence>
<feDisplacementMap in="SourceGraphic" scale="60"></feDisplacementMap>
</filter>
</svg>
CSS
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
section {
position: absolute;
top: -50px;
left: -50px;
width: calc(100% + 50px);
height: calc(100% + 50px);
background: repeating-linear-gradient(#111, #111 50%, white 50%, white);
background-size: 5px 5px;
filter: url(#noise);
}
svg {
width: 0;
height: 0;
}