磁力線風に歪むドットグリッド

<div class="d08-14-04-field"></div>

.d08-14-04-field{position:relative;width:100%;height:190px}
        .d08-14-04-dot{position:absolute;width:5px;height:5px;margin:-2.5px 0 0 -2.5px;border-radius:50%;background:#7c5cff;transition:transform .08s linear}

(function(){
        var field=document.querySelector('#item-08-14-04 .d08-14-04-field');if(!field)return;
        var cols=8,rows=5,dots=[];
        for(var ry=0;ry<rows;ry++){
          for(var rx=0;rx<cols;rx++){
            var d=document.createElement('span');
            d.className='d08-14-04-dot';
            var x=(rx+0.5)/cols*100,y=(ry+0.5)/rows*100;
            d.style.left=x+'%';d.style.top=y+'%';
            d.dataset.ox=x;d.dataset.oy=y;
            field.appendChild(d);
            dots.push(d);
          }
        }
        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 ox=r.width*(parseFloat(d.dataset.ox)/100),oy=r.height*(parseFloat(d.dataset.oy)/100);
            var dx=mx-ox,dy=my-oy;
            var dist=Math.hypot(dx,dy);
            var radius=85;
            if(dist<radius){
              var p=(1-dist/radius)*14;
              var nx=dist>0.01?dx/dist:0,ny=dist>0.01?dy/dist:0;
              d.style.transform='translate('+(nx*p)+'px,'+(ny*p)+'px)';
            }else{
              d.style.transform='';
            }
          });
        });
        field.addEventListener('mouseleave',function(){dots.forEach(function(d){d.style.transform='';});});
      })();