expand a pattern in svg?

Hi I try to get a chain that expain mouse click. The idea is to add a new chain item when we expand the chain path

the svg chain code is below

<svg version="1.1" id="IconsRepoEditor" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="100px" height="100px" viewBox="0 0 593.52 593.52" style="enable-background:new 0 0 593.52 593.52;" xml:space="preserve" fill="#000000" stroke="#000000" stroke-width="0"><g id="IconsRepo_bgCarrier"></g> <path d="M500.45,15.736C490.624,5.911,477.562,0.5,463.667,0.5s-26.959,5.411-36.783,15.236L270.42,172.2 c-9.826,9.825-15.236,22.888-15.236,36.784c0,13.895,5.411,26.958,15.236,36.784l23.52,23.52l-24.651,24.651l-23.52-23.52 c-9.825-9.826-22.888-15.236-36.784-15.236c-0.001,0,0,0,0,0c-13.895,0-26.959,5.412-36.784,15.236L15.737,426.883 c-9.826,9.824-15.236,22.887-15.236,36.783c0,13.895,5.411,26.959,15.236,36.783l77.333,77.334 c9.826,9.824,22.889,15.236,36.784,15.236c13.895,0,26.958-5.412,36.783-15.236l156.463-156.465 c9.826-9.824,15.236-22.889,15.236-36.783c0-13.896-5.41-26.959-15.236-36.783l-23.52-23.521l24.65-24.65l23.52,23.52 c9.826,9.826,22.889,15.236,36.785,15.236c13.895,0,26.957-5.412,36.783-15.236l156.463-156.464 c9.826-9.825,15.236-22.888,15.236-36.784s-5.41-26.958-15.236-36.784L500.45,15.736z M292.809,378.043 c2.339,2.34,2.688,5.072,2.688,6.492s-0.349,4.15-2.689,6.49L136.345,547.49c-2.339,2.338-5.07,2.688-6.49,2.688 s-4.152-0.348-6.491-2.689L46.03,470.156c-2.339-2.338-2.689-5.07-2.689-6.49s0.349-4.152,2.689-6.49l156.464-156.465 c2.339-2.34,5.071-2.689,6.491-2.689c1.42,0,4.151,0.35,6.49,2.689l23.521,23.521l-42.249,42.248 c-8.365,8.365-8.365,21.928,0,30.293c4.183,4.182,9.665,6.273,15.146,6.273c5.482,0,10.964-2.092,15.146-6.273l42.249-42.25 L292.809,378.043z M547.491,136.344L391.026,292.808c-2.338,2.339-5.07,2.688-6.49,2.688s-4.152-0.349-6.49-2.689l-23.521-23.521 l44.473-44.472c8.365-8.365,8.365-21.927,0-30.292c-8.365-8.365-21.928-8.365-30.293,0l-44.473,44.472l-23.52-23.521 c-2.34-2.339-2.689-5.07-2.689-6.49c0-1.42,0.35-4.152,2.689-6.491L457.177,46.029c2.338-2.339,5.07-2.688,6.49-2.688 s4.15,0.349,6.49,2.689l77.334,77.332c2.34,2.339,2.688,5.071,2.688,6.491C550.179,131.272,549.831,134.004,547.491,136.344z"></path> <path d="M129.854,593.52c-14.027,0-27.216-5.463-37.137-15.383l-77.333-77.334c-9.92-9.918-15.383-23.107-15.383-37.137 c0-14.03,5.463-27.219,15.383-37.137l156.463-156.464c9.919-9.92,23.108-15.383,37.137-15.383s27.219,5.463,37.138,15.383 l23.167,23.167l23.944-23.944l-23.167-23.167c-9.92-9.919-15.383-23.108-15.383-37.137c0-14.029,5.463-27.218,15.383-37.137 L426.53,15.383C436.449,5.463,449.638,0,463.667,0c14.027,0,27.217,5.463,37.137,15.383l77.332,77.332 c9.92,9.919,15.383,23.107,15.383,37.137s-5.463,27.219-15.383,37.137L421.673,323.453c-9.922,9.92-23.11,15.383-37.137,15.383 c-14.029,0-27.219-5.463-37.139-15.383l-23.166-23.166l-23.943,23.943l23.166,23.168c9.92,9.918,15.383,23.106,15.383,37.137 s-5.463,27.219-15.383,37.137L166.991,578.137C157.071,588.057,143.882,593.52,129.854,593.52z M208.985,255.683 c-13.762,0-26.7,5.359-36.431,15.09L16.091,427.236c-9.731,9.729-15.09,22.667-15.09,36.43s5.359,26.7,15.09,36.43l77.333,77.334 c9.732,9.73,22.67,15.09,36.43,15.09c13.761,0,26.698-5.359,36.43-15.09l156.463-156.465c9.73-9.729,15.09-22.667,15.09-36.43 s-5.359-26.701-15.09-36.43l-23.873-23.875l25.357-25.357l23.873,23.873c9.73,9.73,22.669,15.09,36.432,15.09 c13.759,0,26.697-5.359,36.43-15.09l156.463-156.464c9.73-9.73,15.09-22.668,15.09-36.43s-5.359-26.7-15.09-36.43L500.097,16.09 C490.365,6.359,477.428,1,463.667,1c-13.762,0-26.7,5.359-36.43,15.09L270.773,172.554c-9.731,9.73-15.09,22.668-15.09,36.43 c0,13.762,5.359,26.699,15.09,36.43l23.874,23.874l-25.358,25.358l-23.874-23.874 C235.685,261.042,222.747,255.683,208.985,255.683z M129.854,550.678c-1.499,0-4.38-0.368-6.845-2.836L45.676,470.51 c-2.467-2.466-2.835-5.346-2.835-6.844s0.368-4.379,2.835-6.844L202.14,300.357c2.467-2.468,5.347-2.836,6.845-2.836 c1.497,0,4.377,0.368,6.844,2.836l23.874,23.875l-42.602,42.602c-8.156,8.157-8.156,21.429,0,29.586 c3.952,3.951,9.206,6.127,14.793,6.127s10.841-2.176,14.793-6.127l42.602-42.604l23.874,23.873 c2.467,2.467,2.835,5.348,2.835,6.846c0,1.497-0.369,4.377-2.835,6.844L136.698,547.844 C134.231,550.31,131.352,550.678,129.854,550.678z M208.985,298.521c-1.343,0-3.925,0.33-6.138,2.543L46.383,457.529 c-2.212,2.21-2.542,4.793-2.542,6.137c0,1.343,0.331,3.926,2.542,6.137l77.333,77.332c2.21,2.213,4.794,2.543,6.138,2.543 c1.342,0,3.924-0.33,6.137-2.541l156.464-156.465c2.212-2.212,2.542-4.794,2.542-6.137s-0.33-3.927-2.542-6.139l-23.167-23.166 l-41.895,41.896c-4.141,4.14-9.646,6.42-15.5,6.42s-11.359-2.28-15.5-6.42c-8.546-8.547-8.546-22.453,0-31l41.895-41.895 l-23.167-23.168C212.909,298.852,210.327,298.521,208.985,298.521z M384.536,295.997c-1.498,0-4.379-0.368-6.844-2.835 l-23.875-23.874l44.826-44.825c3.951-3.951,6.128-9.205,6.128-14.792c0-5.588-2.177-10.842-6.128-14.793 s-9.205-6.127-14.793-6.127s-10.842,2.176-14.793,6.127l-44.826,44.826l-23.873-23.874c-2.468-2.466-2.836-5.347-2.836-6.844 c0-1.498,0.368-4.378,2.836-6.844L456.823,45.675c2.466-2.467,5.346-2.835,6.844-2.835c1.497,0,4.377,0.369,6.844,2.836 l77.334,77.332c2.466,2.465,2.834,5.347,2.834,6.845s-0.368,4.379-2.834,6.844L391.38,293.162 C388.915,295.628,386.034,295.997,384.536,295.997z M355.231,269.287l23.168,23.167c2.21,2.212,4.793,2.542,6.137,2.542 c1.343,0,3.926-0.33,6.137-2.542L547.138,135.99c2.211-2.21,2.541-4.794,2.541-6.137s-0.33-3.927-2.541-6.138l-77.334-77.332 c-2.212-2.212-4.794-2.543-6.137-2.543s-3.926,0.33-6.137,2.542L301.065,202.847c-2.213,2.212-2.543,4.794-2.543,6.137 s0.33,3.925,2.543,6.137l23.166,23.167l44.119-44.119c4.141-4.14,9.645-6.42,15.5-6.42s11.359,2.28,15.5,6.42 c8.547,8.546,8.547,22.453,0,31L355.231,269.287z"></path> </svg>

