# Trianglify UI — Anwendungsbeispiele

> Praxisnahe Durchläufe mit Trianglify UI: Hintergrund in Marken-Farben, ein Muster per Seed reproduzieren, als CSS-Background einbinden und in 4K als PNG exportieren.

Source: https://www.jpkc.com/db/tools/trianglify/examples/

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/)

Das [Manual](https://www.jpkc.com/db/tools/trianglify/manual/) erklärt jede Einstellung und jeden Wertebereich im Detail. Diese Seite ergänzt das um **konkrete Arbeitsabläufe** — typische Aufgaben, Schritt für Schritt durchgespielt. Die Oberfläche des Tools ist auf Englisch; Regler- und Button-Namen stehen deshalb in ihrer englischen Original-Schreibweise, bei Bedarf mit deutscher Erläuterung.

## Beispiel 1: Hintergrund in deinen Marken-Farben

Du brauchst einen Hero-Hintergrund, der zu deinem Corporate Design passt — nicht irgendeine bunte Palette.

1. Öffne [Trianglify UI](https://www.jpkc.com/tools/trianglify/) und aktiviere den Schalter **Use custom color gradient**. Das Palette-Menü wird dadurch deaktiviert.
2. Klick in das Feld **Start Color** und trag deine erste Marken-Farbe als Hex-Wert ein (z. B. ein dunkles Markenblau). Wiederhol das für **End Color** mit einer zweiten, harmonierenden Farbe.
3. Stell die **Cell Size** auf einen mittleren Wert (z. B. 75) und die **Variance** nach Geschmack — niedriger für ein ruhiges, höher für ein lebhaftes Muster.
4. Die Vorschau zeigt das Ergebnis sofort. Passt es, hast du einen Hintergrund exakt in deinen Farben.

Tipp: Wenn du die genauen Hex-Werte deiner Marke nicht zur Hand hast, findest du sie mit dem [Colors](https://www.jpkc.com/db/tools/colors/)-Tool (Farb-Wähler und Paletten-Extraktor).

## Beispiel 2: Ein Muster per Seed reproduzieren

Du hast in der Vorschau ein Muster gefunden, das du behalten und später exakt wiederherstellen willst.

1. Klick auf das **Shuffle-Symbol** neben dem Seed-Feld. Das Tool setzt einen zufälligen 8-stelligen Seed und rendert ein neues Muster. Würfle so lange, bis dir das Ergebnis gefällt.
2. **Notier dir den Seed** (er steht im Feld und als Badge „Seed: …" in der Vorschau). Zusammen mit Palette, Cell Size und Variance beschreibt er das Muster vollständig.
3. Zum Wiederherstellen — auf einem anderen Rechner oder Wochen später — tipp denselben Seed in das Feld und stell dieselben Werte ein. Du bekommst **exakt dasselbe Muster** zurück.

Das ist der entscheidende Unterschied zu einem leeren Seed-Feld: Ohne Seed erzeugt jeder Klick auf **Generate Pattern** eine neue Zufalls-Variante, die du nicht zurückholen kannst.

## Beispiel 3: Als CSS-Background einbinden

Du willst das Muster ohne separate Bilddatei direkt im Stylesheet verwenden.

1. Erzeuge in der Vorschau das gewünschte Muster (am besten mit gesetztem Seed, siehe Beispiel 2).
2. Klapp unten den Bereich **Base64 Data URLs** auf und klick bei **SVG Data URL** auf **Copy**. Die komplette `data:image/svg+xml;base64,…`-Zeichenkette liegt jetzt in der Zwischenablage.
3. Setz sie in dein CSS ein:

```css
.hero {
	background-image: url("data:image/svg+xml;base64,…");
	background-size: cover;
	background-position: center;
}
```

Weil das SVG inline im CSS steht, spart das einen zusätzlichen HTTP-Request. Beachte: Die Data-URL spiegelt die **Vorschau-Auflösung** — für ein CSS-`background` mit `background-size: cover` ist das genau richtig, denn das Vektor-SVG skaliert ohnehin verlustfrei.

## Beispiel 4: Als Hero-Bild in 4K als PNG exportieren

Für ein Präsentations-Hintergrundbild oder ein Wallpaper brauchst du eine hochauflösende Bitmap.

1. Erzeuge dein Muster und scroll zur Karte **Export**.
2. Wähl bei **Export Resolution** den Eintrag **4K (3840 × 2160)** — oder **Custom…** und trag eine eigene Größe ein (bis 8192 px Kantenlänge).
3. Klick auf **Download PNG**. Das Tool rendert das Muster frisch in der gewählten Auflösung und lädt die Datei als `trianglify-<seed>-3840x2160.png` herunter.

Wichtig: Der Export wird in der vollen Auflösung neu berechnet. Damit das exportierte Bild dem entspricht, was du in der Vorschau gesehen hast, muss ein **Seed gesetzt** sein — ohne Seed weicht das Ergebnis ab. Behalt im Kopf, dass eine größere Fläche bei gleicher Cell Size mehr Dreiecke enthält als die kleine Vorschau; bei Bedarf die Cell Size für den Export etwas erhöhen.

## Beispiel 5: Eine ColorBrewer-Palette gezielt nutzen

Du brauchst kein eigenes Marken-Schema, sondern ein erprobtes, ausgewogenes Farbschema.

1. Lass **Use custom color gradient** aus und öffne das Menü **Color Palette**.
2. Wähl aus der Gruppe **Sequential** eine einfarbige Steigerung (z. B. *Blues* oder *Greens*) für einen ruhigen, professionellen Look — oder aus **Diverging** eine kontrastreiche Palette (z. B. *Spectral* oder *RdYlBu*) für ein lebendigeres Muster.
3. Spiel mit Cell Size und Variance, bis die Balance stimmt, und exportiere wie in Beispiel 3 (CSS) oder 4 (PNG).

Die 27 Paletten stammen aus ColorBrewer und sind auf gute Unterscheidbarkeit ausgelegt — eine schnelle Abkürzung zu einem stimmigen Ergebnis, ohne selbst Farben zu mischen.

---

Noch tiefer: die [Übersicht](https://www.jpkc.com/db/tools/trianglify/) zum großen Bild, das [Manual](https://www.jpkc.com/db/tools/trianglify/manual/) für jede Option im Detail und die [Tipps & Tricks](https://www.jpkc.com/db/tools/trianglify/tips/) für Kniffe und Stolperfallen. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/trianglify/).