JSFiddle - React, Tailwind, and code Playground

by Dogbert

HTML

<img src="http://placehold.it/500x500">
<span class="dot"></span>
<div>

</div>

CSS

body {
  margin: 0;
}

.dot {
  position: absolute;
  left: 0;
  top: 0;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: red;
}

div {
  text-align: center;
}

JavaScript

var c = 0;
var dot = document.querySelector('span');
var div = document.querySelector('div');
setInterval(() => {
  var x = (c % 10) * 50 + 5;
  var y = (~~(c / 10)) * 50 + 5;
  dot.style.left = x + 'px';
  dot.style.top = y + 'px';
  div.innerText = 'x = ' + (c % 10) + '; y = ' + ~~(c / 10);
	c++;
  if (c == 100) c = 0;
}, 100);