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

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

使用方法
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「Trianglify」サンプル

sponsors

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

記事作成:
記事URL:

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