Author: | qrohlf |
---|---|
Views Total: | 4,866 views |
Official Page: | Go to website |
Last Update: | July 24, 2019 |
License: | GPL-3.0 |
Preview:

Description:
Trianglify is a pure JavaScript library for generating colorful polygon (geometric) patterns from triangles based on SVG, Canvas, or PNG.
See also:
- Interactive Colorful Triangle Background with JavaScript and Canvas – Triangles.js
- 35+ High Quality Polygon Background Packs For Free Download
How to use it:
Install & download the Trianglify.
# Yarn $ yarn add trianglify # NPM $ npm install trianglify --save
Include the trianglify.min.js
from the dist
folder.
<script src="./dist/trianglify.min.js"></script>
Create a new Trianglify instance and customize the polygon pattern with the following options:
- width: Width of pattern
- height: Height of pattern
- cell_size: Size of the cells used to generate a randomized grid
- variance: how much to randomize the grid
- seed: Seed for the RNG
- x_colors: X color stops
- y_colors: Y color stops
- palette: Palette to use for ‘random’ color option
- color_space: Color space used for gradient construction & interpolation
- color_function: Color function f(x, y) that returns a color specification that is consumable by chroma-js
- stroke_width: Width of stroke. Defaults to 1.51 to fix an issue with canvas antialiasing.
- points: An Array of [x,y] coordinates to trianglulate. Defaults to undefined, and points are generated.
var pattern = Trianglify({ width: 600, height: 400, cell_size: 75, variance: 0.75, seed: null, x_colors: 'random', y_colors: 'match_x', palette: colorbrewer, color_space: 'lab', color_function: null, stroke_width: 1.51, points: undefined })
Append the polygon pattern to the element.
// as Canvas document.body.appendChild(pattern.canvas()) // as SVG document.body.appendChild(pattern.svg()) // as PNG document.body.appendChild(pattern.png())