https://github.com/investblog/trigons-lite
Lightweight animated triangulated backgrounds for the web. Zero dependencies, ~2KB gzip. Inspired by Trigons by DeeThemes.
https://github.com/investblog/trigons-lite
animation background canvas css-custom-properties generative-art javascript lightweight low-poly triangles web-design
Last synced: 7 days ago
JSON representation
Lightweight animated triangulated backgrounds for the web. Zero dependencies, ~2KB gzip. Inspired by Trigons by DeeThemes.
- Host: GitHub
- URL: https://github.com/investblog/trigons-lite
- Owner: investblog
- License: mit
- Created: 2026-04-01T20:35:38.000Z (3 months ago)
- Default Branch: main
- Last Pushed: 2026-04-02T00:06:53.000Z (3 months ago)
- Last Synced: 2026-04-02T07:58:44.804Z (3 months ago)
- Topics: animation, background, canvas, css-custom-properties, generative-art, javascript, lightweight, low-poly, triangles, web-design
- Language: JavaScript
- Homepage: https://301.st
- Size: 15.6 KB
- Stars: 0
- Watchers: 0
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# TrigonsLite
Lightweight animated triangulated backgrounds for the web. Zero dependencies, ~2KB gzip.
## Features
- Canvas-based triangulated low-poly backgrounds
- 4 entrance/exit animation effects
- 6 stagger directions
- Fake directional lighting via cross-product normals
- Auto-sizing per viewport
- Reads CSS custom properties for colors
- Accepts hex, `rgb()`, `rgba()`
- Responsive with debounced resize
- No dependencies
## Install
Download `trigons-lite.min.js` (3.8KB, ~2KB gzip) from [releases](https://github.com/investblog/trigons-lite/releases) and include it:
```html
```
## Quick Start
```html
TrigonsLite.init('#bg', {
colors: ['#0a0a0f', '#1a1a24', '#8e7cff'],
size: 'auto',
depth: 0.4,
startVisible: false
}).animateIn({
effect: 'scale',
direction: 'top',
duration: 2000
});
```
## API
### `TrigonsLite.init(element, options)`
Returns `{ render, animateIn, animateOut, canvas }`.
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `colors` | `string[]` | `['#1a1a2e','#16213e','#0f3460']` | 2-3 colors (hex or rgb) |
| `colorVars` | `string[]` | — | CSS custom property names to read |
| `size` | `number\|'auto'` | `'auto'` | Triangle cell size in px. `'auto'` = viewport / 7 |
| `chaos` | `number` | `0.6` | Point jitter amount (0.01 - 1) |
| `depth` | `number` | `0.35` | Fake lighting intensity (0 - 0.8) |
| `startVisible` | `boolean` | `true` | Show triangles immediately before animation |
### `.animateIn(options)` / `.animateOut(options)`
| Option | Type | Default | Description |
|--------|------|---------|-------------|
| `effect` | `string` | `'scale'` | `'fade'` `'scale'` `'spin'` `'fly'` |
| `direction` | `string` | `'top'` | `'top'` `'bottom'` `'left'` `'right'` `'center'` `'random'` |
| `duration` | `number` | `1500` | Animation duration in ms |
| `stagger` | `number` | `0.6` | Stagger spread (0 - 0.9) |
| `easing` | `string` | `'ease-out'` | `'linear'` `'ease-in'` `'ease-out'` `'ease-in-out'` |
| `onComplete` | `function` | — | Callback when animation finishes |
### `.render()`
Regenerate and redraw (new random pattern).
## Effects
**fade** - Simple opacity transition
**scale** - Scale from zero with slight rotation per triangle
**spin** - Scale + aggressive rotation (low-poly explosion)
**fly** - Triangles fly in from the specified direction
## Using CSS Custom Properties
Read colors directly from your site's design tokens:
```javascript
TrigonsLite.init('#bg', {
colorVars: ['--color-bg', '--color-surface', '--color-accent']
});
```
The element's computed styles are checked first, then `:root`.
## Dark / Light Theme Switching
```javascript
var tg = TrigonsLite.init('#bg', {
colors: darkColors,
startVisible: false
});
tg.animateIn({ effect: 'scale', direction: 'top' });
// On theme change:
tg.animateOut({
effect: 'fade',
duration: 800,
onComplete: function() {
// Re-init with new colors
tg = TrigonsLite.init('#bg', {
colors: lightColors,
startVisible: false
});
tg.animateIn({ effect: 'fade', duration: 800 });
}
});
```
## Reduced Motion
Respect user preferences:
```javascript
if (!window.matchMedia('(prefers-reduced-motion: reduce)').matches) {
tg.animateIn({ effect: 'scale', direction: 'top' });
}
```
## Size Guide
| Viewport | `'auto'` size | Triangles |
|----------|---------------|-----------|
| 375px (mobile) | ~54px | ~50 |
| 768px (tablet) | ~110px | ~100 |
| 1920px (desktop) | ~274px | ~100 |
| 2560px (4K) | ~366px | ~100 |
Consistent visual density across all screen sizes.
## Performance
| | Size |
|---|---|
| Source | 7.8 KB |
| Minified | 3.8 KB |
| **Gzip** | **~2 KB** |
- Canvas rendering (no SVG DOM overhead)
- Grid triangulation (no Delaunay algorithm)
- `requestAnimationFrame` for animations
- Debounced resize handler
## Browser Support
All modern browsers. Canvas 2D API required.
## Credits
Inspired by **Trigons** by **DeeThemes** — a feature-rich D3.js/SVG triangulation plugin with 15+ animation effects, gradient color modes, responsive SVG, and PNG export. If you need the full power (Delaunay triangulation, HCL/Lab color spaces, multiple color build modes, SVG output, and the complete animation library), look for the original on Envato/CodeCanyon.
TrigonsLite is a ground-up rewrite focused on minimal footprint: Canvas instead of SVG, grid triangulation instead of Delaunay, fake normals instead of D3 color math. Different tool, same visual DNA.
## License
MIT