Подсветка курсора

(function() { 
  "use strict"; 
  let cp, 
    elems = [], 
    whp, 
    dsp, 
    pos, 
    getProps = th => {   
      pos = th.getBoundingClientRect(); 
      return { 
        w: pos.width, 
        h: pos.height, 
        p: { 
          top: pos.top, 
          left: pos.left 
        }, 
        e: th 
      }; 
    }, 
    all = (...args) => { 
      let tmp; 
      if (args.length > 2) 
        for (let i = 0, len = args[0].length; i < len; i++) { 
          tmp = args[1](args[0][i], i); 
          if (tmp === args[2]) 
            break; 
          if (tmp === args[3]) 
            continue; 
        } 
      else 
        for (let i = 0, len = args[0].length; i < len; i++) 
          args[1](args[0][i], i); 
 
    }, 
    tpto = (e, filter, tmp /*tmp переменная пуста, просто объявил так*/) => { 
      cp = { 
          t: event.clientY, 
          l: event.clientX 
        }, 
        all(elems, (th, i) => { /*итерируем массив с элментами*/ 
          if (filter && (tmp = th[0]))/*проверка на родителя, в случае, если он указан в filter, это можно убрать для оптимизации в большенстве случаев, однако это же понадобится в паре с прокруткой, для обновления подсветки только в прокручиваемом блоке*/ 
            while (!0) { 
              if (tmp === filter) 
                break; 
              tmp = tmp.parentNode;/*если такого родителя нет, делаем continue*/ 
              if (!tmp) 
                return ">"; 
            } 
          whp = getProps(th[0]), 
            whp.b = getProps(th[1]), 
            dsp = { 
              l: whp.e.getAttribute("b-left-despos"), 
              t: whp.e.getAttribute("b-top-despos") 
            },/*атрибуты для поправок в положении подсветки, всяких фокусов с изменением размеров и т.д.*/ 
            dsp.t ? ( 
              dsp.t = Function("it,cursor,temp", "return " + dsp.t)(whp, cp)) : ( 
              dsp.t = cp.t - whp.b.h / 2 - whp.p.top), 
            dsp.l ? ( 
              dsp.l = Function("it,cursor,temp", "return " + dsp.l)(whp, cp)) : ( 
              dsp.l = cp.l - whp.b.w / 2 - whp.p.left), 
            whp.b.e.style.left = dsp.l + "px",/*ставим подсветке полученные координаты*/ 
            whp.b.e.style.top = dsp.t + "px"; 
        }, "!", ">"); 
    }; 
    document.addEventListener("mousemove", tpto); 
  const Main = th => { 
    let back = document.createElement("div"); 
    back.setAttribute("b", ""), 
      back.style.top = "200%",/*чтоб подсветка не выползала после загрузки страницы*/ 
      back.style.left = "200%", 
      th.appendChild(back), 
      elems.push([th, back]); 
  }; 
  class el extends HTMLElement { 
    connectedCallback() { 
      let th = this; 
      Main(th), 
        th.activate = () => Main(th); 
    } 
    disconnectedCallback() { 
      let elem, 
        th = this; 
      all(elems, (el, i) => { 
        if (el[0] === th) { 
          elem = i; 
          return "t"; 
        } 
      }, "t"); 
      elems.splice(elem, 1); 
    } 
  } 
  customElements.define("f-dplane", el); 
})();

body { 
  background: black; 
} 
 
f-dplane:not([sensor]) { 
  cursor: default; 
  position: absolute; 
  width: 100%; 
  height: 100%; 
  overflow: hidden; 
} 
 
f-dplane:not([sensor]) div { 
  position: absolute; 
  background: radial-gradient(rgba(255, 255, 255, 0.13), transparent, transparent) no-repeat; 
  height: 300px; 
  width: 400px; 
} 
[r]{ 
width:200px; 
height:100px; 
position:relative; 
margin-bottom:3px; 
border:1px solid rgba(128, 128, 128, 0.14); 
}

<div r><f-dplane></f-dplane></div> 
<div r><f-dplane></f-dplane></div> 
<div r><f-dplane></f-dplane></div> 
<div r><f-dplane></f-dplane></div> 
<div r><f-dplane></f-dplane></div>