# GeoPattern — Manual > Funktionsbeschreibung von GeoPattern: Seed-Eingabe, Standard- und Custom-Modus, alle 16 Muster-Typen, Farbsteuerung und Export als SVG, PNG und Data-URI. Source: https://www.jpkc.com/db/tools/geopattern/manual/ Zurück zur Übersicht: [GeoPattern](https://www.jpkc.com/db/tools/geopattern/) · Tool live öffnen: [www.jpkc.com/tools/geopattern/](https://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 `` 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 `` 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](https://github.com/btmills/geopattern) (Port von jasonlong/geo_pattern). Für den Einstieg und das große Bild siehe die [Übersichtsseite](https://www.jpkc.com/db/tools/geopattern/). Konkrete Durchläufe stehen in den [Beispielen](https://www.jpkc.com/db/tools/geopattern/examples/), Strategie und Stolperfallen in den [Tipps & Tricks](https://www.jpkc.com/db/tools/geopattern/tips/). Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/geopattern/).