JSFiddle - React, Tailwind, and code Playground

by oysteinmoseng

HTML

<div class="container">
  <button id="run">Run</button>
  <svg version="1.1" xmlns="http://www.w3.org/2000/svg" viewbox="0 0 200 200">
    <g id="group1">
      <path class="point" d="M 75 60 A 4 4 0 1 1 74.9 59.9 Z" tabindex="-1" role="img" aria-label="One"></path>
      <path class="point" d="M 65 50 A 4 4 0 1 1 64.9 49.9 Z" tabindex="-1" role="img" aria-label="Two"></path>
      <path class="point" d="M 55 40 A 4 4 0 1 1 54.9 39.9 Z" tabindex="-1" role="img" aria-label="Three"></path>
    </g>
    <g id="group2">
      <path class="point" d="M 60 75 A 4 4 0 1 1 59.9 74.9 Z" tabindex="-1" role="img" aria-label="Four"></path>
      <path class="point" d="M 50 65 A 4 4 0 1 1 49.9 64.9 Z" tabindex="-1" role="img" aria-label="Five"></path>
      <path class="point" d="M 40 55 A 4 4 0 1 1 39.9 54.9 Z" tabindex="-1" role="img" aria-label="Six"></path>
    </g>
  </svg>
</div>

CSS

.container {
  width: 400px;
  height: 400px;
}

.point {
  fill: #f09090;
}

JavaScript

var elements = document.getElementsByClassName('point'),
		i = elements.length,
    ref;

while (i--) {
	elements[i].addEventListener('focus', function (e) {
  	console.log('Focused element', i + 1);
  });
}
i = elements.length;

document.getElementById('run').onclick = function () {
	if (!ref) {
		ref = setInterval(function () {
			--i;
  		elements[i].focus();
  		i = i || elements.length;
		}, 1000);
  } else {
    clearInterval(ref);
  }
};