# 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. Source: https://www.jpkc.com/db/en/tools/geopattern/manual/ Back to the overview: [GeoPattern](https://www.jpkc.com/db/en/tools/geopattern/) · Open the tool: [www.jpkc.com/tools/geopattern/](https://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 ``. 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 `` — 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](https://github.com/btmills/geopattern) (a port of jasonlong/geo_pattern). For the starting point and the big picture, see the [overview page](https://www.jpkc.com/db/en/tools/geopattern/). Concrete walkthroughs are in the [examples](https://www.jpkc.com/db/en/tools/geopattern/examples/), strategy and pitfalls in the [tips & tricks](https://www.jpkc.com/db/en/tools/geopattern/tips/). You can try all of this directly in the [tool](https://www.jpkc.com/tools/geopattern/).