[JS]SVGのアイデアが広がる！かわいいパターンのテクスチャがSVGで作成できるスクリプト -Textures.js

画像は使用せずに、ラインやサークルや八角形や波線などのさまざまなパターンのテクスチャがSVGで描けるスクリプトを紹介します。

SVGで、テクスチャも作成できるようになってしまいました。

Textures.js
Textures.js -GitHub

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

デモページ：基本のパターン

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

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

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

デモページ：パスを使ったパターン

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

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