GeoPattern — Tipps & Tricks

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

Das Manual erklärt jede Option, die Beispiele zeigen die Arbeitsabläufe. Hier geht es um das, was beides voraussetzt: wie du den deterministischen Seed clever nutzt, worauf du bei Dateigröße und Format achtest und wie GeoPattern mit anderen JPKCom-Tools zusammenspielt.

Den deterministischen Seed verstehen und nutzen

• Der Seed ist eine Adresse, kein Würfel. Derselbe Text ergibt mit denselben Optionen immer dasselbe Muster. Das ist ein Feature, kein Zufallsgenerator: Nutz es, um pro Kennung (Benutzername, E-Mail, Projekt-ID) eine stabile, wiedererkennbare Grafik zu erzeugen, die du jederzeit identisch reproduzieren kannst, ohne sie zu speichern.
• Der Zufall steckt im Text, nicht im Muster. Willst du im Standard-Modus ein anderes Muster, ändere den Text. Schon ein angehängtes Zeichen oder ein Suffix wie -v2 erzeugt einen völlig neuen Hash und damit ein neues Muster — so „blätterst" du gezielt durch Varianten. Der Button Random text nimmt dir das Ausdenken ab: Er setzt einen zufälligen Text aus acht Zeichen ein. Gefällt dir das Ergebnis, notier dir den Text — er ist der einzige Schlüssel, um genau dieses Muster wiederzubekommen.
• Groß-/Kleinschreibung und Leerzeichen zählen. GitHub, github und GitHub (mit Leerzeichen) sind drei verschiedene Seeds mit drei verschiedenen Mustern. Wenn du Muster reproduzierbar je Nutzer brauchst, normalisiere die Kennung vorher (z. B. konsequent kleinschreiben), damit dieselbe Person nicht mal so, mal so aussieht.
• Umlaute und andere Schriften zählen vollständig. Der Hash läuft über die UTF-8-Bytes des Textes, deshalb ergeben etwa 中 und - verschiedene Muster — ältere Versionen des Tools werteten nur einen Teil jedes Zeichens aus und zeigten für beide dasselbe. Reine ASCII-Texte sehen aus wie in älteren Versionen des Tools; hast du dort ein Muster aus einem Text mit Umlauten, Akzenten oder Emoji erzeugt, sieht es heute anders aus. Brauchst du das alte Bild, nimm die damals exportierte Datei.
• Im Standard-Modus kommt auch die Farbe aus dem Seed. Brauchst du eine bestimmte Markenfarbe, kommst du am Custom-Modus nicht vorbei — der Hash trifft die Farbe sonst selbst. Praktisch: Beim Einschalten übernimmt der Custom-Modus Typ und Farbe des aktuellen Musters, du änderst also nur, was dich stört. Umgekehrt: Wenn dir bunte, automatisch variierende Farben recht sind (Avatare), lass den Custom-Modus aus.

Format und Dateigröße

• SVG ist die native, meist bessere Wahl. Das Muster wird als Vektor erzeugt; das PNG ist nur eine clientseitige Rasterung daraus. SVG-Dateien sind klein, kacheln sauber und bleiben bei jeder Größe scharf. Greif zu PNG nur, wenn das Ziel kein SVG verarbeitet (manche E-Mail-Clients, alte Systeme, bestimmte Upload-Felder).
• Als CSS-Hintergrund schlägt SVG immer. Ein gekacheltes SVG bleibt auf Retina-Displays scharf und wiegt fast nichts; ein PNG müsste für dieselbe Schärfe deutlich größer sein.
• Data-URI spart einen Request, kostet aber Bytes im Markup. Eine eingebettete data:-URL erspart eine separate Bilddatei und einen HTTP-Request — praktisch für ein einzelnes Hero-Element. Bei vielen Wiederholungen oder sehr großem Markup ist eine externe .svg-Datei (per Save SVG) wartbarer und besser cachebar. Faustregel: ein, zwei Hintergründe → Data-URI; viele oder geteilte → Datei.
• PNG ist auf seine Rastergröße festgelegt. Es skaliert nicht verlustfrei. Stell deshalb vor dem Export unter Size gleich die Zielgröße ein (oder Custom…) und setz für hochauflösende Displays den Haken bei PNG at 2× pixel density, statt ein kleines PNG nachträglich hochzuziehen — oder nimm gleich SVG.
• Bei 2× die 8000-Pixel-Grenze im Blick behalten. Jede Seite des PNG ist auf 8000 Pixel gekappt, und zwar einzeln. Überschreitet bei doppelter Dichte nur eine Seite die Grenze (etwa 6000 × 1000 → 8000 × 2000 statt 12000 × 2000), wird das Muster in dieser Richtung gestaucht. Die Info-Zeile unter den Buttons zeigt die tatsächliche Pixelgröße — passt das Seitenverhältnis dort nicht mehr, bleib bei 2× unter 4000 Pixel je Seite oder lass den Haken weg.
• URL-kodiert schlägt Base64. In Data URIs (one tile) steht neben jeder Variante ihre Länge. Die URL-kodierte SVG ist meist spürbar kürzer als die Base64-Fassung (beim Text GitHub rund 7,0 statt 8,7 KB) und bleibt im Stylesheet halbwegs lesbar; deshalb steckt sie auch in Copy CSS background. Die Base64-Variante brauchst du nur, wo ein Ziel ausdrücklich Base64 verlangt.

