[JS]SVGのアイデアが広がる!かわいいパターンのテクスチャがSVGで作成できるスクリプト -Textures.js
Post on:2015年3月23日
画像は使用せずに、ラインやサークルや八角形や波線などのさまざまなパターンのテクスチャがSVGで描けるスクリプトを紹介します。
SVGで、テクスチャも作成できるようになってしまいました。
![サイトのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032308.png)
Textures.js
Textures.js -GitHub
Texture.jsはさまざまなパターンをSVGで生成するスクリプトで、d3.jsを使用して定義したデータをビジュアル化します。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032306-01.png)
デモページ:基本のパターン
ライン・サークル・パスなどを使ったさまざまなパターンを描くことができ、ラインを描く時は「textures.lines();」、太いラインは「textures.lines().heavier();」と記述もシンプルです。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032307-01.png)
デモページ:ラインを使ったパターン
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032307-02.png)
デモページ:サークルを使ったパターン
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032307-03.png)
デモページ:パスを使ったパターン
パターンをカスタマイズしてオリジナルのテクスチャを作成することもできます。
![デモのキャプチャ](http://coliss.com/wp-content/uploads-201501/2015032306-02.png)
デモページ:パターンのカスタマイズ
sponsors