and the path expand code is here

Object.getOwnPropertyNames(Math).map(function(p) {
  window[p] = Math[p];
});

var DIM = 900, EXPF = 1.3, RPF = .028, 
		κ = 1.2, ρ = 4, 
		ζ = document, rp = round(RPF*DIM), 
		np = 4,	demo, ε, 
		svg = ζ.querySelector('svg'), 
		rect, curve, msl = null, mdrg = null;

var Meas = function(id, c0) {
	var bg, lbl, cc, c0 = c0 || 0, id = id;
	
	this.select = function() {
		if(lbl) lbl.classList.toggle('sel');
		if(bg) bg.classList.toggle('sel');
		if(cc) cc.classList.toggle('sel');
	};
	
	this.init = (function() {
		var bb, r, pad, ptt, attr, sel;
		
		lbl = ζ.getElementById('lbl-' + id);
		
		if(lbl) {
			lbl.textContent = DIM;
			bg = ζ.getElementById('bg-' + id);
			bb = lbl.getBBox();
			c0 -= 2*(κ - 1)*bb.height;
			attr = (id === 'w') ? 'y' : 'x';
			lbl.setAttribute(attr, c0);
			
			if(bg) {
				bb = lbl.getBBox();
				r = .4*RPF*DIM;
				pad = .5*(κ - 1)*bb.height;
				ptt = 2*pad;
				
				bg._attr({
					'x': round(bb.x - pad), 
					'y': round(bb.y - pad), 
					'width': round(bb.width + ptt), 
					'height': round(bb.height + ptt), 
					'rx': r, 'ry': r
				});
			}
			
			sel = '.token--val .hl--' + id;
			cc = ζ.querySelector(sel);
		}
	})();
};

