[JS]SVGのアイデアが広がる!かわいいパターンのテクスチャがSVGで作成できるスクリプト -Textures.js
Post on:2015年3月23日
画像は使用せずに、ラインやサークルや八角形や波線などのさまざまなパターンのテクスチャがSVGで描けるスクリプトを紹介します。
SVGで、テクスチャも作成できるようになってしまいました。

Textures.js
Textures.js -GitHub
Texture.jsはさまざまなパターンをSVGで生成するスクリプトで、d3.jsを使用して定義したデータをビジュアル化します。

デモページ:基本のパターン
ライン・サークル・パスなどを使ったさまざまなパターンを描くことができ、ラインを描く時は「textures.lines();」、太いラインは「textures.lines().heavier();」と記述もシンプルです。

デモページ:ラインを使ったパターン

デモページ:サークルを使ったパターン

デモページ:パスを使ったパターン
パターンをカスタマイズしてオリジナルのテクスチャを作成することもできます。

デモページ:パターンのカスタマイズ
sponsors