SVGはWeb上でベクターグラフィックを表現するのに適した手法です。Flashのように外部プラグインはいらないですし、拡大/縮小しても綺麗なのでどんなデバイスの画面サイズにも対応できます。 そんなSVGの表現力をあげるのに適したライブラリがTextures.jsです。多数のパターンを使って塗りつぶし処理を行います。

Textures.jsの使い方

デモです。線は素のSVG（d3.js）で描いて、その内容をTextures.jsで描いています。

ライン系。

色の変更もできます。

線を細くしたり、間隔を調整するのも簡単にできます。

サークル、ドット系。

こういう特定のパスを描くことも、自分でカスタマイズすることもできます。

SVGで描いているとついベタ塗りになってしまいがちですが、さらにその描画内容をパターンで描けるようになるとカラーだけでなく、グレースケールで表現した際にも分かりやすくなりそうです。グラフとの相性が良さそうですね。

Textures.jsはHTML5/JavaScript製、MIT Licenseのオープンソース・ソフトウェアです。

Textures.js riccardoscalco/textures