ポリゴン的な画像を作成できるJavaScript「Trianglify」

一時くる!と言われたポリゴン的なデザイン。
それを簡単に生成してくれるJavaScript「Trianglify by @qrohlf」を紹介します。

sponsors

使用方法

Trianglify by @qrohlfからダウンロード。
あとは</body>の直前に下記を記述するだけです。

<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="trianglify.js"></script>
<script>
var t = new Trianglify();
var pattern = t.generate(800, 600); // 生成する横幅と高さ
pattern.svg        
pattern.svgString  
pattern.base64     
pattern.dataUri    
pattern.dataUrl   
pattern.append() 
</script>
	
また、色やサイズを指定したい時は最初の以下のように変更してみましょう。

var t = new Trianglify({
	cellsize: 300, //一つのサイズ
	cellpadding: 10, //余白
	x_gradient:["#961E00", "#FF0000", "#EEEEEE"] //X軸の色
	});
var pattern = t.generate(document.body.clientWidth, document.body.clientHeight); //生成するのをウィンドウサイズにします
document.body.setAttribute('style', 'background-image: '+pattern.dataUrl); //背景に画像を入れます
その他もオプションがありますので、試してみて下さい。
cellsize
bleed
cellpadding
noiseIntensity
x_gradient
y_gradient
fillOpacity
strokeOpacity

サンプル

後ろにうっすらと
Javascriptサンプルページ一覧
skuare.net

sponsors