Einsatz als background-image

• Für CSS die Kachel, für feste Bilder die Wunschgröße. GeoPattern-Muster sind so gebaut, dass sie nahtlos kacheln. Als background-image reicht deshalb eine Kachel — genau die liefert Copy CSS background, und background-repeat: repeat (der Standard) füllt beliebig große Flächen. Eine Wunschgröße unter Size brauchst du nur für Dateien mit festem Format, etwa ein Open-Graph-Bild oder ein Wallpaper.
• Mehrere SVGs in Wunschgröße inline? IDs anpassen. Eine SVG in Wunschgröße wiederholt die Kachel über ein <pattern id="geopattern">. Bindest du sie per <img> oder als Hintergrund ein, spielt das keine Rolle. Kopierst du aber mehrere solcher Dateien direkt als <svg>-Markup in dieselbe HTML-Seite, teilen sie sich diese ID, und alle Flächen zeigen womöglich dasselbe Muster. Benenn die ID dann je Datei um (an beiden Stellen: id="…" und fill="url(#…)").
• Lesbarkeit zuerst. Als Hintergrund hinter Text kann ein kräftiges Muster stören. Wähl im Custom-Modus eine gedämpfte Farbe oder leg per CSS einen halbtransparenten Overlay (z. B. weiße/dunkle Fläche mit Deckkraft) über das Muster, damit der Text lesbar bleibt.
• Dark/Light bedenken. Eine Farbe, die auf Hell gut wirkt, kann auf Dunkel verschwinden. Erzeuge bei Bedarf zwei Varianten mit unterschiedlichen Custom-Farben und schalte sie per prefers-color-scheme um.

Stolperfallen

• Leeres Feld erzeugt nichts. Ohne Text (oder nur mit Leerzeichen) wird das Feld Text rot umrandet, und die Vorschau behält das letzte Muster — der Text ist Pflicht.
• Picker und Feld prüfen unterschiedlich. Klickst du in Colour, landet deine Eingabe im Eingabefeld des Coloris-Pickers: Der rechnet Farbnamen wie red und RGB-Werte stillschweigend in Hex um, macht aber aus einem Hex-Wert ohne # Schwarz (#000000) — dort also immer mit # tippen. Tippst du ohne Klick direkt ins Feld (per Tab), akzeptiert das Tool nur Hex-Werte (drei- oder sechsstellig, mit oder ohne #); alles andere führt zum Hinweis „Enter a hex colour such as #5a6c7e or #abc.", und das Muster ändert sich nicht, bis der Wert stimmt.
• Kein Vorschlag-/Galerie-Modus. Es gibt keine Zufalls-Galerie und keinen Mehrfach-Export: Du arbeitest immer an genau einem Seed. Varianten erzeugst du über veränderte Seeds (von Hand oder per Random text) bzw. Typ/Farbe.
• Data-URIs und CSS sind immer eine Kachel. Die Einstellung unter Size wirkt nur auf Save PNG und Save SVG. Brauchst du eine fertige Fläche als Datei, lad sie herunter; für CSS ist die Kachel ohnehin die richtige Wahl.
• Nichts wird gespeichert. GeoPattern hat keine Persistenz: Nach einem Reload steht wieder GitHub im Feld. Willst du ein Ergebnis behalten, exportiere es (SVG/PNG) oder kopier die Data-URI — notier dir den Seed, dann kannst du es jederzeit identisch neu erzeugen.

Mit anderen JPKCom-Tools kombinieren

• Die richtige Farbe finden — mit Colors. Der Custom-Modus erwartet einen Hex-Wert (auch in Kurzform wie #abc). Bestimm oder konvertier ihn im Colors-Tool (etwa aus einem Markenwert in RGB/HSL) und füg ihn dann mit # in Colour ein.
• Weiche Verläufe statt geometrischer Kacheln — mit Trianglify. Brauchst du einen low-poly Dreiecks-Hintergrund mit Farbverlauf statt eines kachelnden geometrischen Musters, ist Trianglify die passende Alternative. Beide liefern SVG-/Data-URI-Hintergründe — wähl nach Look.
• PNG nachbearbeiten — mit Graphic. Den exportierten Hintergrund zuschneiden, skalieren oder als WebP, AVIF oder JPEG speichern, wenn das Ziel ein kompakteres Format verlangt.

Noch mehr Kontext: die Übersicht zum großen Bild, das Manual für jede Option und die Beispiele für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im Tool.