GeoPattern — Manual

Zurück zur Übersicht: GeoPattern · Tool live öffnen: www.jpkc.com/tools/geopattern/

Dieses Manual beschreibt GeoPattern vollständig: was beim Erzeugen eines Musters passiert, wie der Seed zu Form und Farbe wird, welche 16 Muster-Typen es gibt und wie der Export funktioniert. Die Oberfläche ist auf Englisch — die Feld- und Button-Bezeichnungen stehen deshalb in ihrer englischen Original-Schreibweise (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Aufbau und Bedienung

Das Tool ist zweispaltig. Links liegt die Settings-Karte mit der Eingabe, rechts die große Preview mit der Live-Vorschau. Darunter eine Export-Karte (Save PNG, Save SVG) und ein ausklappbarer Bereich Base64 Data URLs.

Beim Laden erzeugt das Tool sofort ein erstes Muster aus dem voreingestellten Seed GitHub. Ab dann aktualisiert jede Eingabe die Vorschau: Der Button Generate Pattern rendert neu, ebenso die Enter-Taste im Eingabefeld. Ist der Custom-Modus aktiv, lösen auch das Wechseln des Muster-Typs und das Ändern der Farbe sofort eine Neuberechnung aus.

Der Seed: aus Text wird Muster

Herzstück ist das Feld Input String (Platzhalter „Enter text…", Vorgabe GitHub). Dein Text ist der Seed: Er wird per SHA-1 gehasht, und aus den Stellen dieses Hashes leitet die Bibliothek die gesamte Geometrie ab — Form, Größe, Anordnung und Deckkraft der Elemente. Das hat zwei wichtige Folgen:

Deterministisch: Derselbe Text ergibt mit denselben Optionen immer dasselbe Muster, pixelgenau. Es gibt keinen Zufall und keinen „Neu würfeln"-Knopf — willst du ein anderes Muster, ändere den Text (oder im Custom-Modus Typ/Farbe).
Eindeutig pro Eingabe: Schon eine geänderte Stelle (Groß-/Kleinschreibung, ein Leerzeichen, ein Zeichen mehr) erzeugt einen völlig anderen Hash und damit ein völlig anderes Muster.

Ein leeres Feld wird abgewiesen: Das Tool meldet dann per Hinweis „Please enter a string to generate a pattern." und erzeugt nichts.

Standard-Modus und Custom-Modus

Der Schalter Use custom pattern & color (ein Switch, standardmäßig aus) entscheidet, wie viel der Seed bestimmt und wie viel du selbst vorgibst.

Standard-Modus (Schalter aus)

Nur der Seed zählt. Aus dem Hash wird sowohl der Muster-Typ als auch die Farbe abgeleitet:

Typ: Eine Stelle des Hashes wählt deterministisch einen der 16 Typen aus.
Farbe: Eine Basisfarbe (intern ein gedämpftes Backstein-Rot) wird in den HSL-Raum überführt und anhand des Hashes in Farbton und Sättigung verschoben. So bekommt jeder Seed seine eigene, reproduzierbare Farbe.

Die Felder Pattern Type und Custom Color sind in diesem Modus deaktiviert (ausgegraut).

Custom-Modus (Schalter an)

Die beiden Felder werden aktiv, und du übernimmst die Kontrolle über Typ und Farbe. Die feine Geometrie (welche Elemente wo, mit welcher Größe und Deckkraft sitzen) kommt weiterhin aus dem Seed — du legst nur den Rahmen fest.

Pattern Type

Ein Dropdown mit 16 Muster-Typen. Voreinstellung ist Squares. Die vollständige Liste in der Reihenfolge des Menüs:

Squares — ein Raster aus Quadraten (Voreinstellung).
Chevrons — V-förmige Winkel-Reihen.
Concentric Circles — ineinanderliegende Kreisringe.
Diamonds — Rauten-Raster.
Hexagons — Sechseck-Wabenmuster.
Mosaic Squares — diagonal geteilte Quadrat-Mosaike.
Nested Squares — ineinander geschachtelte Quadrat-Rahmen.
Octogons — Achtecke (Schreibweise wie im Tool).
Overlapping Circles — sich überlappende Kreise.
Overlapping Rings — sich überlappende Ringe.
Plaid — karoartiges Streifenmuster.
Plus Signs — Pluszeichen-/Kreuz-Raster.
Sine Waves — wellenförmige Sinuslinien.
Tessellation — lückenlose geometrische Parkettierung.
Triangles — Dreiecks-Raster.
Xes — X-förmiges Kreuzmuster.

Custom Color

Das Feld Custom Color ist mit dem Coloris-Farbwähler verbunden (Hex-Format, ohne Alpha-Kanal). Du tippst einen Hex-Wert ein oder klickst ins Feld und wählst im Picker. Acht Swatches sind hinterlegt: #5A6C7E, #264653, #2a9d8f, #e9c46a, #f4a261, #e76f51, #d62828, #003049. Die gewählte Farbe überschreibt die sonst hash-abgeleitete Farbe. Welche Farbe tatsächlich verwendet wurde, zeigt das Badge oben rechts in der Preview an.

Export: SVG, PNG und Data-URI

GeoPattern erzeugt das Muster SVG-first — die native Ausgabe ist Vektor-SVG. Das PNG wird daraus clientseitig über ein internes <canvas> gerastert. Es gibt drei Wege, das Ergebnis mitzunehmen:

Save SVG / Save PNG

Die Export-Karte bietet zwei Download-Buttons:

Save SVG — lädt die Vektor-Datei herunter, benannt nach deinem Seed (z. B. GitHub.svg). Verlustfrei skalierbar, ideal als Hintergrund in beliebiger Größe.
Save PNG — lädt eine Rastergrafik herunter (GitHub.png). Praktisch dort, wo SVG nicht unterstützt wird.

Der Dateiname ist immer dein Eingabe-String mit der jeweiligen Endung.

Base64 Data URLs

Der ausklappbare Bereich Base64 Data URLs (standardmäßig eingeklappt) zeigt zwei Felder mit je einem Copy-Button:

PNG Data URL — die PNG-Variante als data:image/png;base64,….
SVG Data URL — die SVG-Variante als data:image/svg+xml;….

Diese Data-URIs baust du direkt in CSS (background-image: url("…")) oder in ein <img src="…"> ein — ganz ohne separate Bilddatei und ohne zusätzlichen HTTP-Request. Der Copy-Button legt den Wert in die Zwischenablage; ist noch nichts erzeugt, kommt ein Hinweis statt eines leeren Kopiervorgangs.

Live-Vorschau

Die Preview rechts zeigt das Muster sofort als kachelnde Fläche. Oben rechts sitzt ein Farb-Badge mit dem tatsächlich verwendeten Hex-Wert — im Standard-Modus also die hash-abgeleitete Farbe, im Custom-Modus deine gewählte. So siehst du auf einen Blick, welche Farbe in der exportierten Datei steckt.

Architektur und Grenzen — kompakt

Rein clientseitig: kein Server, kein API, kein Upload. Hashing, SVG-Erzeugung und PNG-Rasterung laufen im Browser.
Keine Persistenz: Der Stand wird nicht gespeichert; nach einem Reload startet das Tool wieder mit dem Seed GitHub.
Keine Größen-/Skalierungs-Option: Die UI steuert nur Seed, Typ und Farbe — keine Kachelgröße, keine Auflösung. Skaliere stattdessen das SVG per CSS.
Basis: die quelloffene Bibliothek GeoPattern von btmills (Port von jasonlong/geo_pattern).

Für den Einstieg und das große Bild siehe die Übersichtsseite. Konkrete Durchläufe stehen in den Beispielen, Strategie und Stolperfallen in den Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.