gitmyhub

trianglify

JavaScript ★ 10k updated 1y ago

Algorithmically generated triangle art

A JavaScript library that generates beautiful decorative backgrounds made of colorful triangles, you set the size and color palette, and it produces a unique SVG or Canvas pattern usable on any website or exported as a PNG.

JavaScriptSVGCanvasNode.jssetup: easycomplexity 2/5

Trianglify is a JavaScript library that generates decorative background images made of colored triangles. You give it a width and a height, and it produces an SVG or Canvas element filled with a mesh of triangles in a coordinated color palette. The output is pseudo-random but reproducible: you can pass a seed value and always get the same pattern back, which is useful for building consistent branding or backgrounds that need to look the same each time.

The library works in both browsers and Node.js. In a browser, a few lines of JavaScript produce a pattern and attach it to the page. In Node.js, you can generate the same patterns and save them as PNG files using the optional node-canvas package. The library is also available through the unpkg CDN for simple inclusion in an HTML page without a build step, or as a zip download from the releases page.

Configuration is done through a plain options object. The key settings are cell size (which controls how large or small each triangle is), variance (how randomly the points are scattered), color palette, and color space for the gradient interpolation. A live interactive GUI at trianglify.io lets you adjust all these settings visually and see the result change in real time, without writing any code.

The source code is licensed under GPLv3, which requires any project that distributes the library to also be open-source. A commercial license is available by contacting the author for use in closed-source projects. The README also notes that you own the copyright to any image files you generate with the library, so using an exported image in a project does not trigger the license requirement on its own.

Where it fits