Getting Started

You can grab a copy of Trianglify from npm, bower, or cdnjs

var pattern = Trianglify({
  height: 300,
  width: 300,
  cell_size: 40});

document.body.appendChild(pattern.canvas());
      

Not a coder? You can use the Trianglify Generator example to tweak parameters and generate images for your designs.

Variance

Specify the amount of randomness used when generating the pattern

Cell Size

Specify the granularity of the pattern

Color

Trianglify comes bundled with the colorbrewer palette set

The above examples are just a subset of the available color gradients that Trianglify supports out of the box. See this page for a full list of the scales included with colorbrewer.

Output Formats

Canvas, SVG, and PNG built in

var pattern = Trianglify();

//SVG DOM node
pattern.svg();

//Canvas DOM node
pattern.canvas();

//Render to existing canvas
pattern.canvas(document.getElementById('mycanvas'));

//PNG data URI string
pattern.png();

It's possible to write your own rendering implementations using the geometry in pattern.polys, which contains an array of each polygon's vertices and color.

More Options

var defaults = {
  cell_size: 75,
  variance: 0.75,
  x_colors: 'random',
  y_colors: 'match_x',
  palette: Trianglify.colorbrewer,
  color_space: 'lab',
  color_function: false,
  stroke_width: 1.51,
  width: 600,
  height: 400,
  seed: null
};

For more information on what the above options do and what values they accept check out the README on GitHub.

Trianglify was written by Quinn Rohlf. Check it out on GitHub!