Bottom Half Hidden Text Revealer on Mouse Over in CSS

  

    
    
  
    
  
    
        * {
            padding: 0;
            margin: 0;
            box-sizing: border-box;
            overflow: hidden;
            background-color: black;
        }
          
        .upper_text,
        .pointer {
            position: fixed;
            top: 40vh;
            left: 40vw;
            width: 350px;
            color: chartreuse;
            font-size: 50px;
            cursor: all-scroll;
        }
          
        .upper_text {
            clip-path: polygon(0% 0%, 
                100% 0%, 100% 50%, 0% 50%);
        }
    

  

    
        Geeks For Geeks
    
  
    
        Geeks For Geeks
    
    
        document.addEventListener(‘mousemove’, (e) => {
            const pointer = document.querySelector(‘.pointer’);
              
            pointer.style.clipPath = 
            `circle(30px at ${e.offsetX}px ${e.offsetY}px)`;
        });