<div class="ball"></div>

// DEMO STYLES
// ==========================================================
$bg:#252329;
html,body{height:100%;}body{display:flex;flex-direction:column;align-items:center;justify-content:center;width:100%;background:$bg;}


// REQUIRED STYLES
// ==========================================================

.ball {
  border-radius: 80%;
  height: 100px;
  width: 100px;
  transform:
    translateX(calc(var(--mouse-x) * 0.2px))
    translateY(calc(var(--mouse-y) * 0.2px));
  background: red;
}

var docStyle = document.documentElement.style;

// setting CSS variables inside this JS where they 
// can be declaratively used inside the CSS file.
document.addEventListener('mousemove', function(e) {
  docStyle.setProperty('--mouse-x', e.clientX);
  docStyle.setProperty('--mouse-y', e.clientY);
});