JPKCom DB

Trianglify UI — Tipps & Tricks

Kniffe für Trianglify UI: SVG, PNG, JPEG oder WebP wählen, per Seed und Link reproduzierbar bleiben, Muster schlank als CSS-Background nutzen.

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: welches Format wann, 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 Full-HD-Muster mit der Voreinstellung von 75 px Cell size besteht aus rund tausend Dreiecken — als Vektor-SVG ist das kompakt und verlustfrei skalierbar. Es bleibt auf jedem Display scharf, egal ob HD oder 4K, ohne dass du mehrere Auflösungen pflegen musst.
  • PNG, JPEG oder WebP für Bitmap-Kontexte. Brauchst du eine klassische Pixel-Datei — Wallpaper, Präsentations-Folie, Social-Grafik, ein Programm, das kein SVG versteht —, exportierst du gleich in der Zielgröße (Vorgaben bis 4K oder Custom bis 8192 px). PNG ist verlustfrei, JPEG meist am kleinsten, aber ohne Transparenz, WebP verbindet kleine Dateien mit Transparenz.
  • 2× nur, wo es zählt. Die Option Raster images at 2× pixel density vervierfacht die Pixelzahl. Für Retina-Wallpaper lohnt sich das, für ein Open-Graph-Bild, das Plattformen ohnehin neu skalieren, meist nicht.
  • Cell size steuert die SVG-Größe. Je kleiner die Zell-Größe, desto mehr Dreiecke und desto größer die SVG-Datei. Das Badge über der Vorschau zeigt die Dreieckszahl live. 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

  • Jedes Muster hat einen Seed. Lässt du das Feld leer, setzt das Tool selbst einen Zufalls-Seed ein. Damit ist jedes Muster, das du siehst, wiederherstellbar — vorausgesetzt, du hältst den Seed fest, bevor du mit dem Shuffle-Symbol weiterwürfelst.
  • Der Link ist das bessere Gedächtnis. Copy link sichert Seed, Paletten, Stil, alle Regler und die Größe in einer Adresse. Das ist zuverlässiger, als einzelne Werte abzuschreiben — und du kannst die Adresse einfach als Lesezeichen ablegen. Nur die 2×-Option steht nicht darin.
  • Der Seed steht im Dateinamen. Heruntergeladene Dateien heißen trianglify-<seed>-<Breite>x<Höhe>.<ext>. Bei Zufalls-Seeds kannst du ein Muster daraus rekonstruieren — Seed zurück ins Feld, dieselbe Größe, dieselben Einstellungen. Für den Dateinamen schreibt das Tool den Seed aber klein und ersetzt Sonderzeichen; bei eigenen Seeds wie Mein Projekt! passt das nicht mehr zum Original, hier hilft nur der Link.
  • Die Größe gehört zum Muster. Das Tool berechnet das Muster direkt in der Exportgröße, der Download ist deshalb exakt die Vorschau. Wechselst du aber die Größe, entstehen bei gleichem Seed andere Dreiecke. Leg die Größe also fest, bevor du das Muster feinjustierst.
  • Cell size zählt in Export-Pixeln. Ein 4K-Muster mit 75 px Zellen wirkt in der verkleinerten Vorschau feiner als ein Full-HD-Muster mit 75 px. Willst du denselben Look in doppelter Größe, verdoppelst du die Cell size — oder du bleibst bei Full HD und nutzt für Rasterbilder die 2×-Option, die das Muster unverändert lässt.

Performance als CSS-Background

  • Inline-SVG spart einen Request. Copy CSS liefert das Muster als background-image: url("data:image/svg+xml,…") samt background-size: cover. Das vermeidet eine zusätzliche Bilddatei und einen HTTP-Request — gut für die Ladezeit oberhalb des Falzes. Die SVG ist URL-kodiert statt Base64-kodiert und damit spürbar kürzer.
  • PNG-Data-URIs sind schwer. Die PNG-Data-URI in der Karte Data URIs hat die volle Exportgröße (mit 2× sogar die doppelte Pixeldichte) und wird entsprechend lang. Für CSS-Hintergründe ist die SVG-Variante fast immer die bessere Wahl.
  • Auf die Größenangabe achten. Neben beiden Data-URIs steht ihre Länge in KB bzw. MB. Das Tool selbst rät, ab einigen Hundert KB lieber eine Datei zu verwenden. Ein feines Muster (kleine Cell size) bläht die SVG stark auf — dann die SVG-Datei herunterladen und extern verlinken oder die Cell size erhöhen.
  • Größe passend zum Seitenverhältnis wählen. Mit background-size: cover wird das Muster beschnitten, wenn die Proportionen nicht passen. Für schmale, breite Bereiche liegt X header (1500 × 500) näher als Full HD; für alles andere stellst du unter Custom… das passende Verhältnis ein.

Stolperfallen aus der Praxis

  • Eigener Verlauf und Paletten schließen sich aus. Sobald Own two-colour gradient an ist, sind Colour palette und Vertical gradient deaktiviert. Willst du die Paletten zurück, schaltest du den Schalter erst wieder aus. Einen zweiten, vertikalen Verlauf gibt es nur mit Paletten.
  • Ungültige Farbe = eingefrorene Vorschau. Tippst du einen Hex-Wert falsch, färbt sich das Feld rot und die Vorschau bleibt beim letzten gültigen Muster stehen. Erlaubt sind #264653 und die Kurzform #abc.
  • 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).
  • Effekte dosieren. Für ruhige Hintergründe hinter Text hältst du die Effect strength von Sparkle und Shadows eher niedrig; hohe Werte eignen sich für dekorative Flächen ohne Inhalt darüber. Probier es am besten direkt an der Vorschau aus — der Regler wirkt schon beim Ziehen.
  • Feine Muster brauchen Rechenzeit. Bei sehr kleiner Cell size und großen Formaten entstehen Zehntausende, bei 8192 px Kantenlänge sogar weit über hunderttausend Dreiecke. Das Tool wartet dann bei Reglern und Eingabefeldern etwas länger, bevor es neu rechnet, und die Dateien wachsen entsprechend — das Dreiecks-Badge zeigt dir, wo du stehst.
  • Drahtgitter als PNG oder WebP. Im Wireframe-Modus behalten nur PNG und WebP den transparenten Hintergrund. JPEG setzt die Linien auf Weiß, und im SVG (auch bei Copy CSS) werden die Dreiecke schwarz gefüllt, weil ihnen das fill-Attribut fehlt.

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.