GeoPattern

Aus einem Wort wird ein Muster

GeoPattern macht aus einem beliebigen Text — einem Namen, einer Domain, einer ID — ein geometrisches SVG-Hintergrundmuster im Stil der bekannten GitHub-Profilgrafiken. Du tippst einen Seed-String ein, und das Tool berechnet daraus ein flächenfüllendes, kachelbares Muster samt passender Farbe. Derselbe Text ergibt immer dasselbe Muster: Die Ausgabe ist deterministisch, nicht zufällig.

Das ist der eigentliche Kniff. Aus dem Seed wird per SHA-1-Hash sowohl die Geometrie (Form, Größe, Anordnung, Deckkraft) als auch — sofern du nichts vorgibst — der Muster-Typ und die Farbe abgeleitet. So bekommt jeder Nutzername, jedes Projekt, jede Kategorie automatisch ein eigenes, wiedererkennbares Muster, ohne dass du gestalten musst. Wer mehr Kontrolle will, schaltet den Custom-Modus ein und wählt Typ und Farbe selbst.

Gedacht ist das Tool für alle, die schnell dekorative, lizenzfreie Hintergründe brauchen: Entwicklerinnen und Entwickler, die Platzhalter-Avatare oder Profil-Banner generieren wollen; Designer, die ein Repertoire an Mustern für Karten, Header oder leere Zustände suchen; und alle, die einen CSS-background-image-Schnipsel brauchen, der ohne externe Datei auskommt. Kein Account, keine Installation, kostenlos.

Was das Tool kann

• Seed-gesteuerte Muster — ein Eingabe-String (Input String) erzeugt deterministisch ein Muster. Gleicher Text, gleiches Ergebnis.
• 16 Muster-Typen — von Squares über Hexagons, Triangles und Chevrons bis Sine Waves. Im Standard wählt der Hash den Typ; im Custom-Modus wählst du ihn.
• Eigene Farbe — über den Use custom pattern & color-Schalter aktivierst du einen Coloris-Farbwähler (Hex) und überschreibst die hash-abgeleitete Farbe.
• Export als SVG und PNG — Save SVG und Save PNG laden die Datei herunter, benannt nach deinem Seed (GitHub.svg, GitHub.png).
• Data-URI zum Kopieren — der ausklappbare Bereich Base64 Data URLs liefert die SVG- und PNG-Data-URL zum direkten Einbau in CSS oder HTML, jeweils mit Copy-Button.
• Live-Vorschau — das Muster erscheint sofort; ein Badge zeigt die tatsächlich verwendete Farbe.

Standard- und Custom-Modus

GeoPattern hat zwei Betriebsarten, die du über den Schalter Use custom pattern & color umschaltest:

• Standard (Schalter aus): Nur der Input String zählt. Muster-Typ und Farbe werden aus dem Hash des Strings abgeleitet. Ideal, wenn du je Seed automatisch eine eindeutige, wiedererkennbare Grafik willst (Avatare, Kategorie-Hintergründe).
• Custom (Schalter an): Die Felder Pattern Type (16 Typen) und Custom Color werden aktiv (vorher ausgegraut). Jetzt legst du Typ und Farbe selbst fest; die feine Geometrie kommt weiterhin aus dem Seed. Ideal, wenn das Muster zu einer Markenfarbe und einem gewünschten Look passen soll.

Reine Browser-Lösung — nichts verlässt dein Gerät

GeoPattern ist vollständig clientseitig: Es gibt keinen Server-Roundtrip, kein API und keinen Upload. Hashing, SVG-Erzeugung und sogar die PNG-Rasterung (über ein internes <canvas>) laufen im Browser. Dein Seed-Text und die erzeugten Grafiken bleiben auf deinem Gerät. Das Tool baut auf der quelloffenen Bibliothek GeoPattern von btmills auf.

Jetzt ausprobieren

→ GeoPattern öffnen — Text eintippen, Muster ansehen, als SVG oder PNG laden oder die Data-URI kopieren. Ohne Account, kostenlos, direkt im Browser.

Verwandte JPKCom-Tools

Für Hintergründe, Farben und Grafik-Aufgaben passen diese Tools dazu:

• Trianglify — low-poly Dreiecks-Hintergründe mit Farbverlauf, die ideale Alternative, wenn du statt geometrischer Kacheln eine weiche Verlaufsfläche willst.
• Colors — Farbwerte und Paletten erzeugen und konvertieren, um den passenden Hex-Wert für den Custom-Modus zu finden.
• Graphic — weiteres Grafik-Werkzeug aus dem JPKCom-Portfolio für Bild- und SVG-Aufgaben.

---

Tiefer geht es auf den Unterseiten: das Manual mit jeder Option und jedem Muster-Typ, Beispiele aus der Praxis und gesammelte Tipps & Tricks.

• Manual
• Beispiele
• Tipps & Tricks