Эффект анимированного шума на фон... Фон всего

Код шума по примеру: https://targetessa.ru/2021

Сперва добавляем картинку шума с помощью анимированного svg

<svg xmlns="http://www.w3.org/2000/svg">
  <!-- Filter -->
  <!-- Adjust filter size to stop overflow -->
  <filter id="filter" x="0.005" y="0.005" width="100%" height="100%">
    <!-- Noise -->
    <!-- numOctaves for level-of-detail, baseFreq for size/zoom-level of noise -->
    <feTurbulence type="turbulent" seed="1"
                  numOctaves="3" baseFrequency="0.618">
      <!-- Animate Noise -->
      <!-- 12fps default (120 / 10s == 12fps) -->
      <animate attributeName="seed" repeatCount="indefinite"
               dur="10s" from="1" to="120" />
    </feTurbulence>
    <!-- Greyscale -->
    <feColorMatrix type="saturate" values="0" />
    <!-- Blend Output -->
    <!-- Best blend-modes are probably overlay or soft-light -->
    <feBlend in2="SourceGraphic" mode="overlay" />
  </filter>
</svg>

Теперь вы можете двумя строчками кода добавить шум на фон чего угодно в своем таплинке. Например, на фон:

<style>
body::before {
background-color: grey;
  filter: url("#filter") !important;
  content: '';
  position: fixed;
  z-index: -1;
  width:100vw;
  height: 100vh;
  pointer-events: none;
  transform: scale(1.05);
}
  </style>

Также в любом html-коде, где вы видите строчку "background" вы можете заменить этот фон на "шумный" с помощью строки

background-color: grey;
filter: url("#filter");

Вместо "grey" можно использовать и любые другие цвета (но на оттенках серого вид лучше всего)

<canvas id="canvas"></canvas>
<style>
  #canvas {
      left: 0px;
    top: 0px;
  position: fixed;
  width: 100vw;
  height: 100vh;
/* Прозрачность генератора шума */
opacity: 0.4;
/* Если нужно, чтобы шум не накладывался на элементы, вместо 50 поставьте 1 */
  z-index: 50;
  pointer-events: none;
}
</style>
<script>
  var canvas = document.getElementById('canvas'),
    ctx = canvas.getContext('2d');

function resize() {
    canvas.width = window.innerWidth;
    canvas.height = window.innerHeight;
}
resize();
window.onresize = resize;

function noise(ctx) {
    
    var w = ctx.canvas.width,
        h = ctx.canvas.height,
        idata = ctx.createImageData(w, h),
        buffer32 = new Uint32Array(idata.data.buffer),
        len = buffer32.length,
        i = 0;

    for(; i < len;)
        buffer32[i++] = ((55 * Math.random())|0) << 24;
    
    ctx.putImageData(idata, 0, 0);
}

var toggle = true;

// added toggle to get 30 FPS instead of 60 FPS
(function loop() {
    toggle = !toggle;
    if (toggle) {
        requestAnimationFrame(loop);
        return;
    }
    noise(ctx);
    requestAnimationFrame(loop);
})();

</script>
  <style>
body:before {
background: none !important;
}
/* Цвет фона шума */
  html:before {
background-color: rgba(255,255,255,0.6) !important;
}
</style>