var Point = function(el, x, y, r) {
	var el = el, lbl, bg, on, cc, q = 0, 
			r = r || rp, cx, cy, 
			selected = false;
	
	this.moveTo = function(x, y) {
		var cls, _new, β, bb, ptt, pad;
		
		cx = x || 0;
		cy = y || 0;
		
		if(el)
			el._attr({'cx': cx, 'cy': cy});
		
		if(lbl) {
			if(el.id.indexOf('p') !== -1) {
				β = atan2(y, x);
				if(β < 0) β += 2*PI;
				q = ~~(2*β/PI)

				cls = lbl.className.baseVal;
				_new = 'rq' + q;

				if(cls.indexOf('rq') < 0) {
					cls += ' ' + _new;
				}
				else {
					cls = cls.replace(/rq./, _new);
				}

				lbl.className.baseVal = 
					lbl.className.animVal = cls;
			}
			
			this.posLbl((q + .5)*.5*PI);
			this.updateLbl([x, y]);
			
			if(bg) {
				bb = lbl.getBBox();
				pad = .5*(κ - 1)*bb.height;
				ptt = 2*pad;
				bg._attr({
					'x': round(bb.x - pad), 
					'y': round(bb.y - pad), 
					'width': round(bb.width + ptt), 
					'height': round(bb.height + ptt)
				});
			}
		}
		
		if(on) {
			on._attr({'x': cx, 'y': cy})
		}
		
		if(cc) { cc.textContent = [cx, cy]; }
	};
	
	this.updateLbl = function(txt) {
		if(lbl) lbl.textContent = txt;
	};
	
	this.posLbl = function(θ) {
		if(lbl) {
			lbl._attr({
				'x': 1 + ~~(cx + 2*r*cos(θ)), 
				'y': 1 + ~~(cy + 2*r*sin(θ))
			});
		}
	};
	
	this.attachCode = function(s) {
		var sel, s = s || ',';
		
		if(el) {
			sel = '.token--val .hl--' + el.id;
			cc = ζ.querySelector(sel);
			cc.textContent = [cx, cy].join(s);
		}
	};
	
	this.coord = function(f) {
		if(f) return [cx, cy];
		return {'x': cx, 'y': cy};
	};
	
	this.select = function() {
		selected = !selected;
		
		if(el) {
			el.classList.toggle('sel');
			
			if(lbl) {
				lbl.classList.toggle('sel');
			}
			if(on) {
				on.classList.toggle('sel');
			}
			if(bg) {
				bg.classList.toggle('sel');
			}
			if(cc) {
				cc.classList.toggle('sel');
			}
		}
	};
	
	this.selected = function() {
		return selected;
	};
	
	this.init = (function() {
		var lid, onid, bgid;
		
		if(el) {
			el._attr({'r': r});
			lid = 'lbl-' + el.id;
			lbl = ζ.getElementById(lid);
			bgid = 'bg-' + el.id;
			bg = ζ.getElementById(bgid);
			
			if(bg) {
				bg._attr({
					'rx': .4*r, 'ry': .4*r
				});
			}
			
			onid = 'on-' + el.id;
			on = ζ.getElementById(onid);
		}
	})();
	
	this.moveTo(x, y);
};

