explaingit

qrohlf/trianglify

10,092JavaScriptAudience · developerComplexity · 2/5LicenseSetup · easy

TLDR

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.

Mindmap

mindmap
  root((Trianglify))
    What it does
      Triangle backgrounds
      SVG generation
      Seeded patterns
    Config Options
      Cell size
      Color palette
      Variance
    Use Cases
      Website backgrounds
      Brand assets
      Profile images
    Tech Stack
      JavaScript
      SVG
      Node.js canvas
Click or tap to explore — scroll the page freely

Code map

Detail Auto

An interactive map of this repo's files and how they connect — its source is parsed live in your browser. Click Visualize to build it.

filefunction / class

Things people build with this

USE CASE 1

Generate a unique branded background image for a website or app by setting a color palette and dimensions in a few lines of JavaScript.

USE CASE 2

Create reproducible decorative patterns by passing a seed value so the same pattern always appears for the same user or brand.

USE CASE 3

Export triangle background images to PNG files in Node.js for use in print materials, presentations, or offline assets.

USE CASE 4

Build a live pattern customizer tool by wiring the library configuration options to sliders and color pickers on a web page.

Tech stack

JavaScriptSVGCanvasNode.js

Getting it running

Difficulty · easy Time to first run · 5min
GPLv3, if you include this library in software you distribute, that software must also be open-source, a commercial license is available from the author for closed-source projects.

In plain English

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.

Copy-paste prompts

Prompt 1
Use Trianglify to generate a background image for my website with a blue-to-purple gradient and medium-sized triangles. Give me the complete JavaScript code to attach it to a div.
Prompt 2
How do I use Trianglify in Node.js to export a 1200x628 PNG with a specific seed value and save it to disk using node-canvas?
Prompt 3
Write a React component that renders a Trianglify background and lets the user adjust cell size and color palette with input sliders in real time.
Prompt 4
I want to generate a unique but consistent background image for each user's profile page using Trianglify. How do I use their username as a reproducible seed?
Open on GitHub → Explain another repo

← qrohlf on gitmyhub — every repo by this author, as a profile.

Verify against the repo before relying on details.