Wellen-SVG-Generator
Passen Sie Größe, Form und Farbe von Wellen an, um Trennlinien oder Hintergründe für Webseiten zu erstellen. Kopieren oder speichern Sie das SVG oder CSS für den Hintergrund oder speichern Sie ein PNG-Bild.
Möglichkeiten
Form und Farben anpassen
Passen Sie Wellenhöhe, Anzahl, Position und Füllrichtung an und erstellen Sie sie mit einer oder zwei Farben.
Ergebnis im passenden Format abrufen
Kopieren und speichern Sie SVG-Code oder einen CSS-Hintergrund oder speichern Sie das Ergebnis als PNG-Bild.
Anleitung
Ausgangsform auswählen
Passen Sie die Werte direkt an oder wählen Sie unter „Vorlage auswählen“ eine ähnliche Form.
Größe und Farben anpassen
Legen Sie Breite, Höhe, Amplitude und Wellenanzahl fest. Passen Sie in den erweiterten Einstellungen Startposition und Mittellage an.
SVG erstellen und prüfen
Prüfen Sie Wellenform und transparente Bereiche. Erzeugen Sie die Grafik nach Änderungen der Einstellungen erneut.
Gewünschtes Format abrufen
Wählen Sie SVG oder CSS-Hintergrund zum Kopieren oder Speichern, oder speichern Sie das PNG.
Nützlich für
Seitenbereiche trennen
Erstellen Sie wellenförmige Trennlinien zwischen Inhaltsbereichen oder über einer Fußzeile.
Farben Ihrer Website abstimmen
Erstellen Sie mit einer Volltonfarbe oder einem Farbverlauf ein Hintergrundelement, das zum Farbschema der Seite passt.
Wellenformen und Speicherformate
Amplitude und Wellenanzahl
Die Amplitude gibt die Stärke der vertikalen Veränderung an; die Wellenanzahl bezeichnet die Zyklen über die gesamte Breite. Diese Funktion zeigt keine Audiowellenformen an.
Wellenposition und abgeschnittene Bereiche
Ändern Sie die Startposition über die Phase und die vertikale Position über die Mittellage. Bildbereiche außerhalb des Bildes werden abgeschnitten.
SVG oder PNG auswählen
SVG stellt die Form als Vektoren dar. PNG speichert ein Bild mit den angegebenen Pixelmaßen und bewahrt transparente Bereiche.
CSS-Hintergrund platzieren
CSS legt ein Hintergrundbild fest. Stellen Sie Breite und Höhe des verwendeten Elements so ein, dass der Hintergrund darin angezeigt werden kann.
Häufig gestellte Fragen
Kann ich Wellenform und Farben anpassen?
Sie können Werte und Farben festlegen. Wählen Sie „Zwei Farben verwenden“, um die zweite Farbe und den Farbverlaufswinkel einzustellen.
Was geschieht mit den aktuellen Einstellungen, wenn ich eine Vorlage auswähle?
Die Einstellungen der Vorlage ersetzen die aktuellen Einstellungen, einschließlich Breite, Höhe und Farben. Passen Sie nach der Auswahl die benötigten Werte an.
Ändert sich die Vorschau, wenn ich Einstellungen ändere?
Wählen Sie nach Änderungen „SVG erstellen“, um das Ergebnis zu prüfen. Das zuvor erzeugte Ergebnis steht dann nicht mehr zum Anzeigen oder Speichern bereit.
Ist das SVG eine exakte Sinuswelle?
Die Welle wird durch eine glatte kubische Kurve angenähert. Sie ist keine Wellenform für mathematische Messungen oder Audioanalysen.
Dateiverwaltung
- Eingabe
- Erstellen Sie die Grafik anhand numerischer Welleneinstellungen und Farben. Ein Bild muss nicht ausgewählt werden.
- Ausgabe
- wave.svg, wave.css und wave.png. SVG und CSS können auch kopiert werden.