HTML/CSS - Full page navigation Online Editor and JavaScript Compiler

html

<!DOCTYPE html>
<html>
    <head>
        <title>Page Title</title>
         <script src="https://kit.fontawesome.com/cbcc2cb107.js" crossorigin="anonymous"></script>
    </head>
    <body>
    
   <h2>FULL PAGE NAVIGATION </h2>
   <h3>Thanks For Watching</h3>
   
 <input type="checkbox" id="active">
<label for="active" class="menu-btn"><i class="fas fa-bars"></i></label>
    
        <div class="wrapper">
<ul class="menu">
    <li><a href="#">Home</a></li>
    <li><a href="#">Products</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Gallery</a></li>
    <li><a href="#">Contact</a></li>
    <li><a href="https://youtube.com/@CoderHimani320?si=hTQkFZfoFMym_5L-">Youtube</a></li>
</ul>
            
        </div>
    </body>
</html>

css

*{
    margin:0;
    padding:0;
    box-sizing:border-box;
    font-family:arial;
}
.wrapper{
    position:fixed;
    top:0;
    left:0;
    height:100%;
    width:100%; 
   clip-path:circle(25px at calc(100% - 45px)45px); background:linear-gradient(-135deg,black,cyan);  
   transition:all 0.3s ease-in-out;
}
#active:checked ~.wrapper{
    clip-path:circle(75%);
}
.menu-btn{
position:absolute ;
right:20px;
top:20px;
z-index:2;
text-align:center;
line-height:50px;
height:50px;

BROWSER

Console