Setting div Background using Trianglify

Question

I have some problems using the Trianglify plugin. I would like to use it to set the background of a div. How can I do this? I couldn't find a proper example.

Here's my sample code:

<script>
    var pattern = Trianglify({
    width: window.innerWidth, 
    height: window.innerHeight
});
document.body.appendChild(pattern.canvas())
</script>

Also, can I have divs with different backgrounds that come from Trianglify?

Answer 1

One DIV

Here is an example of setting a DIV background to a Trianglify pattern. It cheats a bit and sets the DIV child node to the pattern but it should work for you.

var something = document.getElementById('something');
var dimensions = something.getClientRects()[0];
var pattern = Trianglify({
    width: dimensions.width, 
    height: dimensions.height
});
something.appendChild(pattern.canvas());

The DIV has an id of something and the CSS styles are set on the div for height and width.

Working example JSFiddle: http://jsfiddle.net/u55cn0fh/

Multiple DIVs

We can easily expand this for multiple DIVs like so:

function addTriangleTo(target) {
    var dimensions = target.getClientRects()[0];
    var pattern = Trianglify({
        width: dimensions.width, 
        height: dimensions.height
    });
    target.appendChild(pattern.canvas());
}

JSFiddle: http://jsfiddle.net/u55cn0fh/1/

Multiple DIVs as a true background-image

The above are simply appending the pattern to the DIV as a child node instead of setting it as a background. The good news is that we can indeed use the background-image CSS property like so:

function addTriangleTo(target) {
    var dimensions = target.getClientRects()[0];
    var pattern = Trianglify({
        width: dimensions.width, 
        height: dimensions.height
    });
    target.style['background-image'] = 'url(' + pattern.png() + ')';
}

JSFiddle: http://jsfiddle.net/abL2kc2q/

Answer 2

I'm pretty late to this answer, but I think it's still valuable:

If you aren't satisfied with using pattern.png() to generate a PNG version (like I wasn't), then you can also use pattern.svg() to set a SVG background with a little more work.

I always tend to lean towards using SVG backgrounds as typically they are crisper. In a test case I ran, using the SVG version also saved bits (although it's relative because sending a Trianglify background is a bit of a burden to begin with).

Characters in the base64 SVG encoding: 137284

Characters in the base64 PNG encoding: 195288

Converting the SVG to a base64 encoding then setting it as the background image can be achieved as follows:

// Create the Trianglify pattern
var pattern = Trianglify({
    cell_size: 30,
    variance: 0.75,
    x_colors: 'random',
    y_colors: 'match_x',
    palette: Trianglify.colorbrewer,
    stroke_width: 1.51,
});

// Serialize the SVG object to a String
var m = new XMLSerializer().serializeToString(pattern.svg());

// Perform the base64 encoding of the String
var k = window.btoa(m);

// Query the element to set the background image property
var element = document.getElementsByTagName('header')[0];

// Set the background image property, including the encoding type header
element.style.backgroundImage = 'url("data:image/svg+xml;base64,' + k + '")';

Hope this helps!

Answer 3

IN my case I had to use a class to use multiple instances of the same background image :

var obj = {
    'trianglifiedlightblue': ['#a5cade', '#b7d5e5', '#d5e6f0', '#006ab4', '#e8f2f7', '#cee2ed'],
        'trianglifiedbleu': ['#004e83', '#005f9f', '#004879', '#006ab4', '#004777', '#005f9f'],
        'trianglifiedviolet': ['#680036', '#830447', '#e62f8e', '#c76c9b'],
        'trianglifiedrouge': ['#5f0308', '#851117', '#cf363f', '#e86d74']
};

function addTriangle(classname) {
    targets = document.getElementsByClassName(classname);
    for (i = 0; i < targets.length; i++) {
        target = targets[i];
        if (target != null) {
            var dimensions = target.getClientRects()[0];
            var pattern = Trianglify({
                width: dimensions.width,
                height: dimensions.height,
                x_colors: obj[classname],
                cell_size: 100 + Math.random() * 200
            });
            target.style['background-image'] = 'url(' + pattern.png() + ')';
        }
    }
}
addTriangle('trianglifiedlightblue');
addTriangle('trianglifiedbleu');
addTriangle('trianglifiedviolet');
addTriangle('trianglifiedrouge');

div {
    height: 100px;
    width: 500px;
    margin:10px;
    float:left;
    background:#efefef;
}

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



<div class="trianglifiedlightblue"></div>
<div class="trianglifiedbleu"></div>
<div class="trianglifiedviolet"></div>
<div class="trianglifiedrouge"></div>

or if you prefer to keep an ID you can try this :

http://jsfiddle.net/thecpg/Lecdhce6/10/