Как сделать эффект преломления света на изображении [закрыт]

let container = document.querySelector('.refract'); 
 
document.addEventListener('mousemove', function(event) { 
  let x = event.clientX - 127; 
  let y = event.clientY; 
 
  let polygon = `polygon(${x}px 0px, ${x + 95}px 0px, ${x + 255}px 345px, ${x + 160}px 345px)`; 
  container.style['-webkit-clip-path'] = polygon; 
  container.style['clip-path'] = polygon; 
});

body { 
  width: 100%; 
  height: 100%; 
  padding: 0; 
  margin: 0; 
  background: url('https://i.stack.imgur.com/mZt9f.jpg'); 
  background-size: cover; 
  box-sizing: border-box; 
} 
 
.refract { 
  width: 100%; 
  height: 400px; 
  background: url('https://i.stack.imgur.com/mZt9f.jpg') 5px 5px no-repeat; 
  background-size: cover; 
  box-sizing: border-box; 
  -webkit-clip-path: polygon(130px 0px, 225px 0px, 385px 345px, 290px 345px); 
  clip-path: polygon(130px 0px, 225px 0px, 385px 345px, 290px 345px); 
} 
 
.focused { 
  animation: 2s infinite alternate satblur; 
} 
 
@keyframes satblur { 
  0%, 
  100% { 
    -webkit-filter: saturate(1.9) blur(0.0px); 
    filter: saturate(1.9) blur(0.0px); 
  } 
  30%, 
  70% { 
    -webkit-filter: saturate(1.9) blur(2.9px); 
    filter: saturate(1.9) blur(2.9px); 
  } 
  50% { 
    -webkit-filter: saturate(0.1) blur(2.9px); 
    filter: saturate(0.1) blur(2.9px); 
  } 
}

<div class="refract focused"> </div>