chrome firefox IE safari chain youtube-play pocket hatena facebook feedly github google-plus rss twitter search code envelope-o home pencil website works calendar drawer tag

ブログ移転のお知らせ

当ブログは新ブログ「DEV.NISMIT」に移転しました。それに伴い、ドメインも全てリニューアルしました。

お手数ですが、ブックマーク、Feedly等の変更をお願いします。当ブログは数ヶ月を目安にリダイレクト、削除します。

2014/08/29

ポリゴンスタイルに!ランダムでSVG形式のポリゴンパターンを生成してくれる「trianglify」

ポリゴンパターンを気軽に欲しい時に!伸縮しても粗くならないSVG形式でポリゴンパターンを出力してくれる「trianglify」色味以外の簡単な調整はWeb上で出来るようになっております。アクセントにいかがでしょうか。

trianglify

SVG形式のファイルのポリゴンパターンを生成してくれるサービスをご紹介致します。

Trianglify-by--qrohlf-sets

使い方はとっても簡単で、SVGというボタンを押すだけで現在表示しているポリゴンパターンのSVGファイルを出力してくれます。

パターンの調整については「Show Controls」をクリックするとメニューが出てきます。

メニューはそれぞれ上から、

・ノイズ(ざらついたノイズを増やしていくことができます)
・三角形のサイズ(増やすと三角形のサイズが大きくなっていきます)
・それぞれのパディング(増やすと凹凸が滑らかになっていきます)

 

色味については、ランダムで変わっております。好きな色で作成したい場合はjQueryのプラグインとしてGithubで配布されております。

実際にダウンロードして触っておりませんが、

チャートツールでおなじみのD3.jsを利用してポリゴンパターンを作成しているようです。

ですので、trianglifyをjQueryで使用する場合はD3.jsも一緒に読み込むようにしてください。

 

アクセントにいかがでしょうか。

Colorful Triangle Meshes generator: trianglify

Github

 

 

今後の励みになりますので、良かったらシェアをお願いします。

このエントリーをはてなブックマークに追加