var Guide = function(el, points) {
	var el = el, points = points, 
			nl = points.length;
	
	this.movePointTo = function(i, x, y) {
		var c;
		
		if(el) {
			c = el._attr('points').split(' ');
			c[i] = [x, y].join();
			el._attr({'points': c.join(' ')});
		}
		
		points[i].moveTo(x, y);
	};
	
	this.points = function() {
		return points;
	};
	
	this.init = (function() {
		var coords = [];
		
		for(var i = 0; i < nl; i++) {
			coords.push(points[i].coord(1));
		}
		
		if(el) {
			el._attr({
				'points': coords.join(' ')
			});
		}
	})();
};

var CCurve = function(el, guide) {
	var el = el, guide = guide, 
			points = guide.points(), 
			nl = points.length, 
			prf = ['M', 'C', ''];
	
	this.movePointTo = function(i, x, y) {
		var d, p;
		
		if(el) {
			d = el._attr('d').split(' ');
			p = d[i].charAt(0);
			p = (p === 'M' || p === 'C') ? p : '';
			d[i] = p + [x, y];
			el._attr({'d': d.join(' ')});
		}
		
		guide.movePointTo(i, x, y);
	};
	
	this.select = function(i) {
		points[i].select();
	};
	
	this.points = function() {
		return points;
	};
	
	this.init = (function() {
		var d = [], c;
		
		if(el) {
			for(var i = 0; i < nl; i++) {
				c = points[i].coord(1);
				d.push(prf[min(2, i)] + c);
			}
			
			el._attr({'d': d.join(' ')});
		}
	})();
};

var Demo = function() {
	var tl, orig, a0, a1, meas = {};
	
	this.tl = function() { return tl; };
	
	this.size = function() {
		var r = ρ*ε, w = 5*r, h=4*r;
		
		a0._attr({
			'markerWidth': w, 
			'markerHeight': h
		});
		a1._attr({
			'markerWidth': w, 
			'markerHeight': h
		});
	};
	
	this.select = function(id) {
		meas[id].select();
	};
	
	this.meas = function(id) {
		return meas[id];
	};
	
	this.arrow = (function(){
		a0 = ζ.getElementById('arrow0'), 
		a1 = ζ.getElementById('arrow1');
	})();
	
	this.viewBox = (function() {
		var sz = EXPF*DIM, o = -.5*sz, 
				vb_tl = ζ.getElementById('vb-tl'),
				vb_w = ζ.getElementById('vb-w'), 
				vb_h = ζ.getElementById('vb-h'), 
				tlel = ζ.getElementById('tl');

		svg._attr({
			'viewBox': [o, o, sz, sz].join(' ')
		});

		o = -.5*DIM;
		vb_tl.textContent = [o, o].join(' ');
		vb_w.textContent = 
		vb_h.textContent = DIM;
		
		tl = new Point(tlel, o, o, round(.35*rp));
		tl.attachCode(' ');
	})();
	
	this.delim = (function() {
		var rd = ζ.getElementById('delim'), 
				invp = round(100/EXPF), 
				o = round(-.5*invp);

		rd._attr({
			'x': o + '%', 
			'y': o + '%', 
			'width': invp + '%', 
			'height': invp + '%'
		});
	})();
	
	this.axes = (function() {
		var cf = (EXPF - 1)/1.5 + 1, 
				c1 = round(50/cf) + '%', 
				c2 = '-' + c1, 
				ax = ζ.getElementById('axis-x'), 
				ay = ζ.getElementById('axis-y');
		
		ax._attr({'x1': c1, 'x2': c2});
		ay._attr({'y1': c1, 'y2': c2});
	})();
	
	this.origin = (function() {
		var el = ζ.getElementById('o');
		orig = new Point(el, 0, 0, round(.25*rp));
	})();
	
	this.minit = (function() {
		var f = (EXPF - 1)/6, cf = -(.5 + f), 
				o = .5*DIM, c0 = cf*DIM, bb, 
				w = ζ.getElementById('w'), 
				h = ζ.getElementById('h');
		
		w._attr({
			'x1': -o, 'y1': c0, 
			'x2':  o, 'y2': c0
		});
		h._attr({
			'y1': -o, 'x1': c0, 
			'y2':  o, 'x2': c0
		});
		
		meas.w = new Meas('w', c0);
		meas.h = new Meas('h', c0);
	})();
};

