JPKCom DB

GeoPattern — Manual

Complete feature reference for GeoPattern: seed input, default and custom mode, all 16 pattern types, color control, and export as SVG, PNG, and data URI.

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

This manual documents GeoPattern in full: what happens when you generate a pattern, how the seed becomes shape and color, which 16 pattern types exist, and how export works. The interface is in English, so the field and button names appear here exactly as you'll see them in the live tool.

Layout and operation

The tool is two-column. On the left is the Settings card with the input; on the right is the large Preview with the live rendering. Below it sit an Export card (Save PNG, Save SVG) and a collapsible Base64 Data URLs area.

On load, the tool immediately generates a first pattern from the preset seed GitHub. From then on, every input updates the preview: the Generate Pattern button re-renders, as does the Enter key in the input field. When custom mode is active, changing the pattern type or the color also triggers an immediate recompute.

The seed: text becomes a pattern

At the heart is the Input String field (placeholder "Enter text…", default GitHub). Your text is the seed: it is hashed with SHA-1, and from the digits of that hash the library derives all of the geometry — shape, size, arrangement, and opacity of the elements. This has two important consequences:

  • Deterministic: the same text with the same options always produces the same pattern, pixel for pixel. There's no randomness and no "reroll" button — to get a different pattern, change the text (or, in custom mode, the type/color).
  • Unique per input: changing a single thing (capitalization, a space, one more character) produces a completely different hash, and therefore a completely different pattern.

An empty field is rejected: the tool then shows the note "Please enter a string to generate a pattern." and produces nothing.

Default mode and custom mode

The Use custom pattern & color switch (off by default) decides how much the seed controls and how much you set yourself.

Default mode (switch off)

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

  • Type: one position of the hash deterministically selects one of the 16 types.
  • Color: a base color (internally a muted brick red) is converted to HSL and shifted in hue and saturation by the hash. So every seed gets its own reproducible color.

The Pattern Type and Custom Color fields are disabled (grayed out) in this mode.

Custom mode (switch on)

The two fields become active and you take control of type and color. The fine geometry (which elements sit where, at what size and opacity) still comes from the seed — you only set the frame.

Pattern Type

A dropdown with 16 pattern types. The default is Squares. The full list, in menu order:

  • Squares — a grid of squares (default).
  • 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.
  • Octogons — octagons (spelling as in the tool).
  • 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.
  • Tessellation — a gap-free geometric tessellation.
  • Triangles — a triangle grid.
  • Xes — an X-shaped cross pattern.

Custom Color

The Custom Color field is wired to the Coloris color picker (hex format, no alpha channel). You type a hex value or click the field and choose in the picker. Eight swatches are preset: #5A6C7E, #264653, #2a9d8f, #e9c46a, #f4a261, #e76f51, #d62828, #003049. The chosen color overrides the otherwise hash-derived color. The badge in the top right of the Preview shows which color was actually used.

Export: SVG, PNG, and data URI

GeoPattern generates the pattern SVG-first — the native output is vector SVG. The PNG is rasterized from it client-side via an internal <canvas>. There are three ways to take the result with you:

Save SVG / Save PNG

The Export card offers two download buttons:

  • Save SVG — downloads the vector file, named after your seed (e.g. GitHub.svg). Losslessly scalable, ideal as a background at any size.
  • Save PNG — downloads a raster image (GitHub.png). Handy where SVG isn't supported.

The file name is always your input string plus the matching extension.

Base64 Data URLs

The collapsible Base64 Data URLs area (collapsed by default) shows two fields, each with a Copy button:

  • PNG Data URL — the PNG variant as data:image/png;base64,….
  • SVG Data URL — the SVG variant as data:image/svg+xml;….

You drop these data URIs straight into CSS (background-image: url("…")) or an <img src="…"> — with no separate image file and no extra HTTP request. The copy button puts the value on the clipboard; if nothing has been generated yet, you get a note rather than an empty copy.

Live preview

The Preview on the right shows the pattern instantly as a tiling surface. In the top right sits a color badge with the hex value actually used — in default mode the hash-derived color, in custom mode the one you chose. So you can see at a glance which color is baked into the exported file.

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: state isn't saved; after a reload the tool starts again with the seed GitHub.
  • No size/scaling option: the UI only controls seed, type, and color — no tile size, no resolution. Scale the SVG via CSS instead.
  • Built on: the open-source GeoPattern library by btmills (a port of jasonlong/geo_pattern).

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.