Spotlight effect with css, html, javascript

Issue

I've designed a spotlight effect with css, html and java. This is the link to the page: https://civitonia.com/ The spotlight follows the cursor, but as you can see, when you refresh the page or when you open it, the spotlight is not center on the page but you can see it a the bottom right. I'd like to set a "center point" or something similar that send the spotlight effect at the center of the page every time I refresh it/open it. Is it possible?

CSS:

.spotlight {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: radial gradient(circle, transparent 160px, rgba(0, 0, 0, 0)
    200px);
    }

SCRIPT:

<script>
    window.addEventListener("DOMContentLoaded", () => {
        const spotlight = document.querySelector('.spotlight');
        let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
        window.addEventListener('mousemove', e => updateSpotlight(e));
        function updateSpotlight(e) {
            spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
        }
    });
    </script> 

Solution

You can set spotlight to center by setting its radial gradient at half of window's innerWidth and innerHeight on "DOMContentLoaded".

window.addEventListener("DOMContentLoaded", () => {
        const spotlight = document.querySelector('.spotlight');
        let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
        spotlight.style.backgroundImage = `radial-gradient(circle at ${window.innerWidth/2}px ${window.innerHeight/2}px, ${spotlightSize}`;
        window.addEventListener('mousemove', e => updateSpotlight(e));
        function updateSpotlight(e) {
            spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
        }
    });

Snippet:

window.addEventListener("DOMContentLoaded", () => {
  const spotlight = document.querySelector('.spotlight');
  let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
  spotlight.style.backgroundImage = `radial-gradient(circle at ${window.innerWidth/2}px ${window.innerHeight/2}px, ${spotlightSize}`;
  window.addEventListener('mousemove', e => updateSpotlight(e));

  function updateSpotlight(e) {
    spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
  }
});

.spotlight {
  position: fixed;
  width: 100%;
  height: 100%;
  pointer-events: none;
  background-image: radial-gradient(circle, transparent 160px, rgba(0, 0, 0, 0) 200px);
}

<div class="spotlight"></div>

To absolutely position the spotlight on mobile screen you can do:

//Attach event listener if min-width is greater than or equal to 800px
if (matchMedia('(min-width: 800px)')) {
  window.addEventListener("DOMContentLoaded", () => {
    const spotlight = document.querySelector('.spotlight');
    let spotlightSize = 'transparent 160px, rgba(0, 0, 0, 0.85) 200px)';
    spotlight.style.backgroundImage = `radial-gradient(circle at ${window.innerWidth/2}px ${window.innerHeight/2}px, ${spotlightSize}`;
    window.addEventListener('mousemove', e => updateSpotlight(e));

    function updateSpotlight(e) {
      spotlight.style.backgroundImage = `radial-gradient(circle at ${e.pageX / window.innerWidth * 100}% ${e.pageY / window.innerHeight * 100}%, ${spotlightSize}`;
    }
  });
}

.spotlight {
  position: absolute;
}

@media screen and (min-width: 800px) {
  .spotlight {
    position: fixed;
    width: 100%;
    height: 100%;
    pointer-events: none;
    background-image: radial-gradient(circle, transparent 160px, rgba(0, 0, 0, 0) 200px);
  }
}

<div class="spotlight"></div>

Answered By - TechySharnav