@gkucmierz/trianglify

A lightweight, zero-dependency, low-poly (triangulation) SVG/Canvas background generator mimicking the core API of the original trianglify library but without any heavy native Node.js canvas dependencies (fully offline-first, browser & modern bundle friendly).

Features

• Zero native dependencies: No node-gyp compiling or Cairo/Pango system requirements.
• Determinisitic rendering: Uses a LCG generator, allowing seed parameters to prevent layout shifting on window resize.
• Rich palettes: Includes all standard ColorBrewer palettes plus refreshed color schemes (tokyonight, cyberpunk, nord, dracula, emerald).
• Standard API: Support for .toSVG(), .toCanvas(), and .toSVGString() methods.

Installation

npm install @gkucmierz/trianglify

Usage

import Trianglify from '@gkucmierz/trianglify';

const pattern = Trianglify({
  width: 800,
  height: 600,
  cellSize: 90,
  variance: 0.75,
  xColors: 'tokyonight' // Use one of the pre-defined palettes or pass an array of hex colors
});

// Get DOM elements in the browser
const svgElement = pattern.toSVG();
document.body.appendChild(svgElement);

// Or render to canvas
const canvasElement = pattern.toCanvas();
document.body.appendChild(canvasElement);

// Or get raw SVG string (Node.js & browser compatible)
const svgString = pattern.toSVGString();

Custom Color Points (IDW Gradients)

You can define custom color nodes in a grid from 0.0 to 1.0 to generate a custom Inverse Distance Weighting (IDW) gradient layout instead of using standard palettes:

const customPattern = Trianglify({
  width: 800,
  height: 600,
  colorPoints: [
    { x: 0.1, y: 0.1, color: '#ff0055' },
    { x: 0.9, y: 0.1, color: '#00ffcc' },
    { x: 0.5, y: 0.9, color: '#ffcc00' }
  ]
});

Options

| Option | Type | Default | Description | |---|---|---|---| | width | number | 600 | Width of the output | | height | number | 400 | Height of the output | | cellSize | number | 75 | Size of the triangulation grid cells | | variance | number | 0.75 | Random jitter offset factor | | seed | any | null | Random generator seed (for deterministic layout) | | xColors | string / array | 'random' | Color palette name or array of hex colors | | yColors | string | 'match' | Whether to match colors or mix along Y axis | | colorPoints | array | null | Custom color points [{ x, y, color }] to generate IDW gradients (overrides palette) | | fill | boolean | true | Fill triangles with color | | stroke | boolean | true | Stroke triangle edges | | strokeWidth | number | 0.5 | Stroke line thickness |

License

MIT