JPKCom DB

Trianglify UI — Manual

The complete feature reference for Trianglify UI: every setting with its effect and value range, the export formats, data URLs, and the client-side architecture.

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

This manual documents Trianglify UI in full: every setting with its effect and value range, the export paths, and the architecture behind it. The tool's interface is in English, so the controls are named exactly as they appear in the UI.

Interface and workflow

The tool has two columns: the Settings card with all controls on the left, the Preview with the currently rendered pattern on the right. Below them sit the Export card and a collapsible Base64 Data URLs section.

Every change to a control re-renders the preview instantly — dragging Cell Size and Variance first updates the number, then the image on release. Generate Pattern forces a fresh run at any time (without a seed this produces a new random pattern). The pattern is generated by the Trianglify.js v4 library, which runs entirely in the browser.

Settings

Seed (optional)

A text field (Random seed...) for the random generator's starting value. A seed makes a pattern reproducible: the same seed plus identical settings (palette, cell size, variance) produce exactly the same pattern — on any device, at any time.

  • The shuffle icon next to it (Generate random seed) creates a random 8-character alphanumeric seed (A–Z, a–z, 0–9) and re-renders immediately.
  • If you type a value yourself, the tool picks it up when you leave the field or press Enter.
  • When the field is empty, every run produces a new random pattern. A set seed is shown in the preview as a "Seed: …" badge.

Color Palette

A dropdown with 27 named palettes plus the Random mode (default). These are the well-known ColorBrewer palettes, split into two groups:

  • Sequential (18, a single gradient from light to dark): YlGn (Yellow-Green), YlGnBu, GnBu, BuGn, PuBuGn, PuBu, BuPu, RdPu, PuRd, OrRd, YlOrRd, YlOrBr, Purples, Blues, Greens, Oranges, Reds, Greys.
  • Diverging (9, two colors with a light midpoint): PuOr (Purple-Orange), BrBG, PRGn, PiYG, RdBu, RdGy, RdYlBu, Spectral, RdYlGn.

Random picks a palette on each run. The selected palette appears as a badge in the preview. The chosen gradient is applied to both axes of the pattern (the Y axis mirrors the X axis internally, yColors: match) — so there's exactly one gradient per pattern, with no separate X/Y selection.

Use custom color gradient

A switch that swaps the palette dropdown for your own two-color gradient. When it's on, the palette dropdown is disabled (you can't use both at once), and two color fields appear:

  • Start Color — default #264653.
  • End Color — default #e76f51.

Both open a color picker (Coloris) in hex format (no alpha channel) with eight preset swatches. The pattern renders as a gradient between start and end color — exactly the means to create backgrounds in your brand colors. Changing either color re-renders immediately.

Cell Size

A slider for the triangle size in pixels:

  • Range 20 to 200 px, step 5, default 75.
  • Small values give many fine triangles (more detail, larger file), large values a few big triangles (coarser, smaller file).

Since cell size is an absolute pixel value, a large export at the same cell size contains more triangles than the smaller preview.

Variance

A slider for the irregularity of the triangle arrangement:

  • Range 0 to 1.5, step 0.05, default 0.75.
  • At 0 you get a near-regular grid; the higher the value, the more the grid points are displaced and the more irregular and jagged the pattern looks.

Generate Pattern

The button at the bottom of the Settings card regenerates the pattern with the current values. With a seed set, the result is identical to before; without a seed, a new random variant appears.

Preview

The preview renders the pattern as inline SVG into the preview area (default size around 800 × 600 px, adapting to the column width). Two badges at the top right show the active palette (or "Custom"/"Random") and — if set — the seed. The preview is for viewing only; the actual output size is set in Export.

Export

Export Resolution

A dropdown for the output size of the downloads:

  • HD (1280 × 720)
  • Full HD (1920 × 1080) — default
  • QHD (2560 × 1440)
  • 4K (3840 × 2160)
  • Custom… — unlocks two fields for Width and Height (range 100 to 8192 px, default 1920 × 1080).

Important: export renders the pattern freshly at the chosen resolution, not as an upscaled preview. At the same cell size, a larger area covers more triangles. Only with a seed set is the output deterministic — without a seed the exported pattern may differ from the preview you're looking at.

Download PNG

Generates the pattern at the export resolution, renders it to a canvas, and downloads it as a PNG bitmap.

Download SVG

Generates the pattern at the export resolution and downloads it as an SVG vector. Usually the better choice for web backgrounds: scalable and, for these patterns, often more compact than a PNG.

File names

The downloaded file is named trianglify[-<seed>]-<width>x<height>.<png|svg> — e.g. trianglify-Ab12Cd34-1920x1080.png with a seed, or trianglify-1920x1080.svg without. The seed is right there in the file name, ready to be typed back into the tool to reproduce the pattern.

Base64 Data URLs

A collapsible section provides two Base64 data URLs of the current preview pattern to copy:

  • PNG Data URL — data:image/png;base64,… from the preview canvas.
  • SVG Data URL — data:image/svg+xml;base64,… from the preview SVG.

Both reflect the preview resolution (not the export size) and are made for embedding the pattern directly in CSS without a separate image file:

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

The Copy button puts the respective data URL on the clipboard.

Architecture: all in the browser

Trianglify UI is purely client-side. There's no server roundtrip, no API, and no upload: the pattern is generated, rendered, and exported entirely in your browser via the open-source Trianglify.js v4 library (by Quinn Rohlf, GPL-3.0). Nothing you create leaves your device — the download and the data-URL copy happen locally.

Value ranges at a glance

Setting Range Step Default
Cell Size 20–200 px 5 75
Variance 0–1.5 0.05 0.75
Custom Width/Height 100–8192 px — 1920 / 1080
Seed free text / 8-char random — empty
Color Palette 27 palettes + Random — Random

For the introduction and the audiences, see the overview page; for concrete workflows, the examples. You can try everything right in the tool.