SVG Noisy Background

SVGのフィルターでfractalNoiseを利用し、ランダムなノイズの入ったスケーラブルかつリピータブルなテクスチャを作成するサンプル。

<svg
  xmlns="http://www.w3.org/2000/svg"
  version="1.1"
  width="512"
  height="512"
  viewBox="0 0 512 512">
  <defs>
    <filter
      color-interpolation-filters="sRGB"
      id="filter">
      <feTurbulence
        type="fractalNoise"
        baseFrequency="100 0.8"/>
    </filter>
  </defs>
  <rect
    width="100%"
    height="100%"
    filter="url(#filter)"/>
  <rect
    width="100%"
    height="100%"
    fill="#222"
    fill-opacity=".75"/>
</svg>