JPKCom DB

GeoPattern

Aus einem Text deterministische geometrische Muster erzeugen, als SVG oder PNG in Wunschgröße exportieren und als CSS-Hintergrund oder Data-URI kopieren.

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 Text ein, und das Tool berechnet daraus — live, während du schreibst — ein 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 SHA-1-Hash des Textes (berechnet über seine UTF-8-Bytes, also auch für Umlaute, chinesische Schriftzeichen oder Emoji eindeutig) wird 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 — ausgehend vom Muster, das der Text gerade ergibt.

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 Text im Feld Text erzeugt deterministisch ein Muster. Gleicher Text, gleiches Ergebnis. Die Vorschau folgt live beim Tippen; der Button Random text (Shuffle-Symbol mit gekreuzten Pfeilen) liefert auf Knopfdruck einen Zufallstext.
  • 16 Muster-Typen — von Chevrons über Hexagons, Plaid und Triangles bis Xes. Im Standard wählt der Hash den Typ; im Custom-Modus wählst du ihn.
  • Eigene Farbe — über den Schalter Choose pattern & colour myself aktivierst du einen Coloris-Farbwähler (Hex, auch Kurzform wie #abc) und überschreibst die hash-abgeleitete Farbe.
  • Export in Wunschgröße — Save SVG und Save PNG liefern entweder eine einzelne Kachel oder eine fertige Fläche: Full HD, QHD, Open-Graph-Bild, X-Header oder eine freie Größe bis 8000 × 8000 Pixel, das PNG auf Wunsch in doppelter Pixeldichte. Die Dateinamen leiten sich aus deinem Text ab (github-tile.svg, github-1920x1080.png).
  • CSS und Data-URIs — Copy CSS background legt eine fertige background-image-Zeile in die Zwischenablage. Der ausklappbare Bereich Data URIs (one tile) bietet die Kachel als URL-kodierte SVG, als SVG in Base64 und als PNG in Base64, jeweils mit Größenangabe und Copy-Button.
  • Live-Vorschau — das Muster erscheint sofort; drei Badges nennen den verwendeten Muster-Typ, die Farbe und die Kachelgröße.

Standard- und Custom-Modus

GeoPattern hat zwei Betriebsarten, die du über den Schalter Choose pattern & colour myself umschaltest:

  • Standard (Schalter aus): Nur der Text zählt. Muster-Typ und Farbe werden aus seinem Hash abgeleitet; das Typ-Badge der Vorschau trägt dann den Zusatz „(from the text)". Ideal, wenn du je Text automatisch eine eindeutige, wiedererkennbare Grafik willst (Avatare, Kategorie-Hintergründe).
  • Custom (Schalter an): Die Felder Pattern type (16 Typen) und Colour werden bedienbar. Sie stehen zunächst auf Typ und Farbe des aktuellen Musters, sodass du von dort aus weiterdrehst. Jetzt legst du Typ und Farbe selbst fest; die feine Geometrie kommt weiterhin aus dem Text. 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 (über die Web-Crypto-Schnittstelle des Browsers), 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 (öffnet in neuem Tab) auf, einer JavaScript-Portierung von Jason Longs Ruby-Bibliothek geo_pattern (öffnet in neuem Tab).

Jetzt ausprobieren

→ GeoPattern öffnen — Text eintippen, Muster ansehen, als SVG oder PNG in der passenden Größe laden oder CSS und 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 — Bild-Editor und Konverter: das exportierte PNG zuschneiden, skalieren oder in WebP, AVIF oder JPEG umwandeln.

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