JPKCom DB

Trianglify UI — Tipps & Tricks

Kniffe für Trianglify UI: SVG gegen PNG abwägen, mit Seed reproduzierbar bleiben, Muster performant als CSS-Background nutzen und mit GeoPattern und Colors kombinieren.

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

Das Manual erklärt jede Option, die Beispiele zeigen die Arbeitsabläufe. Hier geht es um das, was beides voraussetzt: SVG oder PNG, wie du reproduzierbar bleibst, wann ein Muster die Seite ausbremst und wie du Trianglify UI mit den anderen JPKCom-Tools kombinierst.

SVG oder PNG — was wann

  • Fürs Web fast immer SVG. Ein Low-Poly-Muster besteht aus wenigen Hundert Dreiecks-Polygonen — als Vektor-SVG ist das oft kompakter als ein PNG derselben Fläche und dabei verlustfrei skalierbar. Es bleibt auf jedem Display scharf, egal ob HD oder 4K, ohne dass du mehrere Auflösungen pflegen musst.
  • PNG für Bitmap-Kontexte. Brauchst du eine klassische Pixel-Datei — Wallpaper, Präsentations-Folie, Social-Grafik, ein Tool, das kein SVG frisst —, nimm PNG und exportiere gleich in der Zielauflösung (bis 4K oder Custom bis 8192 px).
  • Cell Size steuert die SVG-Größe. Je kleiner die Zell-Größe, desto mehr Dreiecke und desto größer die SVG-Datei. Für einen Web-Hintergrund ist ein mittlerer bis großer Wert (75 und höher) meist der bessere Kompromiss aus Optik und Dateigröße.

Reproduzierbarkeit: ohne Seed kein Wiederfinden

  • Der Seed ist dein einziger Determinismus-Hebel. Nur mit gesetztem Seed sind Muster wiederherstellbar. Findest du in der Vorschau etwas Gutes über das Shuffle-Symbol, friere es sofort mit einem Seed ein (das Shuffle-Symbol setzt automatisch einen) — sonst ist die Variante nach dem nächsten Generate Pattern weg.
  • Der Seed steht im Dateinamen. Heruntergeladene Dateien heißen trianglify-<seed>-<Breite>x<Höhe>.<ext>. Damit trägst du den Seed automatisch mit dir herum und kannst ein Muster später aus dem Dateinamen heraus rekonstruieren — Seed zurück ins Feld, gleiche Palette, gleiche Cell Size und Variance.
  • Export ≠ Vorschau ohne Seed. Der Export rendert frisch in der Export-Auflösung. Ohne Seed bekommst du dabei ein anderes Muster als in der Vorschau. Wer „genau dieses Bild, nur größer" will, muss vorher einen Seed setzen.
  • Gleiche Optik, andere Dichte bei großem Export. Cell Size ist ein absoluter Pixel-Wert. Ein 3840-px-Export enthält bei gleicher Cell Size deutlich mehr Dreiecke als die ~800-px-Vorschau. Das Muster wirkt feiner — willst du den Vorschau-Look erhalten, erhöh die Cell Size für den Export entsprechend.

Performance als CSS-Background

  • Inline-SVG spart einen Request. Die SVG Data URL direkt als background-image: url("data:image/svg+xml;base64,…") einzubetten, vermeidet eine zusätzliche Bilddatei und einen HTTP-Request — gut für die Ladezeit oberhalb des Falzes.
  • Data-URL = Vorschau-Auflösung. Die kopierte Data-URL spiegelt die Vorschau-Größe, nicht die Export-Größe. Für ein Vektor-SVG ist das egal (es skaliert), aber die PNG Data URL ist nur preview-groß — für eine scharfe Bitmap nimm lieber den Download PNG in voller Auflösung statt der PNG-Data-URL.
  • Sehr große Data-URLs werden unhandlich. Ein feines Muster (kleine Cell Size) ergibt eine lange Base64-Zeichenkette, die dein CSS aufbläht. Bleibt sie zu groß, lieber die SVG-Datei herunterladen und als externe Datei verlinken statt inline einzubetten.

Stolperfallen aus der Praxis

  • Eigener Verlauf und Palette schließen sich aus. Sobald Use custom color gradient an ist, wird das Color Palette-Menü deaktiviert. Wer die Palette zurückwill, muss den Schalter erst wieder ausschalten.
  • Ein Verlauf pro Muster. Es gibt genau einen Farbverlauf, der auf beide Achsen wirkt (die Y-Achse spiegelt die X-Achse). Eine getrennte X-/Y-Farbsteuerung bietet die Oberfläche nicht — für mehr Farbvielfalt wechselst du die Palette oder die beiden Verlaufsfarben.
  • Variance 0 ist ein Gitter. Steht die Varianz auf 0, bekommst du ein nahezu regelmäßiges Dreiecks-Gitter ohne den typischen Low-Poly-Charakter. Für den lebendigen Look brauchst du einen Wert deutlich über 0 (Voreinstellung 0,75).

Mit anderen JPKCom-Tools kombinieren

  • Marken-Farben finden mit Colors. Such mit dem Farb-Wähler oder dem Paletten-Extraktor die exakten Hex-Werte deiner Marke und trag sie als Start- und End-Farbe in den eigenen Verlauf ein.
  • Andere Mustersprache mit GeoPattern. Wenn Dreiecke nicht passen, erzeugt GeoPattern geometrische SVG-Hintergrund-Muster (Rauten, Kreise, Linien) aus einem Text-Seed — eine sinnvolle Alternative für denselben Einsatzzweck.

Noch mehr Kontext: die Übersicht zum großen Bild, das Manual für jede Option und die Beispiele für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im Tool.