# GeoPattern

> Aus einem Text-Seed deterministische SVG-Hintergrundmuster erzeugen und als SVG, PNG oder Data-URI exportieren — Einstieg zu Manual, Beispielen und Tipps.

Source: https://www.jpkc.com/db/tools/geopattern/

## Aus einem Wort wird ein Muster

[GeoPattern](https://www.jpkc.com/tools/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](https://github.com/btmills/geopattern)** auf.

## Jetzt ausprobieren

**[→ GeoPattern öffnen](https://www.jpkc.com/tools/geopattern/)** — 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](https://www.jpkc.com/db/tools/trianglify/)** — low-poly Dreiecks-Hintergründe mit Farbverlauf, die ideale Alternative, wenn du statt geometrischer Kacheln eine weiche Verlaufsfläche willst.
- **[Colors](https://www.jpkc.com/db/tools/colors/)** — Farbwerte und Paletten erzeugen und konvertieren, um den passenden Hex-Wert für den Custom-Modus zu finden.
- **[Graphic](https://www.jpkc.com/db/tools/graphic/)** — weiteres Grafik-Werkzeug aus dem JPKCom-Portfolio für Bild- und SVG-Aufgaben.

---

Tiefer geht es auf den Unterseiten: das **[Manual](https://www.jpkc.com/db/tools/geopattern/manual/)** mit jeder Option und jedem Muster-Typ, **[Beispiele](https://www.jpkc.com/db/tools/geopattern/examples/)** aus der Praxis und gesammelte **[Tipps & Tricks](https://www.jpkc.com/db/tools/geopattern/tips/)**.