Triangles
A seeded Delaunay surface mounted behind any element.
Docs
npm install trianglesMount a background behind any element. The host keeps its content; the pattern renders behind it, and the same seed, options, and size always produce the same image.
import TrianglesBackground from 'triangles';
const background = new TrianglesBackground(document.querySelector('#hero'), {
seed: 'launch-2026',
density: 180,
depth: 80
});
No build step required — load the IIFE bundle and use the
Triangles global.
<div id="hero"><h1>Content above the background</h1></div>
<script src="https://unpkg.com/triangles/dist/triangles.iife.js"></script>
<script>
new Triangles.TrianglesBackground(
document.querySelector('#hero'),
{ seed: 'launch-2026' }
);
</script>seed — string or number for the deterministic
PRNG.
renderer — 'auto',
'webgl', 'canvas', or
'svg'. Auto prefers WebGL and falls back to Canvas.
density — triangle-point density, calibrated to
a 500×500 surface.
depth — vertex elevation range; higher values
look craggier.
meshAmbient, meshDiffuse,
lights — surface and lighting colors. Light
x/y range −1 to 1;
z is distance from the surface.
pixelRatio, maxPixelRatio — output
quality; device pixel ratio is capped at 2 by default.
pointer, animate — opt-in
interaction and animation. Animation respects reduced-motion
preferences.
Instances expose setOptions, setRenderer,
resize, render, getOptions,
getSeed, getSnapshot, toBlob,
toSVGString, and destroy.
background.setRenderer('svg');
const svg = background.toSVGString({ width: 2400, height: 1400 });
const png = await background.toBlob({ width: 2400, height: 1400 });
background.destroy();
toBlob returns a Blob so your app decides
how to download, upload, or persist it.
In context
Gallery