JPKCom DB

Trianglify UI — Manual

Every Trianglify UI setting with its value range: seed, palettes, styles, wireframe, sizes, PNG/JPEG/WebP/SVG, CSS, a shareable link, and data URIs.

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 controls are named exactly as they appear in the tool's interface — including its British spelling (colour).

Interface and workflow

On the desktop, the Settings card with all controls sits on the left, the Preview with the current pattern on the right, and directly below it the Size & export card with the size and the download buttons. At the very bottom comes the collapsible Data URIs card. On a phone, the preview comes first and the settings follow below.

There's no "Generate" button: every change takes effect immediately. Dropdowns and switches regenerate the pattern right away, sliders while you drag them, and the seed field as you type (press Enter to skip the delay). To keep the interface responsive, the tool waits briefly after each input — 120 ms, or 400 ms for very fine patterns with an estimated 40,000+ triangles. The pattern is generated by the Trianglify.js v4 library, which runs entirely in the browser.

Core principle: download = preview

Trianglify UI computes exactly one pattern per set of settings — always with a seed and always at the selected export size. The preview simply shows that pattern scaled down; PNG, JPEG, WebP, SVG, the copied CSS, and the data URIs all come from the same pattern. What you see in the preview is exactly what you download — which is what the preview heading says: exactly what you download, scaled to fit.

Two consequences:

  • Changing the export size produces a new pattern, because the geometry depends on width and height — even with the same seed.
  • Cell size is measured in pixels of the export size. A 4K image with 75 px cells looks finer in the scaled-down preview than an HD image with 75 px cells.

Settings

Seed

A text field (up to 64 characters) for the random generator's starting value. Below it is the hint Same seed + settings = same pattern: the same seed plus identical settings produce exactly the same pattern — on any device, at any time.

  • The shuffle icon next to it (New random seed) sets a random 8-character seed and re-renders immediately. The characters come from abcdefghjkmnpqrstuvwxyz23456789 — lowercase letters and digits only, without the easily confused i, l, o, 0, and 1. The seed is generated with crypto.getRandomValues().
  • Values you type yourself are picked up as you type; the seed is case-sensitive.
  • An empty field doesn't really exist: if you delete the seed, the tool automatically inserts a new random one on the next run and shows it in the field. That keeps every pattern reproducible.

Colour palette

A dropdown with 27 ColorBrewer palettes plus Random (from the seed) as the default:

  • Sequential (18, a single gradient from light to dark): Yellow-Green (YlGn), Yellow-Green-Blue, Green-Blue, Blue-Green, Purple-Blue-Green, Purple-Blue, Blue-Purple, Red-Purple, Purple-Red, Orange-Red, Yellow-Orange-Red, Yellow-Orange-Brown, Purples, Blues, Greens, Oranges, Reds, Greys.
  • Diverging (9, two colors with a light midpoint): Purple-Orange (PuOr), Brown-Blue-Green, Purple-Green, Pink-Yellow-Green, Red-Blue, Red-Grey, Red-Yellow-Blue, Spectral, Red-Yellow-Green.

Random picks the palette from the seed — so the same seed also gives you the same palette. A narrow swatch strip below the dropdown shows the colors of the selected palette; it's hidden for Random and for your own gradient. The palette defines the gradient along the horizontal axis and — unless you choose otherwise in the next dropdown — along the vertical axis as well.

Vertical gradient

A second dropdown for the gradient along the vertical axis. The default is Same as the palette, in which case the y axis follows the same palette as the x axis. Pick one of the 27 palettes here and the tool blends two gradients: each triangle gets equal parts of the first palette's color at its horizontal position and the second palette's color at its vertical position. That gives you two-dimensional color fields — Blues horizontally and Oranges vertically, for instance.

Own two-colour gradient

A switch that swaps the palettes for your own two-color gradient. When it's on, Colour palette and Vertical gradient are disabled and two color fields become editable:

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

