Setze Ankerpunkte, ziehe Bézier-Griffe auf einer 500×500-Fläche und erhalte sofort das d-Attribut des SVG-Pfads und eine CSS-Regel clip-path: path().
Im Modus „Punkte hinzufügen“ klickst du auf die Fläche, um einen Anker zu setzen (standardmäßig eine Kurve C). Ziehe die grünen Anker zum Verschieben und die blauen Griffe zum Biegen. Im Modus „Punkte entfernen“ löscht ein Klick auf einen Anker diesen.
Setze Ankerpunkte, ziehe Bézier-Griffe auf einer 500×500-Fläche und erhalte sofort das d-Attribut des SVG-Pfads und eine CSS-Regel clip-path: path(). Geeignet für Alltag, Entwicklung, Lernen und schnelle Prüfungen.
Dieses Tool läuft im Browser. Prüfe vor sensiblen Daten, ob du deinem Gerät und Browser vertraust.
Ein SVG-path-Element beschreibt seine Form über ein d-Attribut wie „M 100 100 C 150 50 …“, und diese Koordinaten und Bézier-Kontrollpunkte von Hand zu schreiben, ist sehr fehleranfällig. Dieser Editor bietet eine Zeichenfläche von 500 × 500, auf der du den Pfad per Klicken und Ziehen aufbaust, während rechts sofort der passende SVG-d-Code und eine CSS-Regel clip-path: path() entstehen. Das hilft bei Icons, Logo-Entwürfen, unregelmäßigen Bildausschnitten oder einfach, um zu verstehen, wie SVG-Pfadbefehle funktionieren.
Im Modus „Punkte hinzufügen“ setzt ein Klick auf die Fläche einen Ankerpunkt. Der erste Punkt ist der Start (M), alle weiteren sind standardmäßig Kurvenpunkte (C) mit zwei blauen Anfassern. Im Modus „Auswählen & Verschieben“ ziehst du die grünen Kleeblatt-Anker, um Punkte zu verschieben, oder die Anfasser, um Richtung und Stärke jeder Kurve anzupassen. Ist ein Punkt ausgewählt, machst du ihn über „Kurventyp des Punkts“ zum Eckpunkt (L) oder zur Bézierkurve (C). Im Modus „Punkte entfernen“ löscht ein Klick den Anker. Maus, Trackpad und Touchscreen werden unterstützt.
Mit „Am Raster einrasten“ springen Anker auf ein 20-Pixel-Raster, was symmetrische oder saubere Formen deutlich erleichtert; das Hintergrundraster lässt sich jederzeit ein- und ausblenden. „Pfad schließen (Z)“ verbindet den letzten Punkt mit dem ersten und erzeugt eine geschlossene, füllbare Form. Wer nicht bei null anfangen will, lädt die Vorlagen Herz, Stern, Wassertropfen oder Alpa-Silhouette und passt sie an. Alle Koordinaten werden auf ganze Zahlen gerundet, der erzeugte Code bleibt also kurz und lässt sich direkt einfügen.
Das d-Attribut nutzt ein Koordinatensystem von 0 bis 500. Kombiniere es im SVG mit viewBox="0 0 500 500", dann skaliert die Form mit dem SVG mit. CSS clip-path: path() funktioniert anders: Die Koordinaten sind Pixel und skalieren nicht mit dem Element, deshalb passt es am besten zu einem Element mit 500 × 500 Pixeln. Für responsives Zuschneiden verwendest du einen SVG-clipPath mit clipPathUnits oder skalierst das Element per transform. Alles läuft im Browser, es wird nichts hochgeladen.
M (moveto) setzt den Stift auf den Startpunkt. L (lineto) zieht eine gerade Linie zu den angegebenen Koordinaten. C (curveto) zeichnet eine kubische Bézierkurve: Die ersten beiden Koordinatenpaare sind Kontrollpunkte, das letzte ist der Endpunkt. Z (closepath) verbindet den Pfad mit seinem Anfang. Dieser Editor verwendet nur diese vier Befehle, damit die Ausgabe gut lesbar und leicht von Hand anzupassen bleibt.
Die Funktion path() in clip-path verwendet Pixelkoordinaten: (500, 500) auf der Zeichenfläche bedeutet 500 Pixel nach rechts und 500 nach unten ab der oberen linken Ecke des Elements, unabhängig von seiner Größe. Ist dein Element nicht 500 × 500 Pixel groß, skaliere es mit transform: scale() oder nutze ein SVG-<clipPath clipPathUnits="objectBoundingBox"> mit auf 0–1 umgerechneten Koordinaten.
Setze den d-Code in <svg viewBox="0 0 500 500"><path d="…" /></svg> ein und gestalte ihn mit fill und stroke. Dank viewBox kannst du dem SVG beliebige Breiten und Höhen geben, die Form skaliert proportional. Derselbe d-String funktioniert auch mit CSS offset-path, wenn sich ein Element entlang des Pfads bewegen soll.
Derzeit nicht. Das Tool erlaubt nur das Zeichnen von Grund auf oder den Start mit den Vorlagen Herz, Stern, Wassertropfen und Alpa-Silhouette; die Ausgabefelder sind schreibgeschützt und importieren keinen Code. Um ein komplexes bestehendes Icon zu ändern, ist ein vollwertiges Vektorprogramm wie Inkscape oder Figma die bessere Wahl.
Kategorie ansehen: Design & Farben
Setze Screenshots in ein elegantes Browserfenster im macOS-Stil mit Schatten und Farbverlauf und lade sie als hochauflösendes PNG herunter.
Erstelle leuchtende Neonschriftzüge mit anpassbaren Farben, Pulsieren und exportierbarem CSS-Code.
Lies Farbcodes pixelgenau aus jedem Bild mit integrierter Lupe aus und sieh die dominante Farbpalette.
Konfiguriere und visualisiere CSS Flexbox- und Grid-Layouts visuell, sieh Animationen und kopiere CSS-Code.
