Trianglify – Generate colorful triangle meshes for SVG images and CSS backgrounds
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.
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)
For the full options visit Trianglify page on github or Download