Node.prototype._attr = function(a) {
	if(typeof a === 'string')
		return this.getAttribute(a);
	if(typeof a === 'object') {
		for(p in a) {
			this.setAttribute(p, a[p]);
		}
	}
};

var rand = function(max, min, int) {
	var max = ((max - 1) || 0) + 1, 
			min = min || 0, 
			gen = min + (max - min)*random();
	
	return int ? (~~gen) : gen;
};

var size = function() {
	rect = svg.getBoundingClientRect();
	ε = (EXPF*DIM)/rect.width;
	demo.size();
};

var toggleSel = function(e) {
	var t = e.target, cl = t.className, i;
	
	if(cl) {
		if(typeof cl === 'object') {
			cl = cl.baseVal;
		}
		
		if(cl.indexOf('hl--p') !== -1) {
			i = ~~cl.match(/[0-9]/)[0];
			msl = curve.points()[i];
			curve.select(i);
			return;
		}
	}
	
	if(t.id.indexOf('tl') !== -1) {
		msl = demo.tl();
		demo.tl().select();
		return;
	}
	
	i = t.id.match(/-[w|h]$/);
	
	if(i) {
		i = i[0].charAt(1);
		demo.select(i);
		msl = demo.meas(i);
	}
};

(function init() {
	var pts = [], g, el, 
			r = .4*DIM, e = .3*r, β, x, y
	
	demo = new Demo;
	size();
	
	for(var i = 0; i < np; i++) {
		el = ζ.getElementById('p' + i);
		β = (i + 1.5)*.5*PI;
		x = round(r*cos(β) + rand(e, -e));
		y = round(r*sin(β) + rand(e, -e));
		pts.push(new Point(el, x, y));
		pts[i].attachCode();
	};
	
	el = ζ.getElementById('guide');
	g = new Guide(el, pts);
	
	el = ζ.getElementById('curve');
	curve = new CCurve(el, g);
})();

addEventListener('resize', size, false);

addEventListener('mouseover', toggleSel, false);

addEventListener('mousedown', function(e) {
	var t = e.target;
	
	if(t.id.match(/^p[0-3]/)) {
		mdrg = ~~t.id.charAt(1);
	}
}, false);

addEventListener('mousemove', function(e) {
	var x, y;
	
	if(mdrg != null) {
		x = (e.clientX - rect.left)/rect.width ;
		x = round(EXPF*DIM*(x- .5));
		y = (e.clientY - rect.top)/rect.height;
		y = round(EXPF*DIM*(y - .5));
		curve.movePointTo(mdrg, x, y);
	}
}, false);

addEventListener('mouseup', function(e) {
	if(mdrg != null) {
		mdrg = null;
	}
}, false);

addEventListener('mouseout', toggleSel, false);
body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  overflow-y: hidden;
  margin: 0;
  height: 100vh;
  min-width: 320px;
  background: #000;
  font: 0.875em/ 1.75 courier, monospace;
}
body:after {
  position: absolute;
  bottom: 0;
  width: 100%;
  font: 1.5em/3 comic sans ms, sans-serif;
  text-align: center;
  content: "interactive demo: hover numbers, drag points";
}

