GeoPattern — Tips & Tricks

Back to the overview: GeoPattern · Open the tool: www.jpkc.com/tools/geopattern/

The manual explains every option, the examples show the workflows. This page is about what both take for granted: 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.
• The randomness is in the text, not the pattern. 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. The Random text button saves you the thinking: it inserts a random eight-character text. If you like the result, write the text down — it's the only key to getting exactly that pattern back.
• Capitalization and whitespace count. GitHub, github and GitHub (with a trailing space) are three different seeds with three different patterns. If you need reproducible patterns per user, normalize the identifier first (lowercase it consistently, for example) so the same person doesn't look one way here and another way there.
• Accents and other scripts count in full. The hash runs over the text's UTF-8 bytes, so 中 and -, for instance, give different patterns — older versions of the tool only read part of each character and showed the same pattern for both. Plain ASCII texts look the same as in older versions; if you made a pattern there from a text with accented letters or emoji, it looks different today. If you need the old image, use the file you exported back then.
• In default mode the color comes from the seed too. If you need a specific brand color, there's no way around custom mode — otherwise the hash picks the color itself. Handy detail: when you switch it on, custom mode takes over the type and color of the current pattern, so you only change what bothers you. 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 spares you 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 easier to maintain and cache. 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. So set the target size under Size (or Custom…) before exporting, and tick PNG at 2× pixel density for high-resolution displays, rather than upscaling a small PNG afterwards — or go with SVG from the start.
• Watch the 8000-pixel limit at 2×. Each side of the PNG is capped at 8000 pixels, independently. If only one side exceeds the limit at double density (6000 × 1000 → 8000 × 2000 instead of 12000 × 2000, say), the pattern gets squashed in that direction. The info line below the buttons shows the actual pixel size — if the aspect ratio no longer matches there, stay below 4000 pixels per side at 2× or leave the box unticked.
• URL-encoded beats base64. In Data URIs (one tile), each variant shows its length. The URL-encoded SVG is usually noticeably shorter than the base64 version (about 7.0 instead of 8.7 KB for the text GitHub) and stays reasonably readable in a stylesheet; that's why Copy CSS background uses it. You only need the base64 variant where a target explicitly demands base64.

Use as a background-image

• The tile for CSS, a fixed size for fixed images. GeoPattern patterns are built to tile seamlessly, so a single tile is all a background-image needs — exactly what Copy CSS background delivers, and background-repeat: repeat (the default) fills surfaces of any size. You only need a size under Size for files with a fixed format, such as an Open Graph image or a wallpaper.
• Several sized SVGs inline? Rename the IDs. A sized SVG repeats the tile via a <pattern id="geopattern">. Embedded with <img> or as a background, that doesn't matter. But if you paste several such files directly as <svg> markup into the same HTML page, they share that ID, and all of them may end up showing the same pattern. Rename the ID per file in that case (in both places: id="…" and fill="url(#…)").
• Legibility first. As a background behind text, a bold pattern can get in the way. In custom mode, pick a muted color, or lay a semi-transparent overlay (a white or dark surface with reduced opacity) over the pattern via CSS so the text stays readable.
• Mind dark and 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 (or with only spaces) the Text field gets a red outline and the preview keeps the last pattern — the text is required.
• Picker and field check differently. Click into Colour and your input lands in the Coloris picker's own input field: it silently converts color names like red and RGB values to hex, but turns a hex value without # into black (#000000) — so always type the # there. Type straight into the field without clicking (via Tab) and the tool only accepts hex values (three or six digits, with or without #); anything else triggers "Enter a hex colour such as #5a6c7e or #abc.", and the pattern doesn't change until the value is right.
• No suggestion or gallery mode. There's no random gallery and no batch export: you always work on exactly one seed. You create variants via changed seeds (by hand or with Random text) or via type and color.
• Data URIs and CSS are always one tile. The Size setting only affects Save PNG and Save SVG. If you need a finished surface as a file, download it; for CSS the tile is the right choice anyway.
• 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. Custom mode expects a hex value (short forms like #abc included). Work it out or convert it in the Colors tool (say, from a brand value in RGB/HSL) and then paste it into Colour, including the #.
• Soft gradients instead of geometric tiles — with 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.
• Post-process the PNG — with Graphic. Crop or resize the exported background, or save it as WebP, AVIF or JPEG when the target calls for a more compact format.

For more context: the overview for the big picture, the manual for every option, and the examples for the step-by-step workflows. You can try all of this directly in the tool.