JPKCom DB

Trianglify UI — Manual

Alle Einstellungen von Trianglify UI mit Wertebereich: Seed, Paletten, Stile, Drahtgitter, Größen, PNG/JPEG/WebP/SVG, CSS, teilbarer Link und Data-URIs.

Zurück zur Übersicht: Trianglify UI · Tool live öffnen: 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

Auf dem Desktop liegt links die Karte Settings mit allen Reglern, rechts die Preview mit dem aktuellen Muster und direkt darunter die Karte Size & export mit Größe und Download-Buttons. Ganz unten folgt die aufklappbare Karte Data URIs. Auf dem Smartphone steht die Vorschau oben, die Settings folgen darunter.

Einen „Generate"-Button gibt es nicht: Jede Änderung wirkt sofort. Auswahl-Menüs und Schalter erzeugen das Muster direkt neu, Schieberegler schon während des Ziehens, das Seed-Feld beim Tippen (mit Enter ohne Verzögerung). Damit die Oberfläche flüssig bleibt, wartet das Tool nach einer Eingabe kurz ab — 120 ms, bei sehr feinen Mustern mit geschätzt mehr als 40 000 Dreiecken 400 ms. Erzeugt wird das Muster mit der Bibliothek Trianglify.js v4, die vollständig im Browser läuft.

Grundprinzip: Download = Vorschau

Trianglify UI berechnet pro Einstellung genau ein Muster — immer mit Seed und immer in der gewählten Exportgröße. Die Vorschau zeigt dieses Muster nur verkleinert; PNG, JPEG, WebP, SVG, das kopierte CSS und die Data-URIs entstehen aus demselben Muster. Was du in der Vorschau siehst, ist also exakt das, was du herunterlädst — die Überschrift der Vorschau sagt es entsprechend: exactly what you download, scaled to fit.

Zwei Folgen davon:

  • Ein Wechsel der Exportgröße erzeugt ein neues Muster, weil die Geometrie von Breite und Höhe abhängt — auch bei gleichem Seed.
  • Die Cell size gilt in Pixeln der Exportgröße. Ein 4K-Bild mit 75 px Zellen sieht in der verkleinerten Vorschau entsprechend feiner aus als ein HD-Bild mit 75 px.

Einstellungen (Settings)

Seed

Ein Text-Feld (bis 64 Zeichen) für den Startwert des Zufallsgenerators. Darunter steht der Hinweis Same seed + settings = same pattern: Gleicher Seed plus identische Einstellungen ergeben exakt dasselbe Muster — auf jedem Gerät, zu jeder Zeit.

  • Das Shuffle-Symbol daneben (New random seed) setzt einen zufälligen 8-stelligen Seed und rendert sofort neu. Die Zeichen stammen aus abcdefghjkmnpqrstuvwxyz23456789 — nur Kleinbuchstaben und Ziffern, ohne die leicht verwechselbaren i, l, o, 0 und 1. Erzeugt wird er über crypto.getRandomValues().
  • Eigene Werte übernimmt das Tool schon beim Tippen; Groß- und Kleinschreibung zählen.
  • Ein leeres Feld gibt es praktisch nicht: Löschst du den Seed, setzt das Tool beim nächsten Durchlauf automatisch einen neuen Zufalls-Seed ein und zeigt ihn an. So bleibt jedes Muster reproduzierbar.

Colour palette — Farb-Palette

Ein Auswahl-Menü mit 27 ColorBrewer-Paletten plus Random (from the seed) als Voreinstellung:

  • Sequential (18, ein Farbverlauf von hell nach dunkel): Yellow-Green (YlGn), Yellow-Green-Blue, Green-Blue, Blue-Green, Purple-Blue-Green, Purple-Blue, Blue-Purple, Red-Purple, Purple-Red, Orange-Red, Yellow-Orange-Red, Yellow-Orange-Brown, Purples, Blues, Greens, Oranges, Reds, Greys.
  • Diverging (9, zwei Farben mit hellem Mittelpunkt): Purple-Orange (PuOr), Brown-Blue-Green, Purple-Green, Pink-Yellow-Green, Red-Blue, Red-Grey, Red-Yellow-Blue, Spectral, Red-Yellow-Green.

