Circle follow Mouse

Custom code
1

Hello! reposting here a reply on a thread that might have gone silent

I currently have this: Page 4 from ‘Yasha Wallin’ by Dario Buzzini

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

  .follower {
    position: absolute;
    width: 600px;
    height: 600px;
    border-radius: 50%;
    transform: translate(-50%, -50%);
    pointer-events: none;
    transition: transform 0.3s ease-in-out;
    backdrop-filter: invert(100%);


  }

  .follower.delayed {
    transition-delay: 50s;
  }
</style>
<title>Interactive Gradient Background</title>
</head>

<div class="follower"></div>
<script>
    const follower = document.querySelector('.follower');
  const delayedClass = 'delayed';

  document.addEventListener('mousemove', (e) => {
    const mouseX = e.clientX;
    const mouseY = e.clientY;

    // Apply a slight delay to the follower's animation
    follower.classList.add(delayedClass);
    
     // Calculate an offset to make the circle closer to the cursor
    const offsetX = -450; // Adjust this value to control the offset
    const offsetY = -200; // Adjust this value to control the offset

   
    // Update the follower's position with the offset
    follower.style.left = mouseX + offsetX + 'px';
    follower.style.top = mouseY + offsetY + 'px';
  });

  document.addEventListener('mouseenter', () => {
    // Show the follower when the mouse enters the page
    follower.style.opacity = '1';
  });

  document.addEventListener('mouseleave', () => {
    // Hide the follower when the mouse leaves the page
    follower.style.opacity = '0';
  });
</script>

but i would like to have a ‘screen’ effect using ``` (mix-blend-mode: screen;) on the circle and have the circle itself being a gradiend with the idea of resulting in this effect i prototyped in figma: ‘Yasha Wallin’ from ‘Yasha Wallin’ by Dario Buzzini

Can anybody help :slight_smile:

Thanks!