/* ======= COMMON ======= */
[id*='vb'] {
  color: #bd8a00;
}
[id*='vb'][class*='token'][class*='sel'] {
  background: #bd8a00;
  color: #fff;
}

[class*='p0'], [id*='p0'] {
  color: #e38f81;
}
[class*='p0'][class*='token'][class*='sel'], [id*='p0'][class*='token'][class*='sel'] {
  background: #d14730;
  color: #fff;
}
svg [class*='p0'][class*='sel'], svg [id*='p0'][class*='sel'] {
  color: #d14730;
}

[class*='p1'], [id*='p1'] {
  color: #c58fd4;
}
[class*='p1'][class*='token'][class*='sel'], [id*='p1'][class*='token'][class*='sel'] {
  background: #a048b9;
  color: #fff;
}
svg [class*='p1'][class*='sel'], svg [id*='p1'][class*='sel'] {
  color: #a048b9;
}

[class*='p2'], [id*='p2'] {
  color: #75c4ea;
}
[class*='p2'][class*='token'][class*='sel'], [id*='p2'][class*='token'][class*='sel'] {
  background: #1c9edc;
  color: #fff;
}
svg [class*='p2'][class*='sel'], svg [id*='p2'][class*='sel'] {
  color: #1c9edc;
}

[class*='p3'], [id*='p3'] {
  color: #8cd392;
}
[class*='p3'][class*='token'][class*='sel'], [id*='p3'][class*='token'][class*='sel'] {
  background: #43b74d;
  color: #fff;
}
svg [class*='p3'][class*='sel'], svg [id*='p3'][class*='sel'] {
  color: #43b74d;
}

/* ======= CODE BOX ======= */
/* ------- General ------- */
pre {
  align-self: center;
  box-sizing: border-box;
  margin: 0;
  padding: 0.5em 1em;
  max-width: 100vw;
  width: calc(100vh - 7.125em);
  background: #000;
  color: #fff;
  font: inherit;
}
@media (min-height: 45em) {
  pre {
    width: 37.875em;
  }
}

.token--val span {
  display: inline-block;
  margin: 0 1px;
  padding: 0 2px;
  border-radius: 3px;
  font-weight: 900;
  transition: 0.3s;
  cursor: pointer;
}

/* ======= GRAPHICS ======= */
/* ------- Layout ------- */
section {
  flex: 1;
  background: #fff;
}

svg {
  display: block;
  overflow: visible;
  margin: 0 auto;
  max-width: 100vw;
  max-height: 100vw;
  width: calc(100vh - 7.125em);
  height: calc(100vh - 7.125em);
  min-width: 320px;
  min-height: 320px;
  box-shadow: 0 0 2px;
}
@media (min-height: 45em) {
  svg {
    width: 37.875em;
    height: 37.875em;
  }
}

/* ------- Generic ------- */
* {
  vector-effect: non-scaling-stroke;
}

rect, polyline, path, line {
  fill: none;
  stroke: currentColor;
}

circle {
  fill: currentColor;
  cursor: pointer;
}

text {
  font: 700 2.5em courier, monospace;
  -webkit-user-select: none;
  /* Chrome/Safari/Opera */
  -moz-user-select: none;
  /* Firefox */
  -ms-user-select: none;
  /* IE/Edge */
  -webkit-touch-callout: none;
  /* iOS Safari */
  user-select: none;
  cursor: pointer;
}

tspan {
  font-size: .75em;
}

.rq0 {
  dominant-baseline: hanging;
}

.rq1 {
  text-anchor: end;
  dominant-baseline: hanging;
}

.rq2 {
  text-anchor: end;
}

.rev {
  opacity: .001;
  transition: opacity 0.3s;
}

.sel {
  opacity: .999;
}

svg [id*='p']:not(circle):not(g) {
  pointer-events: none;
}

/* ------- Secondary stuff ------- */
[id='delim'] {
  color: #ddd;
  stroke-dasharray: 10px;
  stroke-width: 2px;
}

