trianglify
Advanced tools
Trianglify is a javascript library for generating colorful triangle meshes that can be used as SVG images and CSS backgrounds.
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.
Official: http://qrohlf.com/trianglify
More:
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.
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);
a list of all the available colorbrewer palettes available can be found here, or you can specify your own
Pull Requests and Issues are welcome! Please make sure to read the contributing guidelines, though.
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)
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 |
| 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 |
| fillOpacity | sets the opacity of the inside of the cells | 0 to 1 | 1 |
| strokeOpacity | sets the opacity of the outline of the cells | 0 to 1 | 1 |
Trianglify is licensed under the GPLv3 License. Happy hacking!
FAQs
Trianglify is a javascript library for generating colorful triangle meshes that can be used as SVG images and CSS backgrounds.
The npm package trianglify receives a total of 981 weekly downloads. As such, trianglify popularity was classified as not popular.
We found that trianglify demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
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.
Research
Security News
Socket’s threat research team has detected six malicious npm packages typosquatting popular libraries to insert SSH backdoors.
Security News
MITRE's 2024 CWE Top 25 highlights critical software vulnerabilities like XSS, SQL Injection, and CSRF, reflecting shifts due to a refined ranking methodology.
Security News
In this segment of the Risky Business podcast, Feross Aboukhadijeh and Patrick Gray discuss the challenges of tracking malware discovered in open source softare.