New Post has been published on Html Use
New Post has been published on http://www.htmluse.com/trianglify-low-poly-style-background-generator/
Trianglify - low poly style background generator
Download Demo
Trianglify is a javascript library for generating colorful triangle meshes that can be used as SVG images and CSS backgrounds.
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.
1. INCLUDE JS FILES
<script src="http://d3js.org/d3.v3.min.js"></script> <script src="trianglify.js"></script>
2. JAVASCRIPT
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
3. 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, ...);
