JSFiddle - React, Tailwind, and code Playground

by luka kupunia

HTML

<div id="demo">
  <div id="box"></div>
</div>

CSS

div#demo {
  width: 400px;
  height: 400px;
  position: absolute;
  background: purple;
  left: 50%;
  top: 50%;
  margin-top: -200px;
  margin-left: -200px;
}
div#box {
  width: 50px;
  height: 50px;
  background: yellow;
  border-radius: 50%;
  position: absolute;
  left: 0;
  bottom: 0;
}

JavaScript

var a = document.querySelector('#demo');
var b = document.querySelector('#box');
a.addEventListener('mousemove',function(e){
		/* console.log(e.clientX, e.clientY) */
})

function coord(n){
	var limit = 10;
	var my = setInterval(function(){
	for(var i = 0; i < limit; i++){
  	var c = n * n;
    
    	b.style.transform = 'translate(' + (n * 10) + 'px,-' + c + 'px)';
    
  		console.log(c);
    
  }
  if (n == 19){
  	clearInterval(my);
  }
  n++;
  },10)
}
coord(1)