SVG / Abschnitte

SVG-Formtrenner: Abschnittskanten und Ebenen

Erzeuge acht SVG-Formen für Abschnittstrenner mit Amplitude, Frequenz, Höhe, Spiegelungen, invertierter Füllung und bis zu drei Ebenen. Sieh dir den Abschnitt in der Vorschau an und kopiere SVG, CSS und HTML.

SVG-Formtrenner: Abschnittskanten und Ebenen: Wähle eine Wellen-, Kurven-, Neigungs-, Dreiecks-, Pfeil-, Zickzack-, Wolken- oder Bergkante aus, passe ihre Höhe, Amplitude und Wiederholungen an, spiegle oder invertiere sie und stapel bis zu drei Ebenen. Der Trenner passt sich jeder Seitenbreite an. Kopiere das SVG, das CSS zur Positionierung oder einen fertigen HTML-Abschnitt. Läuft zu 100% lokal in deinem Browser, ohne Datei-Uploads zum Server.

Kategorie: Entwicklerwerkzeuge
Ausführungen: In deinem Browser
Kosten: Kostenlos · ohne Anmeldung
Verfügbarkeit: Einsatzbereit

SVG-FormtrennerLokale Verarbeitung

Läuft vollständig in deinem Browser

Abschnittsvorschau

Eine willkommene Abwechslung.

Eine gestaltete Kante zwischen zwei Abschnitten.

SVG-Code

<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg>

CSS-Positionierung

.section { position: relative; overflow: hidden; padding-bottom: 160px; }
.section-divider { position: absolute; left: 0; bottom: 0; width: 100%; height: 160px; pointer-events: none; }
.section-divider svg { display: block; width: 100%; height: 100%; }

HTML-Abschnitt

<section class="section">
  <div class="section-divider" aria-hidden="true"><svg xmlns="http://www.w3.org/2000/svg" width="1200" height="160" viewBox="0 0 1200 160" preserveAspectRatio="none"><g fill="#63c42d" transform="matrix(1 0 0 1 0 0)"><path d="M0,102.8 C28.6,95 114.3,57.1 171.4,55.8 C228.6,54.5 285.7,94.5 342.9,94.9 C400,95.3 457.1,58.7 514.3,58.3 C571.4,58 628.6,92.5 685.7,92.6 C742.9,92.7 800,57.1 857.1,58.9 C914.3,60.6 971.4,102.9 1028.6,103.3 C1085.7,103.7 1171.4,68.1 1200,61.1 L1200,160 L0,160 Z" opacity="1"/></g></svg></div>
</section>

Verwende die Hintergrundfarbe des nächsten Abschnitts für eine durchgehende Kante. Spiegle vertikal, wenn du einen unteren Trenner nach oben verschiebst.

Geschlossene Pfade und Koordinaten

SVG 2 definiert die Befehle closepath und cubic path zum Schließen und Zeichnen von Pfaden: https://www.w3.org/TR/SVG2/paths.html . Die viewBox ordnet diese Koordinaten dem Ansichtsfenster zu: https://www.w3.org/TR/SVG2/coords.html

Ursprung der Formen

Die Wellenform verwendet dieselben glatten Kurven wie der SVG Wave Generator und der SVG Blob Generator; die anderen Profile werden anhand einfacher Formeln gezeichnet. Es ist kein Bildmaterial von Drittanbietern enthalten, daher kannst du die Ausgabe frei verwenden.

So benutzt du es

Wähle eine Form aus und passe ihre Amplitude, Frequenz und Höhe an.
Lege Ebenen, Deckkraft und Farbe fest und wähle anschließend die Abschnittskante sowie gewünschte Spiegelungen aus.
Kopiere das SVG, das CSS zur Positionierung und das HTML für den Abschnitt oder lade das SVG herunter.

Datenschutz & Einschränkungen

Die Formgenerierung und Downloads werden vollständig in deinem Browser ausgeführt.

Häufige Fragen

Wie kann ich die Kante nahtlos in einen anderen Abschnitt übergehen lassen?

Verwende die Hintergrundfarbe dieses Abschnitts als Füllfarbe des Trenners. Das CSS reserviert Platz für den Trenner und positioniert ihn absolut an der ausgewählten Kante.

Worin unterscheidet sich dieses Tool vom Wellentool?

Dieses Tool bietet sieben weitere Formen, eine Invertierung und HTML für Abschnitte. Der vorhandene SVG Wave Generator bietet zufällige Wellen und zusätzliche wellenspezifische Einstellungen. Der SVG Blob Generator erstellt unabhängige organische Formen.

Was bewirkt das Invertieren?

Beim Invertieren wird der Pfad nach oben statt nach unten geschlossen. Die Position der Trennkante bleibt erhalten. Beim vertikalen Spiegeln wird dagegen die gesamte Form gespiegelt.

Kostenloses Tool · läuft in deinem browser · kein Konto nötig