JSFiddle - React, Tailwind, and code Playground

HTML

<svg version="1.1"
     baseProfile="full"
     width="300" height="200"
     xmlns="http://www.w3.org/2000/svg">
  <g id="g"></g>
</svg>
<ul id="logger"></ul>

JavaScript

var users = [
    'caitp',
    'IgorMinar',
    'mhevery'
];
var depth = 0;
var template =
    '<text dy="{{depth+1}}em" dx="1em">{{depth+1}}: {{users[depth]}}</text>' +
  '<g transform="translate(0, {{(depth * 20) + 15}})"></g>';

function include(node) {
  var clone = node.cloneNode();
  var c = document.createComment('ngInclude: ' + node.nodeName);
  node.parentNode.insertBefore(c, node.nextElementSibling);
  node.parentNode.removeChild(node);

  if (depth < users.length) {
    var tmpl = template.replace(/({{([^}]+)}})/g, function() {
       return eval(arguments[2]);
    });
    clone.innerHTML = tmpl;
    c.parentNode.insertBefore(clone, c.nextElementSibling);
    if (clone.children && clone.children[1]) {
      depth++;
      log(clone.children[1]);
      include(clone.children[1]);
    }
  }
}

include(g);

function log(node) {
  if (node instanceof SVGGElement) {
    doLog('SVGGElement');
  } else if (node instanceof HTMLUnknownElement) {
    doLog('HTMLUnknownElement');
  } else {
    doLog('Unknown Element');
  }
}

function doLog(text) {
  var li = document.createElement('li');
  li.appendChild(document.createTextNode(text));
  logger.appendChild(li);    
}