GeoPattern — Manual

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

This manual documents GeoPattern in full: what happens when a pattern is generated, how the text turns into shape and color, which 16 pattern types exist, and how export works, from a single tile to a surface of any size. Field and button names appear exactly as the live tool spells them, so you can find your way around the real interface.

Layout and operation

On the desktop the tool has two columns. On the left, stacked, sit the Settings card (text, switch, type and color) and the Export card (size, pixel density, download and copy buttons); on the right is the large Preview with the live rendering. Below both columns, at full width, follows the collapsible Data URIs (one tile) area. On a phone the preview comes first so you see the result straight away, with the settings underneath.

On load, the tool immediately generates a first pattern from the preset text GitHub. From then on the preview updates live: every change in the text field triggers a recompute after a short 200-millisecond pause, and the Enter key generates at once. There's no separate Generate button. The custom-mode switch and the Pattern type menu also take effect immediately; color changes follow after the same short pause.

The seed: text becomes a pattern

At the heart is the Text field (placeholder "Enter text…", default GitHub), with the hint "The same text always gives the same pattern." underneath. Your text is the seed: the tool computes its SHA-1 hash over the text's UTF-8 bytes (using the browser's Web Crypto API) and hands it to the library. From the digits of that hash the library derives all of the geometry — shape, size, arrangement and opacity of the elements. Three consequences follow:

Deterministic: the same text with the same options always produces the same pattern, pixel for pixel.
Unique per input: a single change (capitalization, a space, one extra character) yields a completely different hash, and therefore a completely different pattern.
Every character counts in full: because the hash runs over the UTF-8 bytes, texts with accented letters, Chinese characters or emoji get a pattern of their own. Plain ASCII texts produce the same pattern as before; texts with other characters look different from older versions of the tool, which only took part of each character into account.

To the right of the field sits the Random text button (a shuffle icon with crossed arrows). It inserts a random eight-character text — lowercase letters and digits, minus the easily confused i, l, o, 0 and 1 — and generates the matching pattern right away. The randomness lives only in the text: type that same text again later and you get exactly this pattern back.

An empty field (or one holding only spaces) is rejected: the field gets a red outline, and the preview keeps the last pattern it generated.

Default mode and custom mode

The Choose pattern & colour myself switch (subtitle "starts from the current pattern", off by default) decides how much the text controls and how much you set yourself. Every toggle regenerates the pattern immediately.

Default mode (switch off)

Only the text matters. From the hash, both the pattern type and the color are derived:

