html

<div class="photo">
  <img src="assets/images/a.jpg" alt="">
  <svg id="search" class="overlay">
    <!-- maskとグラデーションの適用 -->
    <rect mask="url(#mask)" fill="url(#gradient)" x="0" y="0" class="background"></rect>

    <!-- maskの作成 -->
    <mask id="mask">
      <rect fill="white" x="0" y="0" class="background"></rect>
      <!-- ぼかしの適用 -->
      <circle filter="url(#filter)" fill="black" cx="0" cy="0" r="200" class="spotlight"></circle>

      <!-- ぼかしの作成 -->
      <defs>
        <filter id="filter">
          <feGaussianBlur in="SourceAlpha" stdDeviation="2"></feGaussianBlur>
        </filter>
      </defs>
    </mask>

    <!-- グラデーションの作成 -->
    <defs>
      <!-- 中心に向かうグラデーションを作成 -->
      <radialGradient id="gradient">
        <stop offset="0%" stop-color="black" stop-opacity="0.4"></stop>
        <stop offset="100%" stop-color="black" stop-opacity="0.9"></stop>
      </radialGradient>
    </defs>
  </svg>
</div>

JavaScript

// マウスストーカー要素
const mouseStalker = document.querySelector(".spotlight");
// 背景
const backGround = document.querySelectorAll(".background");
backGround.forEach(function (elem, index) {
  elem.setAttribute("width", parseFloat(window.innerWidth));
  elem.setAttribute("height", parseFloat(window.innerHeight));
});

// マウスストーカー要素の座標
const stalker = {
  x: 0,
  y: 0,
};

// マウスの座標
const mouse = {
  x: 0,
  y: 0,
};

// マウスストーカーの位置を更新
document.addEventListener("DOMContentLoaded", update);

// マウスの座標を監視
document.addEventListener("mousemove", mousemove);

// 変化したマウスの座標を格納
function mousemove(e) {
  mouse.x = e.clientX;
  mouse.y = e.clientY;
}

// 更新処理
function update() {
  // マウスストーカー要素の座標を更新
  /*
  マウスストーカーの追従に余韻を持たせたい場合
  stalker.x += (mouse.x - stalker.x) * 0.1;
  stalker.y += (mouse.y - stalker.y) * 0.1;
  上記のように希望の数値を掛ける
  */
  stalker.x += mouse.x - stalker.x;
  stalker.y += mouse.y - stalker.y;

  // マウスストーカー要素の位置を小数点第一位まで四捨五入
  const x = Math.round(stalker.x * 10) / 10;
  const y = Math.round(stalker.y * 10) / 10;

  // マウスストーカー要素のスタイルを更新
  mouseStalker.style.cx = x;
  mouseStalker.style.cy = y;

  // update()内でupdateを呼び出す事でループさせる
  requestAnimationFrame(update);
}

scss

.photo {
  width: 100%;
  height: 100vh;
  position: relative;
  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
  }
  .overlay {
    height: 100%;
    left: 0;
    position: absolute;
    top: 0;
    width: 100%;
  }
}