JPKCom DB

GeoPattern

Turn a text seed into deterministic geometric SVG background patterns and export as SVG, PNG or data URI — start here for manual, examples and tips.

A word becomes a pattern

GeoPattern turns any text — a name, a domain, an ID — into a geometric SVG background pattern in the style of the well-known GitHub profile graphics. You type a seed string and the tool computes a tiling, area-filling pattern from it, along with a matching color. The same text always produces the same pattern: the output is deterministic, not random.

That's the real trick. From the seed, a SHA-1 hash derives both the geometry (shape, size, arrangement, opacity) and — unless you override them — the pattern type and the color. So every username, project, or category automatically gets its own recognizable pattern with no design work on your part. If you want more control, switch on custom mode and pick the type and color yourself.

The tool is built for everyone who needs quick, license-free decorative backgrounds: developers generating placeholder avatars or profile banners; designers looking for a repertoire of patterns for cards, headers, or empty states; and anyone who needs a CSS background-image snippet that works without an external file. No account, no installation, free.

What the tool can do

  • Seed-driven patterns — one Input String deterministically produces a pattern. Same text, same result.
  • 16 pattern types — from Squares through Hexagons, Triangles, and Chevrons to Sine Waves. By default the hash picks the type; in custom mode you pick it.
  • Custom color — the Use custom pattern & color switch enables a Coloris color picker (hex) that overrides the hash-derived color.
  • Export as SVG and PNG — Save SVG and Save PNG download the file, named after your seed (GitHub.svg, GitHub.png).
  • Data URI to copy — the collapsible Base64 Data URLs area provides the SVG and PNG data URLs for direct use in CSS or HTML, each with a copy button.
  • Live preview — the pattern appears instantly; a badge shows the color actually used.

Default and custom mode

GeoPattern has two operating modes, toggled with the Use custom pattern & color switch:

  • Default (switch off): Only the Input String matters. Both the pattern type and the color are derived from the string's hash. Ideal when you want a unique, recognizable graphic per seed (avatars, category backgrounds).
  • Custom (switch on): The Pattern Type (16 types) and Custom Color fields become active (previously grayed out). Now you set type and color yourself; the fine geometry still comes from the seed. Ideal when the pattern should match a brand color and a desired look.

A pure browser solution — nothing leaves your device

GeoPattern is entirely client-side: there's no server round-trip, no API, and no upload. Hashing, SVG generation, and even the PNG rasterization (via an internal <canvas>) run in the browser. Your seed text and the graphics you create stay on your device. The tool builds on the open-source library GeoPattern by btmills.

Try it now

→ Open GeoPattern — type some text, look at the pattern, download it as SVG or PNG, or copy the data URI. No account, free, right in the browser.

For backgrounds, colors, and graphics tasks, these tools pair well:

  • Trianglify — low-poly triangle backgrounds with a gradient, the ideal alternative when you want a soft gradient surface instead of geometric tiles.
  • Colors — create and convert color values and palettes to find the right hex value for custom mode.
  • Graphic — another graphics utility in the JPKCom portfolio for image and SVG tasks.

There's more on the subpages: the manual with every option and pattern type, hands-on examples, and a collection of tips & tricks.