# 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. Source: https://www.jpkc.com/db/en/tools/trianglify/tips/ Back to the overview: [Trianglify UI](https://www.jpkc.com/db/en/tools/trianglify/) · Open the tool live: [www.jpkc.com/tools/trianglify/](https://www.jpkc.com/tools/trianglify/) The [manual](https://www.jpkc.com/db/en/tools/trianglify/manual/) explains every option, the [examples](https://www.jpkc.com/db/en/tools/trianglify/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--x.`. 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](https://www.jpkc.com/db/en/tools/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](https://www.jpkc.com/db/en/tools/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](https://www.jpkc.com/db/en/tools/trianglify/) for the big picture, the [manual](https://www.jpkc.com/db/en/tools/trianglify/manual/) for every option, and the [examples](https://www.jpkc.com/db/en/tools/trianglify/examples/) for the step-by-step workflows. You can try everything right in the [tool](https://www.jpkc.com/tools/trianglify/).