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:

Don’t struggle alone with projects

Join the creative community of UX, graphic and web designers and developers to get help with any design or dev project.

<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.

Related post:  DURI.ME - A beautifully simple image-to-DataURI converter


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

Divi WordPress Theme

You may also like...

Leave a Reply

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

By continuing to use the site, you agree to the use of cookies. more information

The cookie settings on this website are set to "allow cookies" to give you the best browsing experience possible. If you continue to use this website without changing your cookie settings or you click "Accept" below then you are consenting to this.