Es liegt nahe, dies auch einmal durch KI erledigen zu lassen: [](/images/fb54faba-dfbe-11f0-a404-9c6b003e9157.svg) Auf unserem [Stammtisch](https://forum.selfhtml.org/self/2025/nov/03/stammtisch-am-mittwoch/1822671?view_all=yes#m1822671) waren die Meinungen gespalten: einige fanden das Ergebnis gut und erkannten eine Palme, andere wollten es am Liebsten selbst probieren. Und da beißt sich die Katze in den Schwanz: Selbst zeichnen scheint umständlich und ohne Grafikprogramm zu kompliziert. Hier möchte SELFHTML mit einigen kleinen Helferlein zum Selbermachen animieren: In unserem Tutorial [**Pfade in SVG**](https://wiki.selfhtml.org/wiki/Pfade_in_SVG) haben wir für die verschiedenen Bézier-Kurven und arc-Bögen interaktive Beispiele erstellt, die sich mit Drag & Drop beliebig verändern lassen: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-13-path-cubic-bezier-2.html" width="900" height="720" name="SELFHTML" title="Bézier-Kurven"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Startseite">SELFHTML</a> </p> </iframe> Ich persönlich muss bei den *arc flags* und *sweep flags* immer noch ausprobieren, in welche Richtung es geht: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-10-arcs.html" width="900" height="760" name="SELFHTML" title="Arc-Bogen-Generator"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Startseite">SELFHTML</a> </p> </iframe> Des Weiteren gibt es nun zwei kleine [**Helferlein**](https://wiki.selfhtml.org/wiki/Pfade_in_SVG/Helferlein): In unserem Pfad-Konvertierer können Pfade so vereinfacht werden, dass sie später umso leichter weiterverarbeitet werden können. Das Ergebnis wird gleich angezeigt, sodass man sehen kann falls bei den Bézier-Kurven einige Dezimalstellen zu viel entfernt hat: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Pfad-Konvertierer.html" width="900" height="760" name="SELFHTML" title="Pfad-Konvertierer"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Startseite">SELFHTML</a> </p> </iframe> **PS**: Wusstet ihr schon, dass diese Pfad-Kommandos nicht nur in SVG, sondern mittlerweile auch in vielen CSS-Eigenschaften über die [path()](https://wiki.selfhtml.org/wiki/CSS/Funktionen/path())-CSS-Funktion verwendet werden? → [**Pfad-Animationen** mit offset-path](https://wiki.selfhtml.org/wiki/Animation/Pfad-Animationen)

Es liegt nahe, dies auch einmal durch KI erledigen zu lassen: [](/images/fb54faba-dfbe-11f0-a404-9c6b003e9157.svg) Auf unserem Stammtisch waren die Meinungen gespalten: einige fanden das Ergebnis gut und erkannten eine Palme, andere wollten es am Liebsten selbst probieren. Und da beißt sich die Katze in den Schwanz: Selbst zeichnen scheint umständlich und ohne Grafikprogramm zu kompliziert. Hier möchte SELFHTML mit einigen kleinen Helferlein zum Selbermachen animieren: In unserem Tutorial [**Pfade in SVG**](https://wiki.selfhtml.org/wiki/Pfade_in_SVG) haben wir für die verschiedenen Bézier-Kurven und arc-Bögen interaktive Beispiele erstellt, die sich mit Drag & Drop beliebig verändern lassen: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-13-path-cubic-bezier-2.html" width="900" height="720" name="SELFHTML" title="Bézier-Kurven"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Startseite">SELFHTML</a> </p> </iframe> Ich persönlich muss bei den *arc flags* und *sweep flags* immer noch ausprobieren, in welche Richtung es geht: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-10-arcs.html" width="900" height="760" name="SELFHTML" title="Arc-Bogen-Generator"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Startseite">SELFHTML</a> </p> </iframe> Des Weiteren gibt es nun zwei kleine [**Helferlein**](https://wiki.selfhtml.org/wiki/Pfade_in_SVG/Helferlein): In unserem Pfad-Konvertierer können Pfade so vereinfacht werden, dass sie später umso leichter weiterverarbeitet werden können. Das Ergebnis wird gleich angezeigt, sodass man sehen kann falls bei den Bézier-Kurven einige Dezimalstellen zu viel entfernt hat: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Pfad-Konvertierer.html" width="900" height="760" name="SELFHTML" title="Pfad-Konvertierer"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Startseite">SELFHTML</a> </p> </iframe> **PS**: Wusstet ihr schon, dass diese Pfad-Kommandos nicht nur in SVG, sondern mittlerweile auch in vielen CSS-Eigenschaften über die [path()](https://wiki.selfhtml.org/wiki/CSS/Funktionen/path())-CSS-Funktion verwendet werden? → [**Pfad-Animationen** mit offset-path](https://wiki.selfhtml.org/wiki/Animation/Pfad-Animationen)

Es liegt nahe, dies auch einmal durch KI erledigen zu lassen: [](/images/fb54faba-dfbe-11f0-a404-9c6b003e9157.svg) Auf unserem Stammtisch waren die Meinungen gespalten: einige fanden das Ergebnis gut und erkannten eine Palme, andere wollten es am Liebsten selbst probieren. Und da beißt sich die Katze in den Schwanz: Selbst zeichnen scheint umständlich und ohne Grafikprogramm zu kompliziert. Hier möchte SELFHTML mit einigen kleinen Helferlein zum Selbermachen animieren: In unserem Tutorial [**Pfade in SVG**](https://wiki.selfhtml.org/wiki/Pfade_in_SVG) haben wir für die verschiedenen Bézier-Kurven und arc-Bögen interaktive Beispiele erstellt, die sich mit Drag & Drop beliebig verändern lassen: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-13-path-cubic-bezier-2.html" width="900" height="720" name="SELFHTML" title="Bézier-Kurven"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Startseite">SELFHTML</a> </p> </iframe> Ich persönlich muss bei den *arc flags* und *sweep flags* immer noch ausprobieren, in welche Richtung es geht: <iframe src="https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:SVG-10-arcs.html" width="900" height="760" name="SELFHTML" title="Arc-Bogen-Generator"> <p>Ihr Browser kann leider keine eingebetteten Frames anzeigen: Sie können die eingebettete Seite über den folgenden Verweis aufrufen: <a href="https://wiki.selfhtml.org/wiki/Startseite">SELFHTML</a> </p> </iframe> Des Weiteren gibt es nun zwei kleine [**Helferlein**](https://wiki.selfhtml.org/wiki/Pfade_in_SVG/Helferlein): In unserem Pfad-Konvertierer können Pfade so vereinfacht werden, dass sie später