# Trianglify UI — Manual > Vollständige Funktionsbeschreibung von Trianglify UI: jede Einstellung mit Wirkung und Wertebereich, die Export-Formate, Data-URLs und die clientseitige Architektur. Source: https://www.jpkc.com/db/tools/trianglify/manual/ Zurück zur Übersicht: [Trianglify UI](https://www.jpkc.com/db/tools/trianglify/) · Tool live öffnen: [www.jpkc.com/tools/trianglify/](https://www.jpkc.com/tools/trianglify/) Dieses Manual beschreibt **Trianglify UI** vollständig: jede Einstellung mit ihrer Wirkung und ihrem Wertebereich, die Export-Wege und die Architektur dahinter. Die Oberfläche des Tools ist auf Englisch — die Bedien-Elemente werden hier deshalb in ihrer englischen Original-Schreibweise genannt (mit deutscher Erläuterung), damit du dich im echten Interface zurechtfindest. ## Oberfläche und Ablauf Das Tool ist zweispaltig aufgebaut: Links liegt die **Settings**-Karte mit allen Reglern, rechts die **Preview** mit dem aktuell gerenderten Muster. Darunter folgen die Karte **Export** und ein aufklappbarer Bereich **Base64 Data URLs**. Jede Änderung an einem Regler rendert die Vorschau sofort neu — beim Verschieben von Cell Size und Variance aktualisiert sich erst die Zahl, beim Loslassen das Bild. Mit **Generate Pattern** erzwingst du jederzeit einen neuen Durchlauf (ohne Seed entsteht dabei ein neues Zufallsmuster). Erzeugt wird das Muster über die Bibliothek **Trianglify.js v4**, die vollständig im Browser läuft. ## Einstellungen (Settings) ### Seed (optional) Ein Text-Feld (`Random seed...`) für den Startwert des Zufallsgenerators. Ein Seed macht ein Muster **reproduzierbar**: Gleicher Seed plus identische Einstellungen (Palette, Cell Size, Variance) ergeben **exakt dasselbe Muster** — auf jedem Gerät, zu jeder Zeit. - Das Shuffle-Symbol daneben (**Generate random seed**) erzeugt einen zufälligen **8-stelligen alphanumerischen** Seed (`A–Z`, `a–z`, `0–9`) und rendert sofort neu. - Tippst du selbst einen Wert ein, übernimmt ihn das Tool beim Verlassen des Felds oder mit der Enter-Taste. - Ist das Feld **leer**, erzeugt jeder Durchlauf ein neues Zufallsmuster. Ein gesetzter Seed wird in der Vorschau als Badge „Seed: …" angezeigt. ### Color Palette — Farb-Palette Ein Auswahl-Menü mit **27 benannten Paletten** plus dem Modus **Random** (Voreinstellung). Es handelt sich um die bekannten **ColorBrewer-Paletten**, gruppiert in zwei Gruppen: - **Sequential** (18, ein Farbverlauf von hell nach dunkel): *YlGn* (Yellow-Green), *YlGnBu*, *GnBu*, *BuGn*, *PuBuGn*, *PuBu*, *BuPu*, *RdPu*, *PuRd*, *OrRd*, *YlOrRd*, *YlOrBr*, *Purples*, *Blues*, *Greens*, *Oranges*, *Reds*, *Greys*. - **Diverging** (9, zwei Farben mit hellem Mittelpunkt): *PuOr* (Purple-Orange), *BrBG*, *PRGn*, *PiYG*, *RdBu*, *RdGy*, *RdYlBu*, *Spectral*, *RdYlGn*. **Random** würfelt bei jedem Durchlauf eine Palette aus. Die gewählte Palette erscheint in der Vorschau als Badge. Der gewählte Farbverlauf wird auf beiden Achsen des Musters angewendet (die Y-Achse spiegelt intern die X-Achse, `yColors: match`) — es gibt also genau einen Verlauf pro Muster, keine getrennte X-/Y-Auswahl. ### Use custom color gradient — eigener Farbverlauf Ein Schalter, der das Palette-Menü gegen einen **eigenen Zwei-Farben-Verlauf** tauscht. Ist er aktiv, wird das Palette-Menü deaktiviert (beides gleichzeitig geht nicht), und zwei Farbfelder erscheinen: - **Start Color** — Voreinstellung `#264653`. - **End Color** — Voreinstellung `#e76f51`. Beide öffnen einen Farb-Wähler (**Coloris**) im Hex-Format (ohne Alpha-Kanal) mit acht Vorlage-Farbtupfern. Das Muster wird als Verlauf zwischen Start- und End-Farbe gerendert — genau das Mittel, um Hintergründe in deinen **Marken-Farben** zu erzeugen. Eine Änderung an einer der beiden Farben rendert sofort neu. ### Cell Size — Zell-Größe Ein Schieberegler für die Dreiecks-Größe in Pixeln: - Wertebereich **20 bis 200 px**, Schrittweite **5**, Voreinstellung **75**. - **Kleine Werte** ergeben viele feine Dreiecke (mehr Detail, größere Datei), **große Werte** wenige, großflächige Dreiecke (gröber, kleinere Datei). Da die Zell-Größe ein absoluter Pixel-Wert ist, enthält ein großflächiger Export bei gleicher Cell Size mehr Dreiecke als die kleinere Vorschau. ### Variance — Varianz Ein Schieberegler für die Unregelmäßigkeit der Dreiecks-Anordnung: - Wertebereich **0 bis 1,5**, Schrittweite **0,05**, Voreinstellung **0,75**. - Bei **0** liegt ein nahezu **regelmäßiges Gitter** vor; je höher der Wert, desto stärker werden die Gitterpunkte verschoben und desto **unregelmäßiger und zerklüfteter** wirkt das Muster. ### Generate Pattern Die Schaltfläche unten in der Settings-Karte erzeugt das Muster mit den aktuellen Werten neu. Bei gesetztem Seed ist das Ergebnis identisch zum vorherigen; ohne Seed entsteht eine neue Zufalls-Variante. ## Vorschau (Preview) Die Vorschau rendert das Muster als **Inline-SVG** in den Vorschau-Bereich (Standardgröße rund 800 × 600 px, passt sich der Spaltenbreite an). Zwei Badges oben rechts zeigen die aktive **Palette** (bzw. „Custom"/„Random") und — falls gesetzt — den **Seed**. Die Vorschau dient nur der Ansicht; die tatsächliche Ausgabegröße bestimmst du im Export. ## Export ### Export Resolution — Export-Auflösung Ein Auswahl-Menü für die Ausgabegröße der Downloads: - **HD** (1280 × 720) - **Full HD** (1920 × 1080) — Voreinstellung - **QHD** (2560 × 1440) - **4K** (3840 × 2160) - **Custom…** — schaltet zwei Felder für **Width** und **Height** frei (Wertebereich **100 bis 8192 px**, Voreinstellung 1920 × 1080). Wichtig: Der Export rendert das Muster **frisch in der gewählten Auflösung**, nicht als hochskalierte Vorschau. Bei gleicher Cell Size deckt eine größere Fläche mehr Dreiecke ab. Nur mit gesetztem **Seed** ist die Ausgabe deterministisch — ohne Seed kann sich das exportierte Muster von der gerade gezeigten Vorschau unterscheiden. ### Download PNG Erzeugt das Muster in der Export-Auflösung, rendert es auf ein Canvas und lädt es als **PNG**-Bitmap herunter. ### Download SVG Erzeugt das Muster in der Export-Auflösung und lädt es als **SVG**-Vektorgrafik herunter. Für Web-Hintergründe meist die bessere Wahl: skalierbar und bei diesen Mustern oft kompakter als ein PNG. ### Dateinamen Die heruntergeladene Datei heißt `trianglify[-]-x.` — also etwa `trianglify-Ab12Cd34-1920x1080.png` mit Seed oder `trianglify-1920x1080.svg` ohne. Der Seed steht damit gleich im Dateinamen und lässt sich später zur Reproduktion zurück ins Tool tippen. ## Base64 Data URLs Ein aufklappbarer Bereich liefert zwei **Base64-Data-URLs** des aktuellen Vorschau-Musters zum Kopieren: - **PNG Data URL** — `data:image/png;base64,…` aus dem Vorschau-Canvas. - **SVG Data URL** — `data:image/svg+xml;base64,…` aus dem Vorschau-SVG. Beide beziehen sich auf die **Vorschau-Auflösung** (nicht auf die Export-Größe) und eignen sich, um das Muster ohne separate Bilddatei direkt im CSS einzubetten: ```css .hero { background-image: url("data:image/svg+xml;base64,…"); background-size: cover; } ``` Über die **Copy**-Schaltfläche landet die jeweilige Data-URL in der Zwischenablage. ## Architektur: alles im Browser Trianglify UI ist **rein clientseitig**. Es gibt **keinen Server-Roundtrip, kein API und keinen Upload**: Das Muster wird vollständig in deinem Browser über die quelloffene Bibliothek **Trianglify.js v4** (von Quinn Rohlf, GPL-3.0) erzeugt, gerendert und exportiert. Nichts von dem, was du erzeugst, verlässt dein Gerät — der Download und das Kopieren der Data-URL passieren lokal. ## Wertebereiche auf einen Blick | Einstellung | Bereich | Schritt | Voreinstellung | | --- | --- | --- | --- | | Cell Size | 20–200 px | 5 | 75 | | Variance | 0–1,5 | 0,05 | 0,75 | | Custom Width/Height | 100–8192 px | — | 1920 / 1080 | | Seed | freier Text / 8-stellig zufällig | — | leer | | Color Palette | 27 Paletten + Random | — | Random | Für den Einstieg und die Zielgruppen siehe die [Übersichtsseite](https://www.jpkc.com/db/tools/trianglify/), für konkrete Abläufe die [Beispiele](https://www.jpkc.com/db/tools/trianglify/examples/). Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/trianglify/).