Random wählt die Palette über den Seed aus — derselbe Seed liefert also auch dieselbe Palette. Unter dem Menü zeigt ein schmaler Farbstreifen die Farben der gewählten Palette; bei Random und beim eigenen Verlauf ist er ausgeblendet. Die Palette bestimmt den Verlauf entlang der horizontalen Achse und — solange du im nächsten Menü nichts anderes wählst — auch entlang der vertikalen.

Vertical gradient — vertikaler Verlauf

Ein zweites Menü für den Verlauf entlang der vertikalen Achse. Voreinstellung ist Same as the palette — dann folgt die y-Achse derselben Palette wie die x-Achse. Wählst du hier eine der 27 Paletten, mischt das Tool zwei Verläufe: Jedes Dreieck bekommt zu gleichen Teilen die Farbe der ersten Palette an seiner horizontalen Position und die Farbe der zweiten Palette an seiner vertikalen Position. So entstehen zweidimensionale Farbverläufe, etwa Blues horizontal und Oranges vertikal.

Own two-colour gradient — eigener Farbverlauf

Ein Schalter, der die Paletten gegen einen eigenen Zwei-Farben-Verlauf tauscht. Ist er aktiv, sind Colour palette und Vertical gradient deaktiviert, und zwei Farbfelder werden bedienbar:

  • Start colour — Voreinstellung #264653.
  • End colour — Voreinstellung #e76f51.

Beide öffnen den Farb-Wähler Coloris im Hex-Format (ohne Alpha-Kanal) mit acht Vorlage-Farbtupfern. Du kannst auch direkt tippen: erlaubt sind sechsstellige (#264653) und dreistellige Hex-Werte (#abc), das # ist optional. Bei einem ungültigen Wert färbt sich das Feld rot, darunter steht Enter hex colours such as #264653 or #abc., und das Tool behält das letzte gültige Muster. Der eigene Verlauf wirkt auf beide Achsen.

Style — Stil

Bestimmt, wie die Dreiecke eingefärbt werden:

  • Smooth gradient (Voreinstellung) — ein gleichmäßiger Verlauf über die Fläche.
  • Sparkle (random colour jitter) — jedes Dreieck greift seine Farbe an einer leicht verschobenen Stelle des Verlaufs ab. Das ergibt ein lebhaftes, „glitzerndes" Muster.
  • Shadows (random darkening) — jedes Dreieck wird zufällig abgedunkelt, was Tiefe und Schattenwurf andeutet.

Der Zufall beider Effekte stammt aus dem Seed; ein Muster mit Sparkle oder Shadows ist also genauso reproduzierbar wie ein glatter Verlauf.

Effect strength — Effektstärke

Ein Schieberegler, der nur bei Sparkle und Shadows erscheint:

  • Wertebereich 0 bis 1, Schrittweite 0,05, Voreinstellung 0,50.
  • Bei Sparkle steuert er, wie weit die Farbe im Verlauf springen darf, bei Shadows, wie stark ein Dreieck höchstens abgedunkelt wird. Auch bei 0 bleibt ein kleiner Rest-Effekt erhalten.

Cell size — Zell-Größe

Ein Schieberegler für die Dreiecks-Größe in Pixeln, ausdrücklich bezogen auf die Exportgröße (at export size):

  • Wertebereich 10 bis 400 px, Schrittweite 5, Voreinstellung 75.
  • Kleine Werte ergeben viele feine Dreiecke (mehr Detail, größere SVG-Datei), große Werte wenige, großflächige Dreiecke.

Wie viele Dreiecke dabei entstehen, zeigt ein Badge über der 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.

Line width — Linienstärke

Zeichnet die Kanten der Dreiecke nach:

  • Wertebereich 0 bis 20 px, Schrittweite 0,5, Voreinstellung 0 (keine Linien).
  • Jede Linie hat die Farbe ihres Dreiecks — eine farblich abgesetzte Kontur gibt es also nicht. Am deutlichsten wirkt der Regler im Drahtgitter-Modus, wo er die Strichstärke bestimmt.

Wireframe — Drahtgitter

Der Schalter Wireframe (outlines only, transparent) lässt die Füllung weg und zeichnet nur die Umrisse der Dreiecke in ihren Verlaufsfarben. Steht Line width dabei auf 0, verwendet das Tool automatisch 1 px. Der Hintergrund bleibt transparent — in der Vorschau erkennst du das am Schachbrettmuster. PNG und WebP behalten die Transparenz, JPEG kennt keine und bekommt einen weißen Hintergrund. Vorsicht beim SVG: Im Drahtgitter-Modus schreibt die Bibliothek an die Dreiecke gar kein fill-Attribut, und SVG füllt Flächen ohne Angabe schwarz. Die SVG-Datei, Copy CSS und die SVG-Data-URI zeigen deshalb farbige Umrisse auf schwarzen Dreiecken statt auf transparentem Grund — auch wenn die Infozeile unter den Buttons SVG mit aufzählt. Für ein transparentes Drahtgitter nimmst du PNG oder WebP.

Vorschau (Preview)

Die Vorschau zeigt das Muster als Canvas, auf die Spaltenbreite verkleinert und auf hochauflösenden Displays entsprechend scharf. Sie behält das Seitenverhältnis der Exportgröße und wird höchstens 70 % der Fensterhöhe hoch (auf dem Smartphone 50 %), sodass auch Hochformate wie ein Phone-Wallpaper ganz sichtbar bleiben. Ändert sich die Fenstergröße, zeichnet das Tool die Vorschau neu.

Drei Badges im Kartenkopf fassen das Muster zusammen:

  • Palette — der Name der gewählten Palette, Random palette oder Own gradient.
  • Größe — die Exportgröße, etwa 1920 × 1080.
  • Dreiecke — die tatsächliche Anzahl der Dreiecke im Muster (… triangles).

Export

Die Karte Size & export fasst Größe, Pixeldichte und alle Ausgabe-Wege zusammen.

Size — Exportgröße

Ein Auswahl-Menü für die Exportgröße. Weil das Muster in dieser Größe berechnet wird, bestimmt es auch die Vorschau:

  • HD (1280 × 720)
  • Full HD (1920 × 1080) — Voreinstellung
  • QHD (2560 × 1440)
  • 4K (3840 × 2160)
  • Open Graph (1200 × 630) — Vorschaubild für Social-Media-Links
  • X header (1500 × 500) — Profil-Banner
  • Square (1080 × 1080)
  • Phone wallpaper (1080 × 1920) — Hochformat
  • Custom… — blendet zwei Felder Width und Height ein (Wertebereich 16 bis 8192 px, Voreinstellung 1920 × 1080). Werte außerhalb des Bereichs korrigiert das Tool; beim Verlassen des Felds steht dort der tatsächlich verwendete Wert.

Raster images at 2× pixel density — doppelte Pixeldichte

Ein Kontrollkästchen für Rasterbilder: Ist es gesetzt, haben PNG, JPEG, WebP und die PNG-Data-URI doppelt so viele Pixel in Breite und Höhe — aus Full HD wird ein 3840 × 2160 px großes Bild mit identischem Muster, gedacht für Retina- und andere HiDPI-Displays. Der Dateiname bekommt dann ein @2x. Auf SVG hat die Option keinen Einfluss, das skaliert ohnehin verlustfrei.

Unter den Buttons steht stets die tatsächliche Pixelgröße der Rasterbilder (Raster images: … px), im Drahtgitter-Modus ergänzt um den Hinweis, welche Formate transparent bleiben. Die 2×-Einstellung gehört nicht zu den Werten, die im geteilten Link landen.

PNG, JPEG und WebP

Die Buttons PNG, JPEG und WebP laden das Muster als Rasterbild in der Exportgröße (bzw. doppelt so groß mit 2×) herunter:

  • PNG — verlustfrei, mit Transparenz im Drahtgitter-Modus.
  • JPEG — verlustbehaftet mit Qualität 0,92, immer auf weißem Grund; Dateiendung .jpg.
  • WebP — ebenfalls Qualität 0,92, mit Transparenz. Kann dein Browser kein WebP schreiben, meldet das Tool This browser cannot write WebP — use PNG or JPEG.

Die Pixelgröße ist unabhängig vom Display: Ein Full-HD-PNG hat auch auf einem Retina-Bildschirm genau 1920 × 1080 px, solange du 2× nicht ankreuzt.

SVG

Der Button SVG lädt das Muster als Vektorgrafik herunter. Die Datei trägt Breite und Höhe der Exportgröße und zusätzlich ein viewBox-Attribut — dadurch skaliert sie sauber, wenn du sie etwa mit width: 100% einbindest, statt beschnitten zu werden. Für Web-Hintergründe ist SVG meist die beste Wahl: scharf in jeder Auflösung und bei gröberen Mustern kompakt.

Copy CSS

Copy CSS legt eine fertige CSS-Deklaration mit dem Muster als SVG-Data-URI in die Zwischenablage:

background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1920 1080' …");
background-size: cover;

Die SVG ist dabei nicht Base64-, sondern URL-kodiert — das ist kürzer und bleibt lesbar. Du setzt die beiden Zeilen nur noch in deinen Selektor ein.

Alle Einstellungen stehen laufend im URL-Hash der Seite, etwa #seed=k7m2xq9p&palette=Blues&style=shadows. Copy link kopiert diese Adresse. Wer sie öffnet, bekommt dasselbe Muster in derselben Größe.

  • Gespeichert werden Seed, Palette, vertikaler Verlauf, eigener Verlauf mit beiden Farben, Stil, Effektstärke, Cell size, Variance, Linienstärke, Drahtgitter sowie Breite und Höhe. Werte, die der Voreinstellung entsprechen, lässt das Tool weg; die eigenen Farben stehen nur im Link, wenn der eigene Verlauf aktiv ist.
  • Ungültige oder unvollständige Werte in einem Link korrigiert das Tool beim Laden auf den nächsten zulässigen Wert bzw. die Voreinstellung.
  • Nicht im Link: die 2×-Option.

Weil der Hash bei jeder Änderung mitläuft, kannst du die Adresse auch einfach als Lesezeichen speichern.

Dateinamen

Heruntergeladene Dateien heißen trianglify-<seed>-<Breite>x<Höhe>[@2x].<png|jpg|webp|svg> — etwa trianglify-k7m2xq9p-1920x1080.png oder mit 2× trianglify-k7m2xq9p-1920x1080@2x.png. Für den Dateinamen wird der Seed kleingeschrieben, alles außer a–z und 0–9 wird zu -, und er wird auf 40 Zeichen gekürzt. Bei Zufalls-Seeds kannst du den Seed deshalb direkt aus dem Dateinamen zurück ins Tool tippen; bei eigenen Seeds mit Großbuchstaben oder Sonderzeichen hebst du besser den Link auf.

Data URIs

Die aufklappbare Karte Data URIs liefert das Muster als Zeichenkette zum direkten Einbetten. Berechnet wird sie erst beim Aufklappen und danach bei jeder Änderung, solange sie offen ist:

  • SVG — eine URL-kodierte Data-URI (data:image/svg+xml,…), dieselbe wie bei Copy CSS.
  • PNG — eine Base64-Data-URI (data:image/png;base64,…), bei gesetzter 2×-Option in doppelter Pixeldichte.

Beide entsprechen der Exportgröße. Neben jedem Titel steht die Länge der Zeichenkette in KB bzw. MB, über Copy landet sie in der Zwischenablage. Das Tool selbst rät: Ab einigen Hundert KB ist eine eigene Datei die bessere Wahl. Eingebunden wird eine Data-URI etwa so:

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

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; den Farb-Wähler stellt Coloris. Das Tool speichert nichts — die Einstellungen stehen nur in der Adresse der Seite. Download, Kopieren und Link entstehen lokal.

Wertebereiche auf einen Blick

Einstellung Bereich Schritt Voreinstellung
Seed freier Text bis 64 Zeichen / 8 Zeichen zufällig — zufällig
Colour palette 27 Paletten + Random (from the seed) — Random
Vertical gradient Same as the palette + 27 Paletten — Same as the palette
Own two-colour gradient Start-/End-Farbe als Hex — aus, #264653 / #e76f51
Style Smooth gradient, Sparkle, Shadows — Smooth gradient
Effect strength 0–1 0,05 0,50
Cell size 10–400 px 5 75
Variance 0–1,5 0,05 0,75
Line width 0–20 px 0,5 0
Wireframe an/aus — aus
Size 8 Vorgaben + Custom 16–8192 px — 1920 × 1080
2× pixel density an/aus (nur Rasterbilder) — aus

Für den Einstieg und die Zielgruppen siehe die Übersichtsseite, für konkrete Abläufe die Beispiele. Ausprobieren kannst du alles direkt im Tool.