GeoPattern — Anwendungsbeispiele

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

Das Manual erklärt jede Option und jeden Muster-Typ im Detail. Diese Seite ergänzt das um konkrete Arbeitsabläufe: typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche ist auf Englisch — Feld- und Button-Namen stehen deshalb im Original, bei Bedarf mit deutscher Erläuterung.

Beispiel 1: Das erste Muster aus einem Seed

Der Einstieg — du willst sehen, wie aus Text ein Muster wird.

1. Öffne GeoPattern. Im Feld Input String steht bereits GitHub, und die Vorschau zeigt das daraus erzeugte Muster.
2. Ersetze den Text durch einen eigenen Seed, z. B. deinen Namen oder eine Domain, und drück Enter (oder klick Generate Pattern). Die Vorschau wechselt sofort.
3. Beobachte das Prinzip: Der Schalter Use custom pattern & color ist aus — also bestimmt allein dein Text sowohl den Muster-Typ als auch die Farbe. Das Badge oben rechts in der Preview nennt den verwendeten Hex-Wert.
4. Tipp denselben Text noch einmal: identisches Muster. Ändere ein einziges Zeichen: ein völlig anderes Muster. Genau das ist die deterministische Logik — kein Zufall.

So bekommst du in Sekunden eine reproduzierbare Grafik, ohne irgendetwas zu gestalten.

Beispiel 2: Gleicher Seed, andere Farbe — der Custom-Modus

Du magst die Form, brauchst aber eine Farbe, die zu deiner Marke passt.

1. Lass deinen Seed im Feld Input String stehen.
2. Aktiviere den Schalter Use custom pattern & color. Jetzt werden die Felder Pattern Type und Custom Color nutzbar.
3. Klick in Custom Color und wähl im Coloris-Picker einen Hex-Wert — etwa eine deiner Markenfarben oder einen der acht Swatches. Die Vorschau aktualisiert sich sofort.
4. Lies das Ergebnis: Die Grundanordnung bleibt — sie kommt weiter aus dem Seed —, aber die Farbe ist nun deine. Das Badge zeigt exakt den gewählten Wert, der auch im Export landet.

So entkoppelst du die Wiedererkennbarkeit (Seed) von der Farbgebung (Marke).

Beispiel 3: Einen bestimmten Muster-Typ erzwingen

Manchmal willst du gezielt Sechsecke oder Dreiecke, egal welchen Typ der Hash gewählt hätte.

1. Schalte Use custom pattern & color ein.
2. Öffne Pattern Type und wähl einen der 16 Typen, z. B. Hexagons oder Triangles. Die Vorschau springt sofort auf den gewählten Typ.
3. Probier die Typen durch — Sine Waves für ein welliges Linienbild, Plaid für einen Karo-Look, Concentric Circles für Kreisringe. Der Seed bestimmt weiterhin die konkrete Ausprägung innerhalb des Typs.
4. Kombinier das mit einer Custom Color aus Beispiel 2, bis Look und Farbe sitzen.

Beispiel 4: Als CSS-background-image einbauen

Das häufigste Ziel — du willst das Muster ohne separate Bilddatei in eine Seite bringen.

1. Erzeuge dein Muster (Seed, optional Typ/Farbe im Custom-Modus).

2. Klapp unten den Bereich Base64 Data URLs auf und klick bei SVG Data URL auf Copy. Du hast jetzt eine data:image/svg+xml;…-Zeichenkette in der Zwischenablage.

3. Bau sie in dein CSS ein:

   .hero {
   	background-image: url("data:image/svg+xml;…");
   	background-repeat: repeat;
   }

4. Weil SVG ein Vektor ist, kachelt das Muster sauber und bleibt bei jeder Bildschirmgröße scharf — und es entsteht kein zusätzlicher HTTP-Request, weil das Bild direkt im Stylesheet steckt.

Brauchst du stattdessen eine Rastergrafik (z. B. für eine E-Mail oder ein altes System), kopier die PNG Data URL oder nutz Save PNG.

Beispiel 5: Je Nutzer ein eigenes Muster (Avatare/Banner)

Der klassische GitHub-Anwendungsfall — jeder Account soll automatisch eine eigene Grafik bekommen.

1. Lass den Schalter Use custom pattern & color aus, damit Typ und Farbe rein aus dem Seed kommen.
2. Gib als Input String eine stabile Kennung pro Nutzer ein — Benutzername, E-Mail-Adresse oder eine ID.
3. Generate Pattern — und du hast eine eindeutige, wiedererkennbare Grafik für genau diese Kennung.
4. Wiederhol das für weitere Kennungen: Jede bekommt ihr eigenes Muster, und weil die Logik deterministisch ist, sieht dieselbe Kennung später wieder genau gleich aus.
5. Exportiere je Nutzer per Save SVG oder Save PNG; der Dateiname übernimmt automatisch den Seed (alice.svg, bob.svg).

Beispiel 6: SVG vs. PNG bewusst wählen

Beide Formate haben ihren Platz — so entscheidest du.

1. Erzeuge dein Muster.
2. Save SVG, wenn du verlustfreie Skalierbarkeit brauchst: als CSS-Hintergrund, für große Flächen oder wenn die Datei später noch in der Größe variiert. Die Datei ist klein und scharf bei jeder Auflösung.
3. Save PNG, wenn das Ziel kein SVG verarbeitet: bestimmte E-Mail-Clients, Social-Media-Uploads oder Legacy-Software. Bedenke: Das PNG ist auf die gerasterte Größe festgelegt und skaliert nicht verlustfrei.
4. Für eine schnelle Einbettung ohne Datei nimm stattdessen die passende Data URL aus dem Bereich Base64 Data URLs.

---

Noch tiefer: die Übersicht zum großen Bild, das Manual für jede Option im Detail und die Tipps & Tricks für Stolperfallen und Kombinationen. Ausprobieren kannst du alles direkt im Tool.