Trianglify – Generate colorful triangle meshes for SVG images and CSS backgrounds

  • Trianglify-01
  • Trianglify-02
  • Trianglify-03

Now you can create stylish and modern SVG images or CSS backgrounds which will give your web projects a contemporary look.

Trianglify is a new and trendy online tool that will help you create beautiful SVG images and CSS backgrounds. It is inspired by geopattern which also is a great source of creating lovely background patterns. You can generate a simple pattern for your website and download it, or you can use the controls and alter the pattern to your own needs as you can adjust the noise, cellsize and cellpadding. No matter what you choose, you will have a great and modern SVG image or CSS background for your website. The result is really beautiful. Have a look at the usage below.


Include d3 and trianglify.js or trianglify.min.js on your page:

<script src=""></script>
<script src="trianglify.js"></script>

Create a new Trianglify instance and use it to generate patterns:

var t = new Trianglify();
var pattern = t.generate(800, 600); // svg width, height
pattern.svg         // SVG DOM Node object
pattern.svgString   // String representation of the svg element
pattern.base64      // Base64 representation of the svg element
pattern.dataUri     // data-uri string
pattern.dataUrl     // data-uri string wrapped in url() for use in css
pattern.append()    // append pattern to <body>. Useful for testing.

For example, to generate a background for <body> and apply it with inline CSS:

var t = new Trianglify();
var pattern = t.generate(document.body.clientWidth, document.body.clientHeight);
document.body.setAttribute('style', 'background-image: '+pattern.dataUrl);


a list of all the available colorbrewer palettes available can be found here, or you can specify your own.


Smaller Cell Size Trianglify({
    x_gradient: colorbrewer.PuOr[9],
    noiseIntensity: 0,
    cellsize: 90}).generate(700, 400).dataUri)

Differing x and y gradients Trianglify({
    x_gradient: colorbrewer.YlGnBu[9],
    y_gradient: colorbrewer.RdPu[9],
    noiseIntensity: 0.1,
    cellpadding: 10,
    cellsize: 100}).generate(700, 400).dataUri);

Cellpadding Close to cellsize/2 Trianglify({
    cellpadding: 80,
    cellsize: 200}).generate(700, 400).dataUri)

For the full options visit Trianglify page on github or Download

You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *