JSFiddle - React, Tailwind, and code Playground

by timo2012

HTML

<div id="res"></div>
<svg width="400" height="400">
    <path d="M30 30 S40 23 23 42 L23,42 C113.333,113.333 136.667,113.333 150,80 t40,50 T230,240 q20 20 54 20 s40 23 23 42 t20,30 a20,30 0,0,1 -50,-50"/>
</svg>

JavaScript

var path0 = document.querySelector('path');
var path1 = document.createElementNS("http://www.w3.org/2000/svg",'path');
var path2 = document.createElementNS("http://www.w3.org/2000/svg",'path');

var seg1 = path1.createSVGPathSegMovetoAbs(10,10);
path1.pathSegList.appendItem(seg1);
$("#res").html($("#res").html()+"path1, BEFORE: "+ path1.pathSegList.numberOfItems +"<br>");

path2.pathSegList.appendItem(seg1);
$("#res").html($("#res").html()+"path1, AFTER: "+ path1.pathSegList.numberOfItems+"<br>");

var seg0 = path0.pathSegList.getItem(0);
$("#res").html($("#res").html()+"path0, BEFORE: "+ path0.pathSegList.numberOfItems +"<br>");
path2.pathSegList.appendItem(seg0);
seg0 = path0.pathSegList.getItem(1);
path2.pathSegList.appendItem(seg0);
$("#res").html($("#res").html()+"path0, AFTER: "+ path0.pathSegList.numberOfItems +"<br>");