JSFiddle - React, Tailwind, and code Playground

by michapixel

HTML

<section>
    <svg>
      <filter id="noise">
        <feTurbulence id="turbulence">
          <animate attributeName="baseFrequency" dur="8s" repeatCount="indefinite" values="0.9 0.9;0.8 0.8; 0.9 0.9" ></animate>
        </feTurbulence>
        <feDisplacementMap in="SourceGraphic" scale="60"></feDisplacementMap>
      </filter>
    </svg>
</section>

CSS

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
body {
	background: red;
}
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: 10px 10px;
  filter: url(#noise);
  opacity: 0.2;
}

svg {
  	width: 0;
  	height: 0;
}