JPKCom DB

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.

Zurück zur Übersicht: Trianglify UI · Tool live öffnen: www.jpkc.com/tools/trianglify/

Das 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 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-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:
.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 zum großen Bild, das Manual für jede Option im Detail und die Tipps & Tricks für Kniffe und Stolperfallen. Ausprobieren kannst du alles direkt im Tool.