# GeoPattern — Tipps & Tricks > Kniffe für GeoPattern: den deterministischen Seed nutzen, Dateigröße und SVG vs. PNG, Einsatz als CSS-background-image und die Kombination mit Colors und Trianglify. Source: https://www.jpkc.com/db/tools/geopattern/tips/ 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/) Das [Manual](https://www.jpkc.com/db/tools/geopattern/manual/) erklärt jede Option, die [Beispiele](https://www.jpkc.com/db/tools/geopattern/examples/) 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. - **Es gibt keinen „Neu würfeln"-Knopf.** 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, statt auf Zufall zu hoffen. - **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. - **Im Standard-Modus kommt auch die Farbe aus dem Seed.** Wer eine bestimmte Markenfarbe braucht, kommt am Custom-Modus nicht vorbei — der Hash trifft die Farbe sonst selbst. 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. Brauchst du das Muster später größer, erzeuge lieber neu als ein kleines PNG hochzuziehen — oder nimm gleich SVG. ## Einsatz als `background-image` - **`background-repeat: repeat` macht die Kachel zur Fläche.** GeoPattern-Muster sind so gebaut, dass sie nahtlos kacheln. Setz die Data-URI oder die `.svg`-Datei als `background-image` und lass sie wiederholen, um beliebig große Flächen zu füllen. - **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 meldet das Tool „Please enter a string to generate a pattern." — der `Input String` ist Pflicht. - **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 bzw. Typ/Farbe. - **Keine Größen- oder Skalierungs-Option in der UI.** Die Oberfläche steuert nur Seed, Typ und Farbe. Die Darstellungsgröße bestimmst du nachgelagert per CSS — beim SVG ohne Qualitätsverlust. - **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](https://www.jpkc.com/db/tools/colors/).** Der Custom-Modus erwartet einen Hex-Wert. Bestimm oder konvertier ihn im Colors-Tool (etwa aus einem Markenwert in RGB/HSL) und füg ihn dann in **Custom Color** ein. - **Weiche Verläufe statt geometrischer Kacheln — mit [Trianglify](https://www.jpkc.com/db/tools/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. - **Weitere Grafik-Aufgaben — mit [Graphic](https://www.jpkc.com/db/tools/graphic/).** Für nachgelagerte Bild- und SVG-Bearbeitung rund um deinen exportierten Hintergrund. --- Noch mehr Kontext: die [Übersicht](https://www.jpkc.com/db/tools/geopattern/) zum großen Bild, das [Manual](https://www.jpkc.com/db/tools/geopattern/manual/) für jede Option und die [Beispiele](https://www.jpkc.com/db/tools/geopattern/examples/) für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/geopattern/).