JPKCom DB

GeoPattern

Turn any text into a deterministic geometric pattern, export it as SVG or PNG at any size, and copy it as a CSS background or data URI.

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 some text, and the tool computes a tiling pattern with a matching color from it, live, as you type. The same text always produces the same pattern: the output is deterministic, not random.

That's the real trick. The SHA-1 hash of the text (taken over its UTF-8 bytes, so it stays unique for accented letters, Chinese characters or emoji) drives the geometry (shape, size, arrangement, opacity) and — unless you override them — the pattern type and the color. 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, starting from whatever pattern the text currently produces.

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

  • Text-driven patterns — whatever you put in the Text field deterministically produces a pattern. Same text, same result. The preview follows as you type, and the Random text button (a shuffle icon with crossed arrows) drops in a random text when you're out of ideas.
  • 16 pattern types — from Chevrons through Hexagons, Plaid and Triangles to Xes. By default the hash picks the type; in custom mode you do.
  • Your own color — the Choose pattern & colour myself switch enables a Coloris color picker (hex, short forms like #abc included) that overrides the hash-derived color.
  • Export at any size — Save SVG and Save PNG deliver either a single tile or a finished surface: Full HD, QHD, an Open Graph image, an X header or a custom size up to 8000 × 8000 pixels, with the PNG optionally at double pixel density. File names are derived from your text (github-tile.svg, github-1920x1080.png).
  • CSS and data URIs — Copy CSS background puts a ready-made background-image line on the clipboard. The collapsible Data URIs (one tile) area offers the tile as URL-encoded SVG, as base64 SVG and as base64 PNG, each with its size and a copy button.
  • Live preview — the pattern appears instantly; three badges show the pattern type, the color and the tile size in use.

Default and custom mode

GeoPattern has two modes, toggled with the Choose pattern & colour myself switch:

  • Default (switch off): Only the text matters. Both the pattern type and the color come from its hash, and the type badge in the preview carries the suffix "(from the text)". Ideal when you want a unique, recognizable graphic per text without lifting a finger (avatars, category backgrounds).
  • Custom (switch on): The Pattern type (16 types) and Colour fields become usable. They start out on the type and color of the current pattern, so you adjust from there rather than from a fixed preset. The fine geometry still comes from the text. Ideal when the pattern has to match a brand color and a particular 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 (via the browser's Web Crypto API), SVG generation and even PNG rasterization (via an internal <canvas>) all run in the browser. Your text and the graphics you create stay on your device. The tool builds on the open-source library GeoPattern by btmills (opens in a new tab), a JavaScript port of Jason Long's Ruby library geo_pattern (opens in a new tab).

Try it now

→ Open GeoPattern — type some text, look at the pattern, download it as SVG or PNG at the size you need, or copy the CSS and 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 natural 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 — image editor and converter: crop or resize the exported PNG, or convert it to WebP, AVIF or JPEG.

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