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.

Öffne GeoPattern. Im Feld Text steht bereits GitHub, und die Vorschau zeigt das daraus erzeugte Muster: Die Badges darüber nennen „Squares (from the text)", die Farbe #455e8a und „tile 160 × 160".
Ersetze den Text durch einen eigenen Seed, z. B. deinen Namen oder eine Domain. Die Vorschau wechselt schon beim Tippen, sobald du kurz innehältst — ein Klick auf einen Generate-Button ist nicht nötig.
Beobachte das Prinzip: Der Schalter Choose pattern & colour myself ist aus — also bestimmt allein dein Text sowohl den Muster-Typ als auch die Farbe. Die Badges zeigen dir, welche Werte der Text ergeben hat.
Tipp denselben Text noch einmal: identisches Muster. Ändere ein einziges Zeichen: ein völlig anderes Muster. Genau das ist die deterministische Logik.
Neugierig auf andere Varianten? Klick auf den Button Random text (Shuffle-Symbol) neben dem Feld. Er setzt einen zufälligen Text aus acht Zeichen ein — notier dir ihn, wenn dir das Muster gefällt, denn genau dieser Text erzeugt es jederzeit wieder.

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.

Lass deinen Seed im Feld Text stehen.
Aktiviere den Schalter Choose pattern & colour myself. Die Felder Pattern type und Colour werden bedienbar und stehen schon auf Typ und Farbe des Musters, das du gerade siehst — am Muster selbst ändert sich zunächst nichts, nur das Typ-Badge verliert den Zusatz „(from the text)".
Klick in Colour und wähl im Coloris-Picker eine Farbe — etwa einen der acht Swatches. Der Klick setzt den Cursor in das Eingabefeld des Pickers; dort kannst du auch eine deiner Markenfarben eintippen, gern in Kurzform wie #264, aber immer mit # — ohne # macht der Picker Schwarz (#000000) daraus. Mit Enter oder einem Klick daneben übernimmst du den Wert, die Vorschau aktualisiert sich sofort.
Lies das Ergebnis: Die Grundanordnung bleibt — sie kommt weiter aus dem Seed —, aber die Farbe ist nun deine. Das Farb-Badge zeigt exakt den verwendeten Wert, der auch im Export landet. Im Picker rechnet Coloris auch einen Farbnamen wie red stillschweigend um (#ff0000). Den Fehlerhinweis siehst du nur, wenn du ohne Klick direkt ins Feld tippst, etwa nach einem Sprung per Tab: Dann bringt red unter dem Feld „Enter a hex colour such as #5a6c7e or #abc.", und das Muster bleibt, wie es war.

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.

Schalte Choose pattern & colour myself ein. Schon dabei verliert das Typ-Badge den Zusatz „(from the text)".
Öffne Pattern type und wähl einen der 16 Typen, z. B. Hexagons oder Triangles. Die Vorschau springt sofort auf den gewählten Typ.
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; achte dabei auf das Badge mit der Kachelgröße, die sich je nach Typ deutlich ändert.
Kombinier das mit einer eigenen Colour 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.

Erzeuge dein Muster (Seed, optional Typ/Farbe im Custom-Modus).
Klick in der Karte Export auf Copy CSS background. In der Zwischenablage liegt jetzt eine komplette Deklaration mit der Kachel als URL-kodierter SVG — egal, welche Größe unter Size eingestellt ist.

Füg sie in dein CSS ein:

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

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. background-repeat: repeat ist ohnehin der Standard, schadet aber als ausdrückliche Angabe nicht.

Brauchst du nur die URI ohne CSS-Rahmen, klapp unten Data URIs (one tile) auf und kopier SVG, URL-encoded oder SVG, base64. Für eine Rastergrafik (z. B. für eine E-Mail oder ein altes System) nimm PNG, base64 oder Save PNG.

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

Lass den Schalter Choose pattern & colour myself aus, damit Typ und Farbe rein aus dem Seed kommen.
Gib als Text eine stabile Kennung pro Nutzer ein — Benutzername, E-Mail-Adresse oder eine ID. Umlaute, Akzente und andere Schriften sind kein Problem: Jede Kennung bekommt ihr eigenes Muster.
Die Vorschau zeigt sofort eine eindeutige, wiedererkennbare Grafik für genau diese Kennung.
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.
Exportiere je Nutzer per Save SVG oder Save PNG. Der Dateiname übernimmt automatisch die Kennung samt Größe, bei der Voreinstellung One tile (repeat with CSS) etwa alice-tile.svg und bob-tile.svg. Für ein Profilbanner stellst du vorher unter Size ein Format ein, z. B. 1500 × 500 (X header) — dann heißt die Datei alice-1500x500.png.

Beispiel 6: SVG vs. PNG bewusst wählen

Beide Formate haben ihren Platz — so entscheidest du.

Erzeuge dein Muster und wähl unter Size die Größe, die du brauchst.
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.
Save PNG, wenn das Ziel kein SVG verarbeitet: bestimmte E-Mail-Clients, Social-Media-Uploads oder Legacy-Software. Das PNG ist auf die gewählte Pixelgröße festgelegt — für hochauflösende Displays setzt du deshalb den Haken bei PNG at 2× pixel density.
Für eine schnelle Einbettung ohne Datei nimm stattdessen Copy CSS background oder die passende Variante aus Data URIs (one tile).

Beispiel 7: Ein Open-Graph-Bild in Wunschgröße

Du brauchst ein Vorschaubild für Link-Vorschauen in sozialen Netzwerken — schnell, passend zur Seite und ohne Grafikprogramm.

Gib als Text den Namen der Seite oder des Artikels ein, z. B. Mein Projekt. Gefällt dir das abgeleitete Muster nicht, schalte Choose pattern & colour myself ein und pass Typ und Farbe an deine Marke an.
Wähl in der Karte Export unter Size den Eintrag 1200 × 630 (Open Graph).
Setz den Haken bei PNG at 2× pixel density, wenn das Bild auch auf hochauflösenden Displays scharf sein soll. Die Info-Zeile darunter bestätigt die Ausgabe: PNG: 2400 × 1260 px · SVG: 1200 × 630.
Klick auf Save PNG. Die Datei heißt mein-projekt-1200x630@2x.png und ist mit dem Muster vollständig gefüllt.
Für andere Formate wählst du Custom… und trägst Width und Height ein, etwa 1080 × 1080 für einen quadratischen Social-Media-Post oder 3840 × 2160 für ein 4K-Wallpaper — jede Seite bis 8000 Pixel.

Titel oder Logo setzt du anschließend in einem Grafikprogramm oder per HTML/CSS auf das Muster; GeoPattern selbst liefert nur den Hintergrund.

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.