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

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

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

サイトのキャプチャ

Textures.js
Textures.js -GitHub

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

デモのキャプチャ

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

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

デモのキャプチャ

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

デモのキャプチャ

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

デモのキャプチャ

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

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

デモのキャプチャ

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

top of page

©2017 coliss