Tiny Online Tools
Mesh-Verläufe als reines SVG
Mesh-Verläufe — bunte, vielpunktige Hintergründe, die wie gepinselte Farbe wirken — wurden durch Stripe und Linear bekannt. Dieser Generator erzeugt denselben Effekt als winziges, eigenständiges SVG — ohne Bilddatei, ohne WebGL, ohne Canvas.
Die Technik
Statt einen nativen Mesh-Verlauf zu verwenden (den CSS und SVG noch nicht vollständig unterstützen), stapelt das Tool mehrere weiche radiale Verläufe. Jeder Verlauf geht von einer gewählten Farbe an einer bestimmten (x, y)-Position nach außen in Transparenz über. Auf einem Vollton-Hintergrund verschmelzen diese radialen Pools miteinander und ahmen ein handgemaltes Mesh nach.
Der Ansatz ist sehr portabel: Die erzeugte SVG verwendet nur Standard-<radialGradient>- und <rect>-Elemente — keine Filter, keine Scripts — und funktioniert überall, wo SVG unterstützt wird.
Regler
- Punkte — 2 bis 6 Farbblobs. Jeder hat eine eigene Farbe und X/Y-Slider.
- Weichheit — Radius jedes radialen Verlaufs. Wenig Weichheit = kompakte, kräftige Farben; viel Weichheit = zarte Pastelltöne.
- Hintergrund — Vollton-Farbe hinter den Blobs.
- Neu würfeln — randomisiert die Positionen für sofortige Inspiration bei gleicher Palette.
Einsatzzwecke
- Hero-Hintergründe für moderne SaaS-Apps
- App-Startbildschirme
- Podcast-/Musik-Cover
- Produkt-Mockups und Marketing-Banner
- Blog- und Doku-Hintergründe
Das SVG dehnt sich mit preserveAspectRatio="none" auf jede Breite, eine Datei reicht also für jeden Breakpoint. Kombiniere mit dem Körnigen-Verlauf- oder dem Rausch-Textur-Generator für einen taktilen, modernen Look.