引力の強さが異なる装飾ドット

<div class="d08-14-07-field">
          <span class="d08-14-07-dot" data-k="1" style="left:18%;top:22%"></span>
          <span class="d08-14-07-dot" data-k="0.5" style="left:78%;top:20%"></span>
          <span class="d08-14-07-dot" data-k="1.6" style="left:50%;top:50%"></span>
          <span class="d08-14-07-dot" data-k="0.35" style="left:22%;top:78%"></span>
          <span class="d08-14-07-dot" data-k="1.9" style="left:80%;top:76%"></span>
        </div>

.d08-14-07-field{position:relative;width:100%;height:190px}
        .d08-14-07-dot{position:absolute;width:14px;height:14px;margin:-7px 0 0 -7px;border-radius:50%;background:radial-gradient(circle at 30% 30%,#fff,#ff8a3d);box-shadow:0 4px 10px rgba(255,138,61,.4);transition:transform .1s linear}

(function(){
        var field=document.querySelector('#item-08-14-07 .d08-14-07-field');if(!field)return;
        var dots=field.querySelectorAll('.d08-14-07-dot');
        field.addEventListener('mousemove',function(e){
          var r=field.getBoundingClientRect();
          var mx=e.clientX-r.left,my=e.clientY-r.top;
          dots.forEach(function(d){
            var left=parseFloat(d.style.left)/100*r.width,top=parseFloat(d.style.top)/100*r.height;
            var dx=mx-left,dy=my-top;
            var dist=Math.hypot(dx,dy);
            var radius=130;
            var k=parseFloat(d.dataset.k)||1;
            if(dist<radius&&dist>0.01){
              var p=(1-dist/radius)*26*k;
              d.style.transform='translate('+((dx/dist)*p)+'px,'+((dy/dist)*p)+'px)';
            }else{
              d.style.transform='';
            }
          });
        });
        field.addEventListener('mouseleave',function(){dots.forEach(function(d){d.style.transform='';});});
      })();