# GeoPattern — Tips & Tricks > Tricks for GeoPattern: working with the deterministic seed, file size and SVG vs. PNG, use as a CSS background-image, and combining it with Colors and Trianglify. Source: https://www.jpkc.com/db/en/tools/geopattern/tips/ Back to the overview: [GeoPattern](https://www.jpkc.com/db/en/tools/geopattern/) · Open the tool: [www.jpkc.com/tools/geopattern/](https://www.jpkc.com/tools/geopattern/) The [manual](https://www.jpkc.com/db/en/tools/geopattern/manual/) explains every option, the [examples](https://www.jpkc.com/db/en/tools/geopattern/examples/) show the workflows. This page is about what both assume: how to use the deterministic seed cleverly, what to watch for with file size and format, and how GeoPattern plays with other JPKCom tools. ## Understanding and using the deterministic seed - **The seed is an address, not a die.** The same text with the same options always produces the same pattern. That's a feature, not a random generator: use it to create a stable, recognizable graphic per identifier (username, email, project ID) that you can reproduce identically at any time without storing it. - **There's no "reroll" button.** In default mode, to get a different pattern, **change the text**. Even an appended character or a suffix like `-v2` produces a brand-new hash and therefore a new pattern. That's how you deliberately page through variants instead of hoping for randomness. - **Capitalization and whitespace count.** `GitHub`, `github`, and `GitHub ` (with a space) are three different seeds with three different patterns. If you need reproducible patterns per user, **normalize** the identifier first (e.g. lowercase it consistently) so the same person doesn't appear one way here and another way there. - **In default mode the color also comes from the seed.** If you need a specific brand color, there's no way around custom mode — otherwise the hash picks the color itself. Conversely: if automatically varying colors are fine (avatars), leave custom mode off. ## Format and file size - **SVG is the native, usually better choice.** The pattern is generated as a vector; the PNG is just a client-side rasterization of it. SVG files are small, tile cleanly, and stay sharp at any size. Reach for PNG only when the target can't handle SVG (some email clients, old systems, certain upload fields). - **As a CSS background, SVG always wins.** A tiled SVG stays sharp on Retina displays and weighs almost nothing; a PNG would have to be much larger for the same sharpness. - **A data URI saves a request but costs bytes in the markup.** An embedded `data:` URL saves a separate image file and an HTTP request — handy for a single hero element. With many repetitions or very large markup, an external `.svg` file (via `Save SVG`) is more maintainable and more cacheable. Rule of thumb: one or two backgrounds → data URI; many or shared → file. - **PNG is fixed to its raster size.** It doesn't scale losslessly. If you need the pattern larger later, regenerate rather than upscaling a small PNG — or use SVG from the start. ## Use as a `background-image` - **`background-repeat: repeat` turns the tile into a surface.** GeoPattern patterns are built to tile seamlessly. Set the data URI or the `.svg` file as `background-image` and let it repeat to fill arbitrarily large surfaces. - **Legibility first.** As a background behind text, a bold pattern can interfere. In custom mode, pick a **muted color**, or lay a semi-transparent overlay (a white/dark surface with opacity) over the pattern via CSS so the text stays readable. - **Mind dark/light.** A color that works on light can vanish on dark. If needed, generate two variants with different custom colors and switch between them via `prefers-color-scheme`. ## Pitfalls - **An empty field produces nothing.** Without text the tool shows "Please enter a string to generate a pattern." — the `Input String` is required. - **No suggestion/gallery mode.** There's no random gallery and no batch export: you always work on exactly one seed. You create variants via changed seeds or type/color. - **No size or scaling option in the UI.** The interface only controls seed, type, and color. You set the display size downstream via CSS — losslessly for SVG. - **Nothing is saved.** GeoPattern has no persistence: after a reload the field reads `GitHub` again. To keep a result, export it (SVG/PNG) or copy the data URI — and note the seed, so you can regenerate it identically at any time. ## Combining with other JPKCom tools - **Find the right color — with [Colors](https://www.jpkc.com/db/en/tools/colors/).** Custom mode expects a hex value. Determine or convert it in the Colors tool (say, from a brand value in RGB/HSL) and then paste it into **Custom Color**. - **Soft gradients instead of geometric tiles — with [Trianglify](https://www.jpkc.com/db/en/tools/trianglify/).** If you need a low-poly triangle background with a gradient rather than a tiling geometric pattern, Trianglify is the right alternative. Both produce SVG/data-URI backgrounds — choose by look. - **Further graphics tasks — with [Graphic](https://www.jpkc.com/db/en/tools/graphic/).** For downstream image and SVG editing around your exported background. --- For more context: the [overview](https://www.jpkc.com/db/en/tools/geopattern/) for the big picture, the [manual](https://www.jpkc.com/db/en/tools/geopattern/manual/) for every option, and the [examples](https://www.jpkc.com/db/en/tools/geopattern/examples/) for the step-by-step workflows. You can try all of this directly in the [tool](https://www.jpkc.com/tools/geopattern/).