# qrohlf/trianglify

**Attribution required: if you use, quote, or summarise this content, you must credit and link back to [awesome-repositories.com](https://awesome-repositories.com/repository/qrohlf-trianglify).**

10,093 stars · 657 forks · JavaScript · GPL-3.0

## Links

- GitHub: https://github.com/qrohlf/trianglify
- Homepage: http://qrohlf.com/trianglify/
- awesome-repositories: https://awesome-repositories.com/repository/qrohlf-trianglify.md

## Description

Trianglify is an algorithmic background generator and vector art toolkit used to produce pseudo-random geometric patterns and polygonal meshes. It functions as a rendering engine that converts geometric data into either scalable vector graphics or rasterized canvas elements.

The system utilizes deterministic pattern generation via seed values to ensure consistent geometric output. It supports customizable color gradients, coordinate grid jittering, and custom geometry definitions to control the placement and shape of the generated meshes.

The project covers algorithmic art generation and generative graphic design, with capabilities for rendering to HTML5 Canvas and SVG. Final outputs can be exported as SVG or PNG files.

## Tags

### Artificial Intelligence & ML

- [Algorithmic Image Generators](https://awesome-repositories.com/f/artificial-intelligence-ml/generative-ai-resources/diffusion-visual-models/synthetic-content-generators/algorithmic-image-generators.md) — Generates randomized triangle-based SVG backgrounds using algorithmic design rules and customizable colors. ([source](https://github.com/qrohlf/trianglify/blob/master/.browserslistrc))
- [Seeded Generation](https://awesome-repositories.com/f/artificial-intelligence-ml/deterministic-generation-strategies/seeded-generation.md) — Ensures consistent and repeatable geometric output for a given input via seeded random generation. ([source](https://github.com/qrohlf/trianglify/blob/master/Readme.md))
- [Procedural Art Generators](https://awesome-repositories.com/f/artificial-intelligence-ml/generative-ai-resources/prompt-engineering-libraries/creative-content-generation/generative-art-prompts/procedural-art-generators.md) — Creates randomized geometric patterns and triangle meshes using mathematical rules and procedural textures.

### Graphics & Multimedia

- [Geometric Pattern Generators](https://awesome-repositories.com/f/graphics-multimedia/svg-element-generators/geometric-pattern-generators.md) — Provides a specialized engine for generating algorithmic triangle art and polygonal meshes exported as scalable vector graphics.
- [Algorithmic Background Generators](https://awesome-repositories.com/f/graphics-multimedia/algorithmic-background-generators.md) — Provides a complete system for producing pseudo-random geometric background patterns with customizable grids and colors.
- [Generative Art Toolkits](https://awesome-repositories.com/f/graphics-multimedia/generative-art-toolkits.md) — Offers a comprehensive toolkit for defining custom geometry and color interpolations to produce repeatable digital art.
- [Canvas Rendering Engines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/canvas-rendering-engines.md) — Renders vector-based polygonal geometry into pixel-based images on HTML5 canvas elements with high-DPI support. ([source](https://github.com/qrohlf/trianglify#readme))
- [SVG-Based Vector Rendering](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/engines/canvas-vector-graphics/svg-based-vector-rendering.md) — Produces scalable vector graphics as DOM elements or serializable nodes for web and server environments. ([source](https://github.com/qrohlf/trianglify#readme))
- [Hybrid Rendering Pipelines](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/rendering/vector-rendering-pipelines/vector-graphics-renderers/hybrid-rendering-pipelines.md) — Provides a dual-target pipeline that can render geometric data as either rasterized canvas pixels or scalable vector graphics.
- [SVG and Canvas Converters](https://awesome-repositories.com/f/graphics-multimedia/svg-and-canvas-converters.md) — Functions as a rendering engine that translates geometric polygon data into both SVG and HTML5 canvas formats.
- [Dynamic SVG Manipulation](https://awesome-repositories.com/f/graphics-multimedia/dynamic-svg-manipulation.md) — Renders real-time, programmatic geometric patterns to HTML5 Canvas or SVG for interactive user interfaces.
- [Generative Graphic Design](https://awesome-repositories.com/f/graphics-multimedia/generative-graphic-design.md) — Produces unique polygonal art and repeatable patterns exported as high-quality design assets.
- [Gradient Color Calculators](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/colors/gradient-generators/gradient-color-calculators.md) — Calculates precise color transitions between points to generate smooth procedural gradients across polygonal meshes.
- [Palette Interpolators](https://awesome-repositories.com/f/graphics-multimedia/graphics-and-media/colors/gradient-generators/gradient-color-calculators/palette-interpolators.md) — Allows definition of visual appearances using specific color arrays and custom color space interpolations. ([source](https://github.com/qrohlf/trianglify/blob/master/Readme.md))
- [Procedural Geometry Customization](https://awesome-repositories.com/f/graphics-multimedia/graphics-engines-rendering/3d-math-and-geometry-toolkits/procedural-geometry-customization.md) — Supports the specification of exact coordinate points to manually control the shape and placement of the mesh. ([source](https://github.com/qrohlf/trianglify/blob/master/examples/custom-points-example.html))
- [SVG Path Serializers](https://awesome-repositories.com/f/graphics-multimedia/svg-path-serializers.md) — Converts internal geometric coordinate data into serializable SVG path strings for browser rendering.

### Game Development

- [Polygon Triangulation Utilities](https://awesome-repositories.com/f/game-development/polygon-triangulation-utilities.md) — Partitions coordinate space into non-overlapping triangles to generate a cohesive polygonal mesh.

### Programming Languages & Runtimes

- [Seeding Utilities](https://awesome-repositories.com/f/programming-languages-runtimes/language-features-paradigms/language-features/core-conceptual-frameworks/programming-language-concepts/random-number-generation/random-number-generators/seeding-utilities.md) — Uses deterministic seed values to ensure a random number generator produces identical geometric layouts.

### Content Management & Publishing

- [Raster Image Exports](https://awesome-repositories.com/f/content-management-publishing/content-formats-exporting/export-formats/raster-image-exports.md) — Exports generated geometric patterns as either scalable SVG vectors or rasterized PNG images. ([source](https://github.com/qrohlf/trianglify/tree/master/examples))

### User Interface & Experience

- [Vector Backgrounds](https://awesome-repositories.com/f/user-interface-experience/background-effects/vector-backgrounds.md) — Generates crisp, scalable vector backgrounds that maintain quality across any screen resolution.
- [Jittered Grids](https://awesome-repositories.com/f/user-interface-experience/layout-density-utilities/resolution-independent-engines/coordinate-grids/jittered-grids.md) — Implements coordinate grid jittering to transform regular point grids into organic, non-uniform geometric patterns.

### Part of an Awesome List

- [Game Engines](https://awesome-repositories.com/f/awesome-lists/devtools/game-engines.md) — Generator for low-poly style backgrounds.