Both open the Coloris color picker in hex format (no alpha channel) with eight preset swatches. You can also type directly: six-digit (#264653) and three-digit hex values (#abc) are accepted, and the # is optional. If a value is invalid, the field turns red, the message Enter hex colours such as #264653 or #abc. appears below it, and the tool keeps the last valid pattern. Your own gradient applies to both axes.

Style

Controls how the triangles are colored:

  • Smooth gradient (default) — an even gradient across the area.
  • Sparkle (random colour jitter) — each triangle samples its color from a slightly shifted point in the gradient, which gives a lively, "glittering" pattern.
  • Shadows (random darkening) — each triangle is darkened by a random amount, suggesting depth and cast shadows.

The randomness of both effects comes from the seed, so a Sparkle or Shadows pattern is just as reproducible as a smooth gradient.

Effect strength

A slider that only appears for Sparkle and Shadows:

  • Range 0 to 1, step 0.05, default 0.50.
  • For Sparkle it sets how far a color may jump along the gradient; for Shadows, how much a triangle can be darkened at most. Even at 0, a small residual effect remains.

Cell size

A slider for the triangle size in pixels, explicitly measured at the export size (at export size):

  • Range 10 to 400 px, step 5, default 75.
  • Small values give many fine triangles (more detail, larger SVG file), large values a few big ones.

A badge above the preview shows how many triangles you end up with.

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.

Line width

Traces the triangle edges:

  • Range 0 to 20 px, step 0.5, default 0 (no lines).
  • Each line takes the color of its triangle — there's no contrasting outline color. The slider shows its effect most clearly in wireframe mode, where it sets the stroke width.

Wireframe

The Wireframe (outlines only, transparent) switch drops the fill and draws only the triangle outlines in their gradient colors. If Line width is at 0, the tool uses 1 px automatically. The background stays transparent — the preview shows this as a checkerboard. PNG and WebP keep the transparency; JPEG has none and gets a white background. Careful with SVG: in wireframe mode the library writes no fill attribute on the triangles at all, and SVG paints shapes without one in black. The SVG file, Copy CSS, and the SVG data URI therefore show colored outlines on black triangles instead of a transparent background — even though the info line below the buttons lists SVG as well. For a transparent wireframe, use PNG or WebP.

Preview

The preview draws the pattern on a canvas, scaled to the column width and sharp on high-density displays. It keeps the aspect ratio of the export size and is at most 70% of the window height (50% on a phone), so even portrait formats like a phone wallpaper stay fully visible. When the window is resized, the tool redraws the preview.

Three badges in the card header sum up the pattern:

  • Palette — the name of the selected palette, Random palette, or Own gradient.
  • Size — the export size, e.g. 1920 × 1080.
  • Triangles — the actual number of triangles in the pattern (… triangles).

Export

The Size & export card brings together the size, pixel density, and every output path.

Size

A dropdown for the export size. Since the pattern is computed at this size, it also drives the preview:

  • HD (1280 × 720)
  • Full HD (1920 × 1080) — default
  • QHD (2560 × 1440)
  • 4K (3840 × 2160)
  • Open Graph (1200 × 630) — preview image for shared links
  • X header (1500 × 500) — profile banner
  • Square (1080 × 1080)
  • Phone wallpaper (1080 × 1920) — portrait
  • Custom… — reveals two fields, Width and Height (range 16 to 8192 px, default 1920 × 1080). The tool clamps out-of-range values; when you leave the field, it shows the value actually used.

Raster images at 2× pixel density

A checkbox for raster images: when it's ticked, PNG, JPEG, WebP, and the PNG data URI are twice as wide and twice as high in pixels — Full HD becomes a 3840 × 2160 px image with the identical pattern, meant for Retina and other HiDPI displays. The file name gets an @2x suffix. The option has no effect on SVG, which scales losslessly anyway.

Below the buttons, the tool always shows the actual pixel size of the raster images (Raster images: … px); in wireframe mode it adds a note on which formats stay transparent. The 2× setting is not one of the values stored in the shared link.

PNG, JPEG, and WebP

The PNG, JPEG, and WebP buttons download the pattern as a raster image at the export size (or twice that with 2×):

  • PNG — lossless, transparent in wireframe mode.
  • JPEG — lossy at quality 0.92, always on a white background; file extension .jpg.
  • WebP — also quality 0.92, with transparency. If your browser can't write WebP, the tool says This browser cannot write WebP — use PNG or JPEG.

The pixel size doesn't depend on your display: a Full HD PNG is exactly 1920 × 1080 px even on a Retina screen, as long as you don't tick 2×.

SVG

The SVG button downloads the pattern as a vector graphic. The file carries the width and height of the export size plus a viewBox attribute — so it scales cleanly when you embed it with width: 100%, say, instead of being cropped. For web backgrounds SVG is usually the best choice: sharp at any resolution and compact for coarser patterns.

Copy CSS

Copy CSS puts a ready-made CSS declaration with the pattern as an SVG data URI on your clipboard:

background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1920 1080' …");
background-size: cover;

The SVG is URL-encoded rather than Base64-encoded — shorter and still readable. All that's left is to drop the two lines into your selector.

All settings are kept in the page's URL hash as you work, e.g. #seed=k7m2xq9p&palette=Blues&style=shadows. Copy link copies that URL. Whoever opens it gets the same pattern at the same size.

  • Stored are the seed, palette, vertical gradient, your own gradient with both colors, style, effect strength, cell size, variance, line width, wireframe, and width and height. Values matching the default are left out; the custom colors only appear in the link while your own gradient is active.
  • When a link with invalid or incomplete values is loaded, the tool corrects them to the nearest allowed value or the default.
  • Not in the link: the 2× option.

Since the hash updates with every change, you can also just bookmark the page.

File names

Downloaded files are named trianglify-<seed>-<width>x<height>[@2x].<png|jpg|webp|svg> — e.g. trianglify-k7m2xq9p-1920x1080.png, or with 2× trianglify-k7m2xq9p-1920x1080@2x.png. For the file name, the seed is lowercased, everything except a–z and 0–9 becomes -, and it's cut to 40 characters. With random seeds you can therefore type the seed straight from the file name back into the tool; for your own seeds with capitals or special characters, keep the link instead.

Data URIs

The collapsible Data URIs card gives you the pattern as a string for direct embedding. It's only computed once you expand it, and then on every change while it stays open:

  • SVG — a URL-encoded data URI (data:image/svg+xml,…), the same one Copy CSS uses.
  • PNG — a Base64 data URI (data:image/png;base64,…), at double pixel density if the 2× option is ticked.

Both match the export size. Next to each title you see the string's length in KB or MB, and Copy puts it on your clipboard. The tool's own advice: above a few hundred KB, a separate file is the better choice. You embed a data URI like this:

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

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); the color picker is Coloris. The tool stores nothing — your settings live only in the page URL. Downloads, copies, and the link are all created locally.

Value ranges at a glance

Setting Range Step Default
Seed free text up to 64 characters / 8 random characters — random
Colour palette 27 palettes + Random (from the seed) — Random
Vertical gradient Same as the palette + 27 palettes — Same as the palette
Own two-colour gradient start/end color as hex — off, #264653 / #e76f51
Style Smooth gradient, Sparkle, Shadows — Smooth gradient
Effect strength 0–1 0.05 0.50
Cell size 10–400 px 5 75
Variance 0–1.5 0.05 0.75
Line width 0–20 px 0.5 0
Wireframe on/off — off
Size 8 presets + Custom 16–8192 px — 1920 × 1080
2× pixel density on/off (raster images only) — off

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