<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <rect width="100%" height="auto" fill="#ffb4a2"/>
  <image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://lenadesignorg.files.wordpress.com/2020/06/luggage.png?w=640" width="100%" height="100%" />
</svg>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink= "http://www.w3.org/1999/xlink">
  <defs>
    <clipPath id="mask">
      <circle id="scan" cx="50%" cy="50%" r="8%" />
    </clipPath>
  </defs>
  <g clip-path="url(#mask)">
    <rect width="100%" height="100%" fill="#434373"/>
    <image xmlns:xlink= "http://www.w3.org/1999/xlink" xlink:href="https://lenadesignorg.files.wordpress.com/2020/06/luggage-inside.png?w=640" width="100%" height="100%" />
  </g>
</svg>
body {
  background-color:#ffb4a2;
  height: 100vh;  
}

svg {
  position: absolute;
  top: 100px;
  left: 15%;
  width: 70%;
  height: 70%;
}
var svgElement = document.querySelector("svg");
var maskedElement = document.querySelector("#scan");
var svgPoint = svgElement.createSVGPoint();

function cursorPoint(e, svg) {
    svgPoint.x = e.clientX;
    svgPoint.y = e.clientY;
    return svgPoint.matrixTransform(svg.getScreenCTM().inverse());
}

function update(svgCoords) {
    maskedElement.setAttribute('cx', svgCoords.x);
    maskedElement.setAttribute('cy', svgCoords.y);
}

window.addEventListener('mousemove', function(e) {
  update(cursorPoint(e, svgElement));
}, false);

document.addEventListener('touchmove', function(e) {
    e.preventDefault();
    var touch = e.targetTouches[0];
    if (touch) {
        update(cursorPoint(touch, svgElement));
    }
}, false);
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.