Make Recursion Have a recursive path

recursivePath.js

(function drawRecursiveConnection() {
  const conceptElem = document.querySelector('div[id="concept-recursion"]')
  const top = conceptElem.offsetTop
  const left = conceptElem.offsetLeft

  const arc = `
    <svg viewBox="0 0 60 60" class="connection unlocked active" data-from="recursion" data-to="recursion" style="width: 60px; height 60px; transform: translate(${left-30}px, ${top-30}px)">
      <g>
        <path d="M 30 55
                A 25 25, 0, 1, 1, 55 30" />
        <circle cx="30" cy="55" r="3"></circle>
        <circle cx="55" cy="30" r="3"></circle>
      </g>
    </svg>
  `

  const arcElem = htmlToElement(arc)

  const pathSibling = document.querySelector('svg[data-from="recursion"]')
  pathSibling.insertAdjacentElement('afterend', arcElem)

  function htmlToElement(html) {
    const template = document.createElement('template')
    template.innerHTML = html.trim()
    return template.content.firstChild
  }
})()

Just paste this into your console when viewing Elixir syllabus on exercism.org!