trianglify

Trianglify is a javascript library for generating colorful triangle meshes that can be used as SVG images and CSS backgrounds.

Trianglify

Trianglify is a library that I wrote to generate nice SVG background images like this one:

It was inspired by btmills/geopattern, and uses d3.js to build the polygons and SVG and SVG filters for rendering. It also includes the colorbrewer color palette library to get you up and running quickly. It was written in a single day because I got fed up with Adobe Illustrator.

Demo

Official: http://qrohlf.com/trianglify

More:

  • @nixterrimus has a nice demo app that lets you modify the parameters and choose between the built-in color palettes: link (source)
  • @alssndro put together a version that lets you choose from the top ColourLovers palettes: link (source)

Getting Trianglify

The recommended way to use Trianglify is via Bower:

bower install trianglify

Or if you're using nodejs

npm install trianglify

Alternately, you can load it via CDNJS, download the latest version as a zip archive, or simply clone this repo.

Usage

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

<script src="http://d3js.org/d3.v3.min.js"></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);

Colors

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

Contributing

Pull Requests and Issues are welcome! Please make sure to read the contributing guidelines, though.

Examples

you can try out all of the below examples in your dev console on the demo page

window.open(new Trianglify({
    x_gradient: Trianglify.colorbrewer.PuOr[9],
    noiseIntensity: 0,
    cellsize: 90}).generate(700, 400).dataUri)

window.open(new Trianglify({
    x_gradient: Trianglify.colorbrewer.YlGnBu[9],
    y_gradient: Trianglify.colorbrewer.RdPu[9],
    noiseIntensity: 0.1,
    cellpadding: 10,
    cellsize: 100}).generate(700, 400).dataUri);

window.open(new Trianglify({
    cellpadding: 80,
    cellsize: 200}).generate(700, 400).dataUri)

Options

The constructor takes an optional options object where you can override the default values for Trianglify like so:

var t = new Trianglify({cellsize: 100, bleed: 150, ...});

The following configuration options are available:

optionusagevaliddefault
cellsizeset how large the generated cells should beintegers > 0150
bleedset how far outside the visible area of the SVG points should be renderedintegers > 0cellsize
cellpaddingset the minimum distance between each pointintegers > 0 and < cellsize/2cellsize*0.1
noiseIntensityset the opacity of the noise filter. This has a significant impact on SVG rendering time - set to 0 to disable.0 to 10
x_gradientan array of colors to use to construct a gradient for the x-axisarray of colors in hexadecimal string format (i.e. ["#961E00", "#FF0000", "#EEEEEE"])random selection from colorbrewer palettes
y_gradientan array of colors to use to construct a gradient for the y-axisarray of colors in hexadecimal string format (i.e. ["#961E00", "#FF0000", "#EEEEEE"])x_gradient, brightened by a factor of 0.5
fillOpacitysets the opacity of the inside of the cells0 to 11
strokeOpacitysets the opacity of the outline of the cells0 to 11

License

Trianglify is licensed under the GPLv3 License. Happy hacking!

Credits

  • Trianglify makes use of the excellent d3.js visualization library by Michael Bostock.
  • Trianglify includes color specifications and designs developed by Cynthia Brewer (http://colorbrewer.org/).
  • Trianglify uses the excellent (and free!) GitHub Pages for hosting.