[id*='axis-'] {
  marker-start: url(#arrow0);
}

[id='o']:hover + .rev {
  opacity: .999;
}

[id='topleft'] text {
  fill: #fff;
}
[id='topleft'] rect, [id='topleft'] .sel {
  color: #bd8a00;
}

[id='meas'] line {
  marker-start: url(#arrow0);
  marker-end: url(#arrow1);
}
[id='meas'] text {
  fill: currentColor;
  color: #bd8a00;
  pointer-events: none;
}
[id='meas'] text.sel {
  color: #fff;
}
[id='meas'] rect {
  fill: currentColor;
  color: rgba(189, 138, 0, 0);
  cursor: pointer;
}
[id='meas'] rect.sel {
  color: #bd8a00;
}

[id='lbl-w'] {
  text-anchor: middle;
}

[id='lbl-h'] {
  text-anchor: end;
  dominant-baseline: middle;
}

/* ------- Main stuff ------- */
[id='guide'] {
  color: #bbb;
  stroke-width: 2px;
}

[id='curve'] {
  color: #c4605f;
  stroke-width: 3px;
}

circle[id^='p'] {
  fill: #ddd;
  stroke: currentColor;
  stroke-width: 3px;
  transition: fill 0.3s;
}
circle[id^='p'][class*='sel'] {
  fill: currentColor;
}

[id^='on'] {
  text-anchor: middle;
  dominant-baseline: middle;
  font: italic 700 2em trebuchet ms,  arial, sans-serif;
}
[id^='on'][class*='sel'] {
  fill: #fff;
}

[id^='bg'] {
  fill: currentColor;
}
[id='points'] [id^='bg'] + text {
  fill: #fff;
}
<pre>&lt;<span class='token--tag'>svg</span> <span class='token--attr'>viewBox</span>=<span class='token--val'>'<span id='vb-tl' class='token--coord hl--tl'></span> <span id='vb-w' class='token--dim hl--w'></span> <span id='vb-h' class='token--dim hl--h'></span>'</span>>
  &lt;<span class='token--tag'>path</span> <span class='token--attr'>d</span>=<span class='token--val'>'M<span class='token--coord hl--p0'></span><br>           C<span class='token--coord hl--p1'></span> <span class='token--coord hl--p2'></span> <span class='token--coord hl--p3'></span>'</span>/>
&lt;/<span class='token--tag'>svg</span>></pre>

<section>
	<svg>
		<defs>
			<marker id='arrow0' orient='auto' 
							viewBox='-20 -7 25 14' 
							refX='-15'>
				<polygon points='-5,0 0,-5 -15,0 0,5'/>
			</marker>
			<marker id='arrow1' orient='auto' 
							viewBox='-5 -7 25 14' 
							refX='10'>
				<polygon points='5,0 0,-5 15,0 0,5'/>
			</marker>
		</defs>
		
		<rect id='delim'/>
		
		<g id='axes'>
			<line id='axis-x'/>
			<line id='axis-y'/>
		</g>
		
		<g id='orig'>
			<circle id='o'/>
			<text id='lbl-o' class='rq0 rev'>0,0</text>
		</g>
		
		<g id='topleft'>
			<circle id='tl'/>
			<rect id='bg-tl' class='rev'/>
			<text id='lbl-tl' class='hl--tl rq0 rev'></text>
		</g>
		
		<g id='meas'>
			<line id='w'/>
			<rect id='bg-w'/>
			<text id='lbl-w' class='hl--w'></text>
			
			<line id='h'/>
			<rect id='bg-h'/>
			<text id='lbl-h' class='hl--h'></text>
		</g>
		
		<polyline id='guide'/>
		
		<path id='curve'/>
		
		<g id='points'>
			<circle id='p0' class='hl--p0'/>
			<text id='on-p0'>S</text>
			<circle id='p1' class='hl--p1'/>
			<text id='on-p1'>C<tspan>1</tspan></text>
			<circle id='p2' class='hl--p2'/>
			<text id='on-p2'>C<tspan>2</tspan></text>
			<circle id='p3' class='hl--p3'/>
			<text id='on-p3'>E</text>
			
			<rect id='bg-p0' class='rev'/>
			<text id='lbl-p0' class='rev'></text>
			<rect id='bg-p1' class='rev'/>
			<text id='lbl-p1' class='rev'></text>
			<rect id='bg-p2' class='rev'/>
			<text id='lbl-p2' class='rev'></text>
			<rect id='bg-p3' class='rev'/>
			<text id='lbl-p3' class='rev'></text>
		</g>
	</svg>
</section>

but my problem is to add and remove svg chain along the path whether the path is extended or reduce