JPKCom DB

Trianglify UI — Tips & Tricks

Tricks for Trianglify UI: SVG vs. PNG, staying reproducible with a seed, patterns as a performant CSS background, and combining with GeoPattern and Colors.

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: SVG or PNG, 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 low-poly pattern is a few hundred triangle polygons — as a vector SVG that's often more compact than a PNG of the same area, and losslessly scalable. It stays crisp on any display, HD or 4K, without you maintaining multiple resolutions.
  • PNG for bitmap contexts. If you need a classic pixel file — wallpaper, presentation slide, social graphic, a tool that doesn't take SVG — use PNG and export straight at the target resolution (up to 4K, or Custom up to 8192 px).
  • Cell Size drives the SVG size. The smaller the cell size, the more triangles and the larger the SVG file. 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

  • The seed is your only determinism lever. Only with a seed set are patterns recoverable. Found something good in the preview via the shuffle icon? Freeze it with a seed right away (the shuffle icon sets one automatically) — otherwise the variant is gone after the next Generate Pattern.
  • The seed is in the file name. Downloaded files are named trianglify-<seed>-<width>x<height>.<ext>. So you carry the seed with you automatically and can reconstruct a pattern from the file name later — seed back into the field, same palette, same cell size and variance.
  • Export ≠ preview without a seed. Export renders freshly at the export resolution. Without a seed you get a different pattern than in the preview. If you want "this exact image, just bigger", set a seed first.
  • Same look, different density on big exports. Cell size is an absolute pixel value. A 3840 px export holds far more triangles at the same cell size than the ~800 px preview. The pattern looks finer — to keep the preview look, raise the cell size for the export accordingly.

Performance as a CSS background

  • Inline SVG saves a request. Embedding the SVG Data URL directly as background-image: url("data:image/svg+xml;base64,…") avoids an extra image file and HTTP request — good for load time above the fold.
  • Data URL = preview resolution. The copied data URL reflects the preview size, not the export size. For a vector SVG that doesn't matter (it scales), but the PNG Data URL is only preview-sized — for a sharp bitmap use Download PNG at full resolution instead of the PNG data URL.
  • Very large data URLs get unwieldy. A fine pattern (small cell size) produces a long Base64 string that bloats your CSS. If it stays too large, download the SVG file and link it as an external file rather than embedding it inline.

Pitfalls from practice

  • Custom gradient and palette are mutually exclusive. Once Use custom color gradient is on, the Color Palette dropdown is disabled. To get the palette back, switch the toggle off first.
  • One gradient per pattern. There's exactly one color gradient, applied to both axes (the Y axis mirrors the X axis). The interface offers no separate X/Y color control — for more color variety, change the palette or the two gradient colors.
  • 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).

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 the custom 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.