Zum Inhalt springen
Musterli
Unterstützen
Hintergründe

Punktwellen-Raster (Dot Grid Wave)

Ein Raster aus Punkten, Quadraten oder Strichen, die mit einer Welle oder einem Rauschfeld wachsen und schrumpfen. Animiert per Shader auf der Grafikkarte, als PNG bis 8K, nahtlose GIF-Schleife oder Live-Code für deine Website.

Generator öffnen

Läuft direkt in deinem Browser. Deine Grafiken entstehen auf deinem Gerät.

Beispielmotiv aus dem Punktwellen

Mit einem Preset starten

Wähle ein Preset, es öffnet sich direkt im Editor. Dort passt du alles an.

Worum geht’s?

Ein Punktwellen-Raster ist ein regelmässiges Raster aus kleinen Formen, deren Grösse einem unsichtbaren Feld folgt. Wo das Feld hoch ist, wachsen die Punkte, wo es tief ist, schrumpfen sie oder verschwinden. So entsteht der ruhige, technische Look, den du von KI- und Entwickler-Websites kennst. Musterli berechnet das Feld mit einem Shader in deinem Browser, darum bewegt sich das Raster flüssig und nichts verlässt dein Gerät.

Wofür du es brauchst

  • Hero-Bereiche für Tech-Produkte

    Ein ruhiges, bewegtes Punktraster hinter einer Schlagzeile wirkt präzise, ohne abzulenken. Füg es als Web Component, React-Komponente oder HTML ein.

  • Präsentationen

    Als dunkler Hintergrund mit hellen Punkten rahmt das Raster Diagramme und Zitate. Exportier es genau im Folienformat.

  • Druck und Plakate

    Mit festem Zeitpunkt und Quadraten oder Kreuzen wirkt das Raster wie ein modernes Halbtonmuster, scharf bis 8K.

So geht’s

Wähl ein Feld (Rauschen, Wellen oder Kreiswellen) und eine Form wie Punkt, Quadrat oder Ring. Stell Abstand sowie kleinste und grösste Grösse ein und form die Bewegung mit Frequenz, Winkel und Verzerrung. Mit dem Randverlauf löst sich das Raster gegen den Rand hin auf. Die Leertaste würfelt eine neue Variante. Exportier danach als PNG, JPG oder WebP bis 8K, als nahtlose GIF-Schleife oder als Live-Code für deine Website.

Punktwellen jetzt ausprobieren

Tipps

  • Stell die kleinste Grösse auf 0, dann verschwinden die Punkte in den Wellentälern ganz. Die Welle wirkt so leichter.
  • Kreiswellen mit hoher Frequenz ergeben Ringe wie ein Tropfen im Wasser, Wellen mit tiefer Frequenz breite Bänder.
  • Oft reichen zwei Farben: Die Punkte laufen je nach Grösse von der ersten zur letzten Farbe.

Häufige Fragen

Kann ich das Punktraster als animierten Website-Hintergrund verwenden?
Ja. Wähl im Export-Dialog Web Component, React-Komponente oder HTML-Einbettung und füg den Code in deine Website ein. Der Shader läuft live, pausiert ausserhalb des Bildschirms und steht still, wenn jemand weniger Bewegung eingestellt hat.
Bleiben die Punkte in grossen Exporten scharf?
Ja. Die Formen werden pro Pixel mit weichen Kanten berechnet und bleiben bis 8K scharf. Der Abstand wächst mit der Leinwand, darum sieht das Bild in jeder Grösse gleich aus.
Gibt es das Raster auch als SVG?
In diesem Tool nicht, weil die Punkte aus einem Shader kommen. Für statische Punktmuster als SVG nimm das Punktmuster oder die Punktringe.
Sieht dasselbe Raster immer gleich aus?
Ja. Das Feld hängt nur vom Seed und von deinen Einstellungen ab. Ein Teilen-Link oder ein gespeichertes Design ergibt auf jedem Gerät dasselbe Bild.

Passende Generatoren

Alle Generatoren in Hintergründe