JSFiddle - React, Tailwind, and code Playground

HTML

<div id='example'>
  <svg width="300" height="300">
    <path id="path1" d="M229.99999999999994,196.66666666666666C229.99999999999997,213.33333333333331,229.99999999999997,246.66666666666666,241.66666666666663,263.3333333333333" stroke="black" fill="none"/>
    <path id="path2" d="M241.66666666666663,263.3333333333333C253.33333333333331,280,276.66666666666663,280,288.3333333333333,280" stroke="black" fill="none"/>
  </svg>
</div>

JavaScript

var n = 2, i, path;
for (i = 1; i <= n; i++) {
  path = document.getElementById('path' + i);
  if (path) {
    console.log('path' + i, path);
    console.log('path' + i + '.length', path.getTotalLength());
  }
}