JPKCom DB

GeoPattern — Examples

Walkthroughs for GeoPattern: a pattern from text, type and color in custom mode, CSS background, one pattern per user and an Open Graph image at any size.

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

The manual explains every option and pattern type in detail. This page adds concrete workflows: typical tasks played through step by step, with field and button names exactly as the tool shows them.

Example 1: Your first pattern from a seed

The starting point — you want to see how text becomes a pattern.

  1. Open GeoPattern. The Text field already contains GitHub, and the preview shows the pattern generated from it: the badges above it read "Squares (from the text)", the color #455e8a and "tile 160 × 160".
  2. Replace the text with your own seed — your name or a domain, say. The preview changes as soon as you pause typing; there's no Generate button to click.
  3. Notice the principle: the Choose pattern & colour myself switch is off, so your text alone determines both the pattern type and the color. The badges tell you which values the text produced.
  4. Type the same text again: an identical pattern. Change a single character: a completely different pattern. That's the deterministic logic at work.
  5. Curious about other variants? Click the Random text button (the shuffle icon) next to the field. It inserts a random eight-character text — jot it down if you like the pattern, because that exact text will produce it again any time.

In seconds you have a reproducible graphic without designing anything.

Example 2: Same seed, different color — custom mode

You like the shape but need a color that fits your brand.

  1. Leave your seed in the Text field.
  2. Turn on the Choose pattern & colour myself switch. The Pattern type and Colour fields become usable and are already set to the type and color of the pattern you're looking at — the pattern itself doesn't change yet; only the type badge drops its "(from the text)" suffix.
  3. Click into Colour and pick a color in the Coloris picker — one of the eight swatches, for instance. The click puts the cursor into the picker's own input field; there you can also type one of your brand colors, in short form like #264 if you like, but always with the # — without it the picker turns the value into black (#000000). Press Enter or click elsewhere to apply it, and the preview updates right away.
  4. Read the result: the basic arrangement stays — it still comes from the seed — but the color is now yours. The color badge shows exactly the value in use, which is also what lands in the export. In the picker, Coloris silently converts even a color name like red (#ff0000). You only see the error message when you type straight into the field without clicking, for instance after tabbing into it: then red brings up "Enter a hex colour such as #5a6c7e or #abc." below the field, while the pattern stays as it was.

This decouples recognizability (seed) from coloring (brand).

Example 3: Forcing a specific pattern type

Sometimes you want hexagons or triangles specifically, regardless of which type the hash would have picked.

  1. Turn on Choose pattern & colour myself. The type badge drops its "(from the text)" suffix right away.
  2. Open Pattern type and pick one of the 16 types, e.g. Hexagons or Triangles. The preview jumps to the chosen type at once.
  3. Try the types out — Sine waves for a wavy line look, Plaid for a tartan feel, Concentric circles for rings. The seed still determines the specific expression within the type; keep an eye on the tile-size badge, which changes noticeably from type to type.
  4. Combine this with your own Colour from Example 2 until look and color are right.

Example 4: Embedding as a CSS background-image

The most common goal — you want the pattern in a page without a separate image file.

  1. Generate your pattern (seed, optionally type and color in custom mode).

  2. In the Export card, click Copy CSS background. The clipboard now holds a complete declaration with the tile as URL-encoded SVG — whatever is selected under Size.

  3. Drop it into your CSS:

    .hero {
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' …");
	background-repeat: repeat;
}

  4. Because SVG is a vector, the pattern tiles cleanly and stays sharp at any screen size — and there's no extra HTTP request, because the image lives inside the stylesheet. background-repeat: repeat is the default anyway, but stating it explicitly does no harm.

If you only need the URI without the CSS wrapper, expand Data URIs (one tile) at the bottom and copy SVG, URL-encoded or SVG, base64. For a raster image (for an email or a legacy system, say), take PNG, base64 or use Save PNG.

Example 5: A unique pattern per user (avatars/banners)

The classic GitHub use case — every account should automatically get its own graphic.

  1. Leave the Choose pattern & colour myself switch off so that type and color come purely from the seed.
  2. Enter a stable identifier per user as the Text — a username, email address or ID. Accented letters and non-Latin scripts are no problem: every identifier gets its own pattern.
  3. The preview immediately shows a unique, recognizable graphic for exactly that identifier.
  4. Repeat for further identifiers: each gets its own pattern, and because the logic is deterministic, the same identifier will look exactly the same again later.
  5. Export per user with Save SVG or Save PNG. The file name automatically takes the identifier plus the size — with the default One tile (repeat with CSS), that's alice-tile.svg and bob-tile.svg. For a profile banner, pick a format under Size first, e.g. 1500 × 500 (X header) — the file is then called alice-1500x500.png.

Example 6: Choosing SVG vs. PNG deliberately

Both formats have their place — here's how to decide.

  1. Generate your pattern and pick the size you need under Size.
  2. Save SVG when you need lossless scalability: as a CSS background, for large surfaces, or when the file may change size later. The file is small and sharp at any resolution.
  3. Save PNG when the target can't handle SVG: certain email clients, social media uploads or legacy software. The PNG is fixed to the chosen pixel size — so for high-resolution displays, tick PNG at 2× pixel density.
  4. For a quick file-less embed, use Copy CSS background or the matching variant from Data URIs (one tile) instead.

Example 7: An Open Graph image at any size

You need a preview image for link previews on social networks — quickly, matching your site, and without a graphics program.

  1. Enter the name of the site or article as the Text, e.g. My Project. If you don't like the derived pattern, switch on Choose pattern & colour myself and adjust type and color to your brand.
  2. In the Export card, choose 1200 × 630 (Open Graph) under Size.
  3. Tick PNG at 2× pixel density if the image should also be sharp on high-resolution displays. The info line below confirms the output: PNG: 2400 × 1260 px · SVG: 1200 × 630.
  4. Click Save PNG. The file is called my-project-1200x630@2x.png and is completely filled with the pattern.
  5. For other formats, choose Custom… and enter Width and Height — 1080 × 1080 for a square social media post, say, or 3840 × 2160 for a 4K wallpaper, up to 8000 pixels per side.

You then add a title or logo in a graphics program or via HTML/CSS on top of the pattern; GeoPattern itself only supplies the background.

There's more depth on the other pages: the overview for the big picture, the manual for every option in detail, and the tips & tricks for pitfalls and combinations. You can try all of this directly in the tool.