JSFiddle - React, Tailwind, and code Playground

by anilsardemann

HTML

<section id="background">
    <svg viewBox="0 0 15 8" preserveAspectRatio="none">
      <defs>
        <filter id="filter" width="1" height="1" x="0" y="0">
          <feTurbulence id="noise" type="fractalNoise" numOctaves="25" baseFrequency="0.2" seed="20"></feTurbulence>
          <feComposite operator="arithmetic" k1="18" k2="1.2" k3="-3"></feComposite>
          <feComponentTransfer>
            <feFuncR type="gamma" amplitude="2" exponent="3" offset="0"></feFuncR>
            <feFuncG type="gamma" amplitude="1" exponent="4" offset="0"></feFuncG>
            <feFuncB type="gamma" amplitude="4" exponent="2" offset="0"></feFuncB>
          </feComponentTransfer>
        </filter>
      </defs>
      <g>
        <rect style="filter: url('#filter');" width="100" height="100" x="0" y="0"></rect>
      </g>
    </svg>
 </section>

CSS

body #background {
      position: absolute;
      top: 0px;
      left: 0px;
      height: 100%;
      width: 100%;
      mix-blend-mode: difference;
      animation: 5s ease-in-out 0s infinite alternate both running flicker;
      transition: opacity 0.3s ease 0s;
    }
    #background svg {
      width: 100%;
      height: 100%;
    }
    @keyframes flicker {
      0% {
        filter: brightness(1) contrast(1);
      }
      100% {
        filter: brightness(0.7) contrast(2.5);
      }
    }