Круг из точки клика

Новый экран раскрывается кругом ровно из места клика — clip-path: circle().

Кликните в любом месте сцены.

День

Кликните в любом месте сцены — переход начнётся кругом из точки клика.

Ночь

И обратно — тоже кругом из курсора.

Код

<div class="overlay">Новый экран</div>

<style>
.overlay { position: fixed; inset: 0; z-index: 99;
  clip-path: circle(0 at 50% 50%);           /* спрятан в точку */
  transition: clip-path .8s cubic-bezier(.4,0,.2,1); }
</style>

<script>
// раскрытие кругом из точки клика
document.addEventListener("click", function (e) {
  var ov = document.querySelector(".overlay");
  var x = (e.clientX / innerWidth * 100) + "%";
  var y = (e.clientY / innerHeight * 100) + "%";
  ov.style.clipPath = "circle(150% at " + x + " " + y + ")";
  // закрытие: circle(0 at x y) из той же точки
});
</script>

Промпт для ИИ

Сделай переход кругом из точки клика: новый экран лежит поверх (fixed inset 0), спрятан clip-path: circle(0 at X Y); по клику ставим центр круга в координаты клика (в процентах от вьюпорта) и раскрываем до circle(150% at X Y) с transition 0.8s cubic-bezier(0.4,0,0.2,1). 150% гарантирует покрытие из любого угла. Закрытие — обратно в circle(0) из той же точки. Отлично работает для переключения тем день/ночь.