Generate Polygon Patterns From Triangles – Trianglify

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

Preview:

Generate Polygon Patterns From Triangles – Trianglify

Description:

Trianglify is a pure JavaScript library for generating colorful polygon (geometric) patterns from triangles based on SVG, Canvas, or PNG.

See also:

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())

You Might Be Interested In:


Leave a Reply