Type: one digit of the hash deterministically selects one of the 16 types. The type badge in the preview shows it with the suffix "(from the text)" — for the preset text GitHub, "Squares (from the text)".
Color: a base color (#933c3c, a muted brick red) is converted to HSL and shifted in hue and saturation according to the hash. That gives every text its own reproducible color.

The Pattern type and Colour fields are locked (grayed out) in this mode, but they always show the type and color of the currently derived pattern.

Custom mode (switch on)

The two fields become usable and you take control of type and color. They start with the values of the pattern currently on screen, so you adjust from there instead of from a fixed preset. The fine geometry (which elements sit where, at what size and opacity) still comes from the text — you only set the frame. Switch it off again and the tool returns to the purely derived pattern.

Pattern type

A dropdown with 16 pattern types, sorted alphabetically. The full list in menu order:

Chevrons — V-shaped angle rows.
Concentric circles — nested circle rings.
Diamonds — a diamond grid.
Hexagons — a hexagonal honeycomb.
Mosaic squares — diagonally split square mosaics.
Nested squares — squares nested inside square frames.
Octagons — octagons.
Overlapping circles — overlapping circles.
Overlapping rings — overlapping rings.
Plaid — a tartan-like striped pattern.
Plus signs — a grid of plus/cross shapes.
Sine waves — wavy sine lines.
Squares — a grid of squares.
Tessellation — a gap-free geometric tessellation.
Triangles — a triangle grid.
Xes — an X-shaped cross pattern.

Colour

The Colour field is wired to the Coloris color picker (hex format, no alpha channel). A click into the field opens the picker and puts the cursor into its own input field; there you choose via the color area, a swatch or by typing. Eight swatches are preset: #5a6c7e, #264653, #2a9d8f, #e9c46a, #f4a261, #e76f51, #d62828, #003049.

How a typed value is handled depends on where you type it:

In the picker (after a click into the field), Coloris reads the value like a CSS color and, when you apply it — Enter or a click elsewhere — writes it back into the field as a six-digit hex value. It silently converts color names and rgb()/hsl() values along the way (red becomes #ff0000), and #abc becomes #aabbcc. Always type a hex value here with the #: without it (5A6C7E), Coloris doesn't recognize it and sets black (#000000).
Directly in the field (focus via Tab, no click, so no picker), the tool checks the value itself. It accepts six- and three-digit hex values, with or without #, in any case: 5A6C7E, #5a6c7e and #abc (equivalent to #aabbcc) all work. Anything else — a color name like red, for instance — gets the message "Enter a hex colour such as #5a6c7e or #abc." below the field; the pattern stays as it is until the value is valid.

The chosen color replaces the otherwise hash-derived color and becomes the background of the tile. On top of it, the library draws the shapes in every mode as semi-transparent light (#ddd) and dark (#222) areas or lines at 2 to 15 percent opacity, plus faint black outlines at 2 percent for many types — which is why every pattern reads as a variation of its base color.

Export: SVG, PNG, and data URI

GeoPattern generates the pattern SVG-first — the native output is a vector tile. The PNG is rasterized from it client-side via an internal <canvas>. The Export card controls the size and format in which you take the result with you.

Size and pixel density

The Size menu sets the output size for both download buttons:

Option	Result
`One tile (repeat with CSS)`	a single tile at its natural size (default)
`1920 × 1080 (Full HD)`	a 1920 × 1080 px surface
`2560 × 1440 (QHD)`	a 2560 × 1440 px surface
`1200 × 630 (Open Graph)`	a 1200 × 630 px surface, the usual link-preview format on social networks
`1500 × 500 (X header)`	a 1500 × 500 px surface for an X profile header
`Custom…`	reveals the Width and Height fields

The size of a tile depends on the text and the pattern type; the preview badge shows it ("tile 160 × 160" for GitHub, "tile 280 × 184" for alice). For a fixed surface the tool repeats the tile until the area is filled — at the right and bottom edges it is simply cut off.

The Width and Height fields (default 1600 × 900) take whole numbers from 1 to 8000 pixels. Values outside that range snap to the limit when you leave the field; unreadable input falls back to the default.

The PNG at 2× pixel density option doubles the PNG's pixel count for high-resolution displays — 1920 × 1080 becomes a 3840 × 2160 pixel file. The SVG isn't affected. Each side of the PNG is capped at 8000 pixels. Below the buttons, an info line shows the actual output, for example PNG: 3840 × 2160 px · SVG: 1920 × 1080.

Save SVG / Save PNG

The Export card offers two download buttons:

Save SVG — downloads the vector file. As a tile, it's the library's SVG; at a chosen size, it's an SVG with exactly that width and height that repeats the tile via a <pattern> element. Losslessly scalable.
Save PNG — downloads a raster image at the chosen size, optionally at double pixel density. Handy wherever SVG isn't supported.

The file name is derived from your text: lowercased, accented letters reduced to their base letters (ß becomes ss, ä becomes a), every other run of characters collapsed into a hyphen, 60 characters at most. If nothing is left — say, for a text made only of Chinese characters — the file is called geopattern. The size follows: -tile for a single tile, otherwise width and height, plus @2x for a double-density PNG. The text GitHub thus yields names like github-tile.svg, github-1920x1080.png or github-1200x630@2x.png.

Copy CSS background

The Copy CSS background button puts a ready-made CSS declaration on the clipboard:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E…");

It always contains one tile as URL-encoded SVG — regardless of what's selected under Size. The browser handles the rest: a background-image repeats by default and so fills any surface.

Data URIs (one tile)

The collapsible Data URIs (one tile) area (collapsed by default; the header also opens with Enter or Space) shows the current tile in three variants, each with its size in bytes or kilobytes and a Copy button:

SVG, URL-encoded — data:image/svg+xml,… in compact form: double quotes become single quotes, and only the characters that must be escaped in a URL get percent-encoded. Usually much shorter than base64 (about 7.0 instead of 8.7 KB for GitHub); this is also the variant inside Copy CSS background.
SVG, base64 — data:image/svg+xml;base64,…, for environments that expect base64 encoding.
PNG, base64 — data:image/png;base64,…, the tile as a raster image at single pixel density.

Drop these data URIs straight into CSS (background-image: url("…")) or an <img src="…"> — no separate image file and no extra HTTP request.

Live preview

The Preview shows the pattern instantly as a tiling surface. Its header carries three badges:

the pattern type — with the suffix "(from the text)" in default mode,
the color as a small swatch with the hex value actually used — the hash-derived color in default mode, your choice in custom mode,
the tile size, for example "tile 160 × 160".

So you can see at a glance what ends up in the exported file. If a pattern or PNG can't be generated, the tool says so in a notification ("The pattern could not be generated." or "The PNG could not be rendered.").

Architecture and limits — in brief

Purely client-side: no server, no API, no upload. Hashing, SVG generation and PNG rasterization all run in the browser.
No persistence: nothing is saved; after a reload the tool starts again with the text GitHub and the data URIs collapsed.
Sizes: export as a tile, in four fixed formats or freely from 1 to 8000 pixels per side; the PNG stays capped at 8000 pixels per side even at double density. Data URIs and Copy CSS background always deliver a single tile.
Built on: the open-source GeoPattern library by btmills (opens in a new tab) (a port of jasonlong/geo_pattern (opens in a new tab)), extended with a module of its own for the UTF-8 hash, size handling, data URIs and file names; the color picker is Coloris.

For the starting point and the big picture, see the overview page. Concrete walkthroughs are in the examples, strategy and pitfalls in the tips & tricks. You can try all of this directly in the tool.