Huge News!Announcing our $40M Series B led by Abstract Ventures.Learn More →

trianglify

Package Overview

Dependencies

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

trianglify

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

0.1.1
Source
npm

Version published: 11 years ago

Weekly downloads: 1.2K; increased by2.57%

Maintainers: 1

Weekly downloads

Created: 11 years ago

Source

Trianglify

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

example

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

nixterrimus also made a nice demo app: link (source)

Getting Trianglify

Trianglify is available via Bower

bower install trianglify

Or as a zip archive

https://github.com/qrohlf/trianglify/archive/gh-pages.zip

Or you can simply clone the repo

git clone https://github.com/qrohlf/trianglify.git

Or if you're using nodejs

npm install trianglify

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

Examples:

Smaller Cell Size

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

Differing x and y gradients

window.open(new 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

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:

option	usage	valid	default
cellsize	set how large the generated cells should be	integers > 0	150
bleed	set how far outside the visible area of the SVG points should be rendered	integers > 0	cellsize
cellpadding	set the minimum distance between each point	integers > 0 and < cellsize/2	cellsize*0.1
noiseIntensity	set the opacity of the noise filter. This has a significant impact on SVG rendering time - set to 0 to disable.	0 to 1	0.3
x_gradient	an array of colors to use to construct a gradient for the x-axis	array of colors in hexadecimal string format (i.e. `["#961E00", "#FF0000", "#EEEEEE"]`)	random selection from colorbrewer palettes
y_gradient	an array of colors to use to construct a gradient for the y-axis	array of colors in hexadecimal string format (i.e. `["#961E00", "#FF0000", "#EEEEEE"]`)	x_gradient, brightened by a factor of 0.5

Contributing

Pull requests are welcome! Fork the repo on Github.

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.

Keywords

FAQs

What is trianglify?

Is trianglify popular?

Is trianglify well maintained?

Package last updated on 16 Apr 2014

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install