PNGのようなビットマップ形式の方が向くサブトなんとかなノイズ付きのスキューなんとかなテクスチャを、SVGのfilter要素でfractalNoiseを利用して生成する試み。SVGだからというか、filterで生成する形なのでスケーラブル、ノイズの分布が平均的なのでおおまかにリピータブルにもなる。上記画像もSVGなのでそのソース見るとわかる。
Demo: SVG Noisy Background
filter要素でfractalNoiseを利用しランダムにノイズを与えた矩形とそれに混ぜる単色透過付きの矩形を重ねて実現する。実装任せなのでソースはコンパクトで、URLエンコードのData URIなら557バイトで済んだ。密度の違うノイズを重ねて分布を偏らせることもできるはずなので、慣れてきちんと作れるようになったならサイズ的なメリットは大きい。
Demo: SVG Noisy Background (Light)
暗い背景の方がうまく作りやすい。Chrome 34、Firefox 28及びInternet Explorer 11で確認した。現行ブラウザーだとうまく見えないのはInternet Explorer 9くらい？
技術的な解説はまだちゃんと出来ないのでサンプルだけ。