Как реализовать подобный же эффект но без SVG?

Question

Есть некое фото которое проглядывается через circle с mask

Я его сделал на SVG но хотелось бы увидеть эту реализацию на html css js

Вот его пример

let cursor = document.getElementById("cursor");

svg.addEventListener("mousemove", function(event) {
  cursor.setAttribute("cx", window.event.pageX + 35);
  cursor.setAttribute("cy", window.event.pageY + 35);
});

* {
  margin: 0;
  padding: 0;
}

svg {
  cursor: none;
}

#cursor {
  transition: 0.2s linear;
}

<svg viewBox="0 0 800 450" id="svg">
  <defs>
    <mask id="mask">
      <rect width="100%" height="100%" x="0" y="0" fill="#ccc" />
      <circle cx="100" cy="200" r="70" fill="#000" id="cursor">
        <animate attributeName="r" dur="6s" begin="0s" values="70; 20; 50; 100; 70" repeatCount="indefinite" />
      </circle>
    </mask>
  </defs>
  <image href="https://avatars.mds.yandex.net/get-zen_doc/1567436/pub_5dc17e8f98930900ade53d7a_5dc18674fc69ab00aef7f729/scale_1200" width="800px" height="450px" preserveAspectRatio="none" />

  <rect width="100%" height="100%" x="0" y="0" fill="#000" fill-opacity="0.7" />

  <rect width="100%" height="100%" x="0" y="0" fill="#000" fill-opacity="0.9" mask="url(#mask)" />

</svg>

Answer 1

Вариантов реализации много. Вот один из них - максимально упрощённый:

document.querySelector(".beam").addEventListener("mousemove", function (event) {
  this.style.setProperty("--offsetX", window.event.pageX - this.clientWidth / 2);
  this.style.setProperty("--offsetY", window.event.pageY - this.clientHeight / 2);
});

body { margin: 0; height: 100vh; }

.beam {
  --offsetX: 0; --offsetY: 0;
  width: 100%; height: 100%;
  background-image: radial-gradient(circle at center, #0000 5%, #0008 calc(5% + 1px)), url(https://avatars.mds.yandex.net/get-zen_doc/1567436/pub_5dc17e8f98930900ade53d7a_5dc18674fc69ab00aef7f729/scale_1200);
  background-position: calc(50% + var(--offsetX) * 1px) calc(50% + var(--offsetY) * 1px), 50% 50%;
  background-size: 100% 100%, cover; animation: breath 6s linear infinite;
  cursor: none;
}

@keyframes breath { 50% { background-size: 350% 350%, cover; } }

<div class="beam"></div>

Answer 2

Вариантов реализации действительно много.

Вот, например, не совсем обычный вариант: без HTML и CSS. А только jQuery:

$('body').css({'margin': '0', 'width': '100%', 'height': '100vh', 'background': 'url(https://avatars.mds.yandex.net/get-zen_doc/1567436/pub_5dc17e8f98930900ade53d7a_5dc18674fc69ab00aef7f729/scale_1200)', 'background-size': 'cover'});
$('body').append('<div class="mask" style="position: fixed; top: 0; left: 0; width: 100px; height: 100px; border-radius: 100px; box-shadow: 0px 0px 0px 999999px rgba(0, 0, 0, 0.9);"></div>');

var keyframes = Keyframe.keyframe({
  0: {'width': '100px', 'height': '100px'}, 50: {'width': '150px', 'height': '150px'}, 100: {'width': '100px', 'height': '100px'}
}).animate(document.getElementsByClassName('mask')[0], {duration: 3000, iterationCount: 'infinite'}).start();

$(document).on('mousemove', function(e) {
  var x = e.pageX - 50; var y = e.pageY - 50; $('.mask').css('left', x + 'px'); $('.mask').css('top', y + 'px');
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script><script src="https://cdn.rawgit.com/arusanov/keyframe-js/master/keyframe.min.js"></script>

БЛОГ НА HUSL

Как реализовать подобный же эффект но без SVG?

Ответы (2 шт):