GeoPattern — Manual

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

Dieses Manual beschreibt GeoPattern vollständig: was beim Erzeugen eines Musters passiert, wie der Text zu Form und Farbe wird, welche 16 Muster-Typen es gibt und wie der Export in Kachel- oder Wunschgröße funktioniert. Die Oberfläche ist auf Englisch — die Feld- und Button-Bezeichnungen stehen deshalb in ihrer englischen Original-Schreibweise (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest.

Aufbau und Bedienung

Auf dem Desktop ist das Tool zweispaltig. Links liegen untereinander die Karte Settings (Text, Schalter, Typ und Farbe) und die Karte Export (Größe, Pixeldichte, Download- und Kopier-Buttons), rechts die große Preview mit der Live-Vorschau. Unter beiden Spalten folgt über die volle Breite der ausklappbare Bereich Data URIs (one tile). Auf dem Smartphone steht die Vorschau ganz oben, damit du das Ergebnis sofort siehst; die Einstellungen folgen darunter.

Beim Laden erzeugt das Tool sofort ein erstes Muster aus dem voreingestellten Text GitHub. Ab dann aktualisiert sich die Vorschau live: Jede Änderung im Textfeld löst nach einer kurzen Pause von 200 Millisekunden eine Neuberechnung aus, die Enter-Taste erzeugt sofort. Einen eigenen Generate-Button gibt es nicht. Der Schalter für den Custom-Modus und das Menü Pattern type wirken ebenfalls sofort, Änderungen der Farbe nach derselben kurzen Pause.

Der Seed: aus Text wird Muster

Herzstück ist das Feld Text (Platzhalter „Enter text…", Vorgabe GitHub), darunter der Hinweis „The same text always gives the same pattern." Dein Text ist der Seed: Das Tool bildet seinen SHA-1-Hash über die UTF-8-Bytes des Textes (per Web-Crypto-Schnittstelle des Browsers) und übergibt ihn an die Bibliothek. Aus den Stellen dieses Hashes leitet die Bibliothek die gesamte Geometrie ab — Form, Größe, Anordnung und Deckkraft der Elemente. Das hat drei wichtige Folgen:

Deterministisch: Derselbe Text ergibt mit denselben Optionen immer dasselbe Muster, pixelgenau.
Eindeutig pro Eingabe: Schon eine geänderte Stelle (Groß-/Kleinschreibung, ein Leerzeichen, ein Zeichen mehr) erzeugt einen völlig anderen Hash und damit ein völlig anderes Muster.
Jedes Zeichen zählt vollständig: Weil der Hash über die UTF-8-Bytes läuft, bekommen auch Texte mit Umlauten, chinesischen Schriftzeichen oder Emoji ein eigenes Muster. Reine ASCII-Texte ergeben dasselbe Muster wie früher; Texte mit anderen Zeichen sehen anders aus als in älteren Versionen des Tools, die nur einen Teil jedes Zeichens berücksichtigt haben.

Rechts neben dem Feld sitzt der Button Random text (Shuffle-Symbol mit gekreuzten Pfeilen). Er setzt einen zufälligen Text aus acht Zeichen ein — Kleinbuchstaben und Ziffern ohne die leicht verwechselbaren i, l, o, 0 und 1 — und erzeugt sofort das passende Muster. Der Zufall steckt nur im Text: Tippst du denselben Text später erneut ein, bekommst du wieder exakt dieses Muster.

Ein leeres Feld (oder eines nur mit Leerzeichen) wird abgewiesen: Das Feld wird rot umrandet, und die Vorschau behält das zuletzt erzeugte Muster.

Standard-Modus und Custom-Modus

Der Schalter Choose pattern & colour myself (Untertitel „starts from the current pattern", standardmäßig aus) entscheidet, wie viel der Text bestimmt und wie viel du selbst vorgibst. Jedes Umschalten erzeugt das Muster sofort neu.

Standard-Modus (Schalter aus)

Nur der Text zählt. Aus dem Hash wird sowohl der Muster-Typ als auch die Farbe abgeleitet:

Typ: Eine Stelle des Hashes wählt deterministisch einen der 16 Typen aus. Das Typ-Badge der Vorschau zeigt ihn mit dem Zusatz „(from the text)", beim voreingestellten Text GitHub etwa „Squares (from the text)".
Farbe: Eine Basisfarbe (#933c3c, ein gedämpftes Backstein-Rot) wird in den HSL-Raum überführt und anhand des Hashes in Farbton und Sättigung verschoben. So bekommt jeder Text seine eigene, reproduzierbare Farbe.

Die Felder Pattern type und Colour sind in diesem Modus gesperrt (ausgegraut), zeigen aber stets Typ und Farbe des aktuell abgeleiteten Musters.

Custom-Modus (Schalter an)

Die beiden Felder werden bedienbar, und du übernimmst die Kontrolle über Typ und Farbe. Sie starten mit den Werten des Musters, das gerade zu sehen ist — du drehst also von dort aus weiter, statt bei einer festen Voreinstellung zu beginnen. Die feine Geometrie (welche Elemente wo, mit welcher Größe und Deckkraft sitzen) kommt weiterhin aus dem Text — du legst nur den Rahmen fest. Schaltest du wieder aus, kehrt das Tool zum rein abgeleiteten Muster zurück.

Pattern type

Ein Dropdown mit 16 Muster-Typen, alphabetisch sortiert. Die vollständige Liste in der Reihenfolge des Menüs:

Chevrons — V-förmige Winkel-Reihen.
Concentric circles — ineinanderliegende Kreisringe.
Diamonds — Rauten-Raster.
Hexagons — Sechseck-Wabenmuster.
Mosaic squares — diagonal geteilte Quadrat-Mosaike.
Nested squares — ineinander geschachtelte Quadrat-Rahmen.
Octagons — Achtecke.
Overlapping circles — sich überlappende Kreise.
Overlapping rings — sich überlappende Ringe.
Plaid — karoartiges Streifenmuster.
Plus signs — Pluszeichen-/Kreuz-Raster.
Sine waves — wellenförmige Sinuslinien.
Squares — ein Raster aus Quadraten.
Tessellation — lückenlose geometrische Parkettierung.
Triangles — Dreiecks-Raster.
Xes — X-förmiges Kreuzmuster.

Colour

Das Feld Colour ist mit dem Coloris-Farbwähler verbunden (Hex-Format, ohne Alpha-Kanal). Ein Klick ins Feld öffnet den Picker und setzt den Cursor in dessen eigenes Eingabefeld; dort wählst du über die Farbfläche, einen Swatch oder per Eingabe. Acht Swatches sind hinterlegt: #5a6c7e, #264653, #2a9d8f, #e9c46a, #f4a261, #e76f51, #d62828, #003049.

Wie ein eingetippter Wert behandelt wird, hängt davon ab, wo du tippst:

Im Picker (nach einem Klick ins Feld) liest Coloris den Wert wie eine CSS-Farbe und schreibt ihn beim Übernehmen — Enter oder Klick daneben — als sechsstelligen Hex-Wert ins Feld zurück. Farbnamen und rgb()/hsl()-Werte rechnet es dabei stillschweigend um (red wird zu #ff0000), #abc wird zu #aabbcc. Einen Hex-Wert tippst du hier immer mit #: Ohne (5A6C7E) erkennt Coloris ihn nicht und setzt Schwarz (#000000).
Direkt im Feld (Fokus per Tab, ohne Klick, also ohne Picker) prüft das Tool selbst. Es akzeptiert sechs- und dreistellige Hex-Werte, mit oder ohne # und in beliebiger Groß-/Kleinschreibung: 5A6C7E, #5a6c7e und #abc (gleichbedeutend mit #aabbcc) funktionieren alle. Alles andere — etwa ein Farbname wie red — beantwortet es mit dem Hinweis „Enter a hex colour such as #5a6c7e or #abc." unter dem Feld; das Muster bleibt dann unverändert, bis der Wert gültig ist.

Die gewählte Farbe ersetzt die sonst hash-abgeleitete Farbe und wird zur Hintergrundfläche der Kachel. Die Formen darüber zeichnet die Bibliothek in jedem Modus als halbtransparente helle (#ddd) und dunkle (#222) Flächen oder Linien mit 2 bis 15 Prozent Deckkraft, bei vielen Typen dazu feine schwarze Konturen mit 2 Prozent — deshalb wirkt jedes Muster wie eine Abwandlung seiner Grundfarbe.

Export: SVG, PNG und Data-URI

GeoPattern erzeugt das Muster SVG-first — die native Ausgabe ist eine Vektor-Kachel. Das PNG wird daraus clientseitig über ein internes <canvas> gerastert. Die Karte Export steuert, in welcher Größe und welchem Format du das Ergebnis mitnimmst.

Size und Pixeldichte

Das Menü Size legt die Ausgabegröße für beide Download-Buttons fest:

Option	Ergebnis
`One tile (repeat with CSS)`	eine einzelne Kachel in ihrer natürlichen Größe (Voreinstellung)
`1920 × 1080 (Full HD)`	Fläche 1920 × 1080 px
`2560 × 1440 (QHD)`	Fläche 2560 × 1440 px
`1200 × 630 (Open Graph)`	Fläche 1200 × 630 px, das übliche Vorschaubild-Format sozialer Netzwerke
`1500 × 500 (X header)`	Fläche 1500 × 500 px für einen X-Profilheader
`Custom…`	blendet die Felder Width und Height ein

Die Größe einer Kachel hängt vom Text und vom Muster-Typ ab; sie steht im Badge der Vorschau (für GitHub „tile 160 × 160", für alice „tile 280 × 184"). Bei einer festen Fläche wiederholt das Tool die Kachel so oft, bis die Fläche gefüllt ist — am rechten und unteren Rand wird sie einfach abgeschnitten.

Die Felder Width und Height (Vorgabe 1600 × 900) nehmen ganze Zahlen von 1 bis 8000 Pixel an. Werte außerhalb dieses Bereichs werden beim Verlassen des Feldes auf die Grenze gesetzt, unlesbare Eingaben auf die Vorgabe.

Die Option PNG at 2× pixel density verdoppelt die Pixelzahl des PNG für hochauflösende Displays — aus 1920 × 1080 wird eine 3840 × 2160 Pixel große Datei. Das SVG ist davon nicht betroffen. Jede Seite des PNG ist auf 8000 Pixel begrenzt. Unter den Buttons zeigt eine Info-Zeile die tatsächliche Ausgabe, etwa PNG: 3840 × 2160 px · SVG: 1920 × 1080.

Save SVG / Save PNG

Die Export-Karte bietet zwei Download-Buttons:

Save SVG — lädt die Vektor-Datei herunter. Als Kachel ist es die SVG der Bibliothek; in Wunschgröße eine SVG mit genau dieser Breite und Höhe, die die Kachel über ein <pattern>-Element wiederholt. Verlustfrei skalierbar.
Save PNG — lädt eine Rastergrafik in der gewählten Größe herunter, auf Wunsch in doppelter Pixeldichte. Praktisch dort, wo SVG nicht unterstützt wird.

Der Dateiname leitet sich aus deinem Text ab: Kleinbuchstaben, Umlaute und Akzente in Grundbuchstaben umgeschrieben (aus ß wird ss, aus ä ein a), alle anderen Zeichen zu Bindestrichen zusammengefasst, höchstens 60 Zeichen. Bleibt nichts übrig — etwa bei einem Text nur aus chinesischen Schriftzeichen —, heißt die Datei geopattern. Dahinter folgt die Größe: -tile für eine Kachel, sonst Breite und Höhe, beim PNG in doppelter Dichte zusätzlich @2x. Aus dem Text GitHub werden so etwa github-tile.svg, github-1920x1080.png oder github-1200x630@2x.png.

Copy CSS background

Der Button Copy CSS background legt eine fertige CSS-Deklaration in die Zwischenablage:

background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E…");

Sie enthält immer eine Kachel als URL-kodierte SVG — unabhängig davon, was unter Size eingestellt ist. Den Rest erledigt der Browser: Ein background-image wiederholt sich standardmäßig und füllt so jede Fläche.

Data URIs (one tile)

Der ausklappbare Bereich Data URIs (one tile) (standardmäßig eingeklappt, die Kopfzeile lässt sich auch per Enter- oder Leertaste öffnen) zeigt die aktuelle Kachel in drei Varianten, jeweils mit Größenangabe in Byte bzw. Kilobyte und einem Copy-Button:

SVG, URL-encoded — data:image/svg+xml,… in kompakter Form: Doppelte Anführungszeichen werden zu einfachen, und nur die Zeichen, die in einer URL kodiert werden müssen, erhalten eine Prozent-Kodierung. Meist deutlich kürzer als Base64 (für GitHub rund 7,0 statt 8,7 KB); diese Variante steckt auch in Copy CSS background.
SVG, base64 — data:image/svg+xml;base64,…, für Umgebungen, die eine Base64-Kodierung erwarten.
PNG, base64 — data:image/png;base64,…, die Kachel als Rastergrafik in einfacher Pixeldichte.

Diese Data-URIs baust du direkt in CSS (background-image: url("…")) oder in ein <img src="…"> ein — ganz ohne separate Bilddatei und ohne zusätzlichen HTTP-Request.

Live-Vorschau

Die Preview zeigt das Muster sofort als kachelnde Fläche. In ihrer Kopfzeile stehen drei Badges:

der Muster-Typ — im Standard-Modus mit dem Zusatz „(from the text)",
die Farbe als kleines Farbfeld mit dem tatsächlich verwendeten Hex-Wert — im Standard-Modus die hash-abgeleitete Farbe, im Custom-Modus deine gewählte,
die Kachelgröße, etwa „tile 160 × 160".

So siehst du auf einen Blick, was in der exportierten Datei steckt. Kann ein Muster oder PNG nicht erzeugt werden, meldet das Tool das mit einer Hinweisbox („The pattern could not be generated." bzw. „The PNG could not be rendered.").

Architektur und Grenzen — kompakt

Rein clientseitig: kein Server, kein API, kein Upload. Hashing, SVG-Erzeugung und PNG-Rasterung laufen im Browser.
Keine Persistenz: Der Stand wird nicht gespeichert; nach einem Reload startet das Tool wieder mit dem Text GitHub und eingeklappten Data-URIs.
Größen: Export als Kachel, in vier festen Formaten oder frei von 1 bis 8000 Pixel je Seite; das PNG ist auch in doppelter Pixeldichte auf 8000 Pixel je Seite begrenzt. Data-URIs und Copy CSS background liefern immer eine Kachel.
Basis: die quelloffene Bibliothek GeoPattern von btmills (öffnet in neuem Tab) (Port von jasonlong/geo_pattern (öffnet in neuem Tab)), ergänzt um ein eigenes Modul für den UTF-8-Hash, die Größenumrechnung, die Data-URIs und die Dateinamen; der Farbwähler ist Coloris.

Für den Einstieg und das große Bild siehe die Übersichtsseite. Konkrete Durchläufe stehen in den Beispielen, Strategie und Stolperfallen in den Tipps & Tricks. Ausprobieren kannst du alles direkt im Tool.