Trianglify UI — Tips & Tricks

Back to the overview: Trianglify UI · Open the tool live: www.jpkc.com/tools/trianglify/

The manual explains every option, the examples show the workflows. This page is about what both assume: which format when, how to stay reproducible, when a pattern slows your page down, and how to combine Trianglify UI with the other JPKCom tools.

SVG or PNG — when to use which

For the web, almost always SVG. A Full HD pattern at the default cell size of 75 px is made of roughly a thousand triangles — as a vector SVG that's compact and losslessly scalable. It stays crisp on any display, HD or 4K, without you maintaining multiple resolutions.
PNG, JPEG, or WebP for bitmap contexts. If you need a classic pixel file — wallpaper, presentation slide, social graphic, a program that doesn't take SVG — export straight at the target size (presets up to 4K, or Custom up to 8192 px). PNG is lossless, JPEG usually the smallest but without transparency, and WebP combines small files with transparency.
2× only where it counts. Raster images at 2× pixel density quadruples the pixel count. Worth it for a Retina wallpaper, usually not for an Open Graph image that platforms rescale anyway.
Cell size drives the SVG size. The smaller the cell size, the more triangles and the larger the SVG file. The badge above the preview shows the triangle count live. For a web background, a mid-to-large value (75 and up) is usually the better trade-off between looks and file size.

Reproducibility: no seed, no recovery

Every pattern has a seed. Leave the field empty and the tool fills in a random seed itself. So every pattern you see can be restored — provided you hold on to the seed before rolling on with the shuffle icon.
The link is the better memory. Copy link captures the seed, palettes, style, every slider, and the size in one URL. That's more reliable than copying down individual values — and you can simply bookmark it. Only the 2× option isn't included.
The seed is in the file name. Downloaded files are named trianglify-<seed>-<width>x<height>.<ext>. With random seeds you can reconstruct a pattern from it — seed back into the field, same size, same settings. For the file name, though, the tool lowercases the seed and replaces special characters; with your own seeds like My Project! it no longer matches the original, and only the link helps.
The size is part of the pattern. The tool computes the pattern directly at the export size, so the download is exactly the preview. But change the size and the same seed produces different triangles. Settle on the size before you fine-tune the pattern.
Cell size counts in export pixels. A 4K pattern with 75 px cells looks finer in the scaled-down preview than a Full HD pattern with 75 px. For the same look at twice the size, double the cell size — or stay at Full HD and use the 2× option for raster images, which leaves the pattern unchanged.

Performance as a CSS background

Inline SVG saves a request. Copy CSS gives you the pattern as background-image: url("data:image/svg+xml,…") plus background-size: cover. That avoids an extra image file and HTTP request — good for load time above the fold. The SVG is URL-encoded rather than Base64-encoded, which makes it noticeably shorter.
PNG data URIs are heavy. The PNG data URI in the Data URIs card is at full export size (with 2× even at double pixel density) and gets correspondingly long. For CSS backgrounds, the SVG variant is almost always the better choice.
Watch the size readout. Next to both data URIs you see their length in KB or MB. The tool itself recommends a file once you're past a few hundred KB. A fine pattern (small cell size) bloats the SVG considerably — in that case download the SVG file and link it externally, or raise the cell size.
Match the size to the aspect ratio. With background-size: cover, the pattern gets cropped when the proportions don't fit. For wide, shallow areas, X header (1500 × 500) is closer than Full HD; for anything else, set the right ratio under Custom….

Pitfalls from practice

Own gradient and palettes are mutually exclusive. Once Own two-colour gradient is on, Colour palette and Vertical gradient are disabled. To get the palettes back, switch the toggle off first. A second, vertical gradient is only available with palettes.
Invalid color = frozen preview. Mistype a hex value and the field turns red while the preview stays at the last valid pattern. Accepted are #264653 and the short form #abc.
Variance 0 is a grid. With variance at 0 you get a near-regular triangle grid without the typical low-poly character. For the lively look you need a value well above 0 (default 0.75).
Go easy on effects. For calm backgrounds behind text, keep the Effect strength of Sparkle and Shadows on the low side; high values suit decorative areas with nothing on top. Best to try it right in the preview — the slider takes effect while you drag.
Fine patterns take time to compute. With a very small cell size and a large format you get tens of thousands of triangles, and at 8192 px per side well over a hundred thousand. The tool then waits a little longer after slider and field input before recomputing, and the files grow accordingly — the triangle badge tells you where you stand.
Export a wireframe as PNG or WebP. In wireframe mode, only PNG and WebP keep the transparent background. JPEG puts the lines on white, and in the SVG (Copy CSS included) the triangles are filled black because they lack a fill attribute.

Combining with other JPKCom tools

Find brand colors with Colors. Use the color picker or palette extractor to find your brand's exact hex values and enter them as the start and end color of your own gradient.
A different pattern language with GeoPattern. If triangles don't fit, GeoPattern generates geometric SVG background patterns (diamonds, circles, lines) from a text seed — a sensible alternative for the same purpose.

More context: the overview for the big picture, the manual for every option, and the examples for the step-by-step workflows. You can try everything right in the tool.