美しいグラデーションと幾何学模様のTrianglifyを背景に設定する方法

Trianglifyを利用して、簡単に美しいグラデーションと幾何学模様のTrianglifyを背景に設定することができます。

ファイルをダウンロードして読み込むか以下のCDNを利用することもできます。

設定例

読み込む

<script src="https://cdnjs.cloudflare.com/ajax/libs/trianglify/0.4.0/trianglify.min.js"></script>

HTML例

<div id="sample">背景に設定するボックス</div>

JavaScript例

function addTriangleTo(target) {
    var dimensions = target.getClientRects()[0];
    var pattern = Trianglify({
        width: dimensions.width,
        height: dimensions.height + 220,
        x_colors: 'PuRd',
        palette: Trianglify.colorbrewer,
        variance: 0.4
    });
    target.style['background-image'] = 'url(' + pattern.png() + ')';
}
addTriangleTo(document.getElementById('sample'));