Trianglify UI — Examples

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

The manual explains every setting and value range in detail. This page adds concrete workflows — typical tasks played through step by step. The tool's interface is in English, so the control and button names appear exactly as in the UI.

Example 1: A background in your brand colors

You need a hero background that matches your corporate design — not just some random colorful palette.

1. Open Trianglify UI and turn on the Use custom color gradient switch. This disables the palette dropdown.
2. Click the Start Color field and enter your first brand color as a hex value (e.g. a dark brand blue). Repeat for End Color with a second, harmonizing color.
3. Set Cell Size to a mid value (say 75) and Variance to taste — lower for a calm pattern, higher for a lively one.
4. The preview updates instantly. Happy with it? You now have a background in exactly your colors.

Tip: if you don't have your brand's exact hex values handy, find them with the Colors tool (color picker and palette extractor).

Example 2: Reproducing a pattern by seed

You found a pattern in the preview that you want to keep and restore exactly later.

1. Click the shuffle icon next to the seed field. The tool sets a random 8-character seed and renders a new pattern. Reroll until you like the result.
2. Note the seed (it's in the field and shown as a "Seed: …" badge in the preview). Together with palette, cell size, and variance, it describes the pattern completely.
3. To restore it — on another machine or weeks later — type the same seed into the field and set the same values. You get exactly the same pattern back.

That's the key difference from an empty seed field: without a seed, every click on Generate Pattern produces a new random variant you can't get back.

Example 3: Embedding it as a CSS background

You want to use the pattern directly in your stylesheet, without a separate image file.

1. Create the pattern you want in the preview (ideally with a seed set, see Example 2).
2. Expand the Base64 Data URLs section at the bottom and click Copy on SVG Data URL. The full data:image/svg+xml;base64,… string is now on your clipboard.
3. Drop it into your CSS:

.hero {
	background-image: url("data:image/svg+xml;base64,…");
	background-size: cover;
	background-position: center;
}

Because the SVG sits inline in the CSS, this saves an extra HTTP request. Note: the data URL reflects the preview resolution — for a CSS background with background-size: cover that's exactly right, since the vector SVG scales losslessly anyway.

Example 4: Exporting a 4K PNG hero image

For a presentation backdrop or a wallpaper, you need a high-resolution bitmap.

1. Create your pattern and scroll to the Export card.
2. In Export Resolution, pick 4K (3840 × 2160) — or Custom… and enter your own size (up to 8192 px per side).
3. Click Download PNG. The tool renders the pattern freshly at the chosen resolution and downloads the file as trianglify-<seed>-3840x2160.png.

Important: the export is recomputed at full resolution. For the exported image to match what you saw in the preview, a seed must be set — without one the result differs. Keep in mind that a larger area at the same cell size contains more triangles than the small preview; raise the cell size a bit for the export if needed.

Example 5: Using a specific ColorBrewer palette

You don't need a custom brand scheme but a proven, balanced color scheme.

1. Leave Use custom color gradient off and open the Color Palette dropdown.
2. From the Sequential group pick a single-hue progression (e.g. Blues or Greens) for a calm, professional look — or from Diverging a high-contrast palette (e.g. Spectral or RdYlBu) for a livelier pattern.
3. Play with Cell Size and Variance until the balance is right, then export as in Example 3 (CSS) or 4 (PNG).

The 27 palettes come from ColorBrewer and are designed for good distinguishability — a quick shortcut to a coherent result without mixing colors yourself.

---

There's more depth: the overview for the big picture, the manual for every option, and the tips & tricks for tricks and pitfalls. You can try everything right in the tool.