# 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. Source: https://www.jpkc.com/db/tools/trianglify/tips/ 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 Option, die [Beispiele](https://www.jpkc.com/db/tools/trianglify/examples/) 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--x.`. 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](https://www.jpkc.com/db/tools/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](https://www.jpkc.com/db/tools/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](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 und die [Beispiele](https://www.jpkc.com/db/tools/trianglify/examples/) für die Schritt-für-Schritt-Abläufe. Ausprobieren kannst du alles direkt im [Tool](https://www.jpkc.com/tools/trianglify/).