Svelte Noise Texture Overlay

noise.svelte

<script>
  import { onMount } from 'svelte';
  let canvas, vw, vh, ctx, timer;

  onMount(() => {
    ctx = canvas.getContext('2d');
    vw = window.innerWidth;
    vh = window.innerHeight;
    canvas.width = vw;
    canvas.height = vh;
    createNoise();
    window.addEventListener('resize', () => {
      clearTimeout(timer);
      timer = setTimeout(() => {
        createNoise();
      }, 100);
    });
  });

  function createNoise() {
    let idata = ctx.createImageData(vw, vh);
    let buffer32 = new Uint32Array(idata.data.buffer);
    let len = buffer32.length;
    for (let i = 0; i < len; i++) {
      let val = (Math.random() * 0xFF | 0).toString(16);
      buffer32[i] = parseInt('0xff'+val+val+val);
    }
    ctx.putImageData(idata, 0, 0);
  };

</script>

<style>
  canvas {
    mix-blend-mode:multiply;
    width:100%;
    height:100vh;
    position:fixed;
    z-index:1000000;
    opacity:0.15;
    pointer-events:none;
    image-rendering: pixelated;
  }
</style>

<canvas	bind:this={canvas}></canvas>