<link href="https://fonts.googleapis.com/css?family=BenchNine&display=swap" rel="stylesheet">
    <h1>Insert Snow-colored Text</h1>
<h2>Lorem Ipsum ... </h2>

<div class="cursor"></div>

 <div class="animation-area">
        <ul class="box-area">
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
            <li></li>
        </ul>
    </div> 

<div class="loader5"></div>

<div class="snow">
        <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1024 1536" preserveAspectRatio="xMidYMax slice">
            <g fill="#FFF" fill-opacity=".15" transform="translate(55 42)">
               <g id="snow-bottom-layer">
                  <ellipse cx="6" cy="1009.5" rx="6" ry="5.5"/>
                  <ellipse cx="138" cy="1110.5" rx="6" ry="5.5"/>
                  <ellipse cx="398" cy="1055.5" rx="6" ry="5.5"/>
                  <ellipse cx="719" cy="1284.5" rx="6" ry="5.5"/>
                  <ellipse cx="760" cy="1155.5" rx="6" ry="5.5"/>
                  <ellipse cx="635" cy="1459.5" rx="6" ry="5.5"/>
                  <ellipse cx="478" cy="1335.5" rx="6" ry="5.5"/>
                  <ellipse cx="322" cy="1414.5" rx="6" ry="5.5"/>
                  <ellipse cx="247" cy="1234.5" rx="6" ry="5.5"/>
                  <ellipse cx="154" cy="1425.5" rx="6" ry="5.5"/>
                  <ellipse cx="731" cy="773.5" rx="6" ry="5.5"/>
                  <ellipse cx="599" cy="874.5" rx="6" ry="5.5"/>
                  <ellipse cx="339" cy="819.5" rx="6" ry="5.5"/>
                  <ellipse cx="239" cy="1004.5" rx="6" ry="5.5"/>
                  <ellipse cx="113" cy="863.5" rx="6" ry="5.5"/>
                  <ellipse cx="102" cy="1223.5" rx="6" ry="5.5"/>
                  <ellipse cx="395" cy="1155.5" rx="6" ry="5.5"/>
                  <ellipse cx="826" cy="943.5" rx="6" ry="5.5"/>
                  <ellipse cx="626" cy="1054.5" rx="6" ry="5.5"/>
                  <ellipse cx="887" cy="1366.5" rx="6" ry="5.5"/>
                  <ellipse cx="6" cy="241.5" rx="6" ry="5.5"/>
                  <ellipse cx="138" cy="342.5" rx="6" ry="5.5"/>
                  <ellipse cx="398" cy="287.5" rx="6" ry="5.5"/>
                  <ellipse cx="719" cy="516.5" rx="6" ry="5.5"/>
                  <ellipse cx="760" cy="387.5" rx="6" ry="5.5"/>
                  <ellipse cx="635" cy="691.5" rx="6" ry="5.5"/>
                  <ellipse cx="478" cy="567.5" rx="6" ry="5.5"/>
                  <ellipse cx="322" cy="646.5" rx="6" ry="5.5"/>
                  <ellipse cx="247" cy="466.5" rx="6" ry="5.5"/>
                  <ellipse cx="154" cy="657.5" rx="6" ry="5.5"/>
                  <ellipse cx="731" cy="5.5" rx="6" ry="5.5"/>
                  <ellipse cx="599" cy="106.5" rx="6" ry="5.5"/>
                  <ellipse cx="339" cy="51.5" rx="6" ry="5.5"/>
                  <ellipse cx="239" cy="236.5" rx="6" ry="5.5"/>
                  <ellipse cx="113" cy="95.5" rx="6" ry="5.5"/>
                  <ellipse cx="102" cy="455.5" rx="6" ry="5.5"/>
                  <ellipse cx="395" cy="387.5" rx="6" ry="5.5"/>
                  <ellipse cx="826" cy="175.5" rx="6" ry="5.5"/>
                  <ellipse cx="626" cy="286.5" rx="6" ry="5.5"/>
                  <ellipse cx="887" cy="598.5" rx="6" ry="5.5"/>
               </g>
            </g>
            <g fill="#FFF" fill-opacity=".3" transform="translate(65 63)">
               <g id="snow-top-layer">
                  <circle cx="8" cy="776" r="8"/>
                  <circle cx="189" cy="925" r="8"/>
                  <circle cx="548" cy="844" r="8"/>
                  <circle cx="685" cy="1115" r="8"/>
                  <circle cx="858" cy="909" r="8"/>
                  <circle cx="874" cy="1438" r="8" transform="rotate(180 874 1438)"/>
                  <circle cx="657" cy="1256" r="8" transform="rotate(180 657 1256)"/>
                  <circle cx="443" cy="1372" r="8" transform="rotate(180 443 1372)"/>
                  <circle cx="339" cy="1107" r="8" transform="rotate(180 339 1107)"/>
                  <circle cx="24" cy="1305" r="8" transform="rotate(180 24 1305)"/>
                  <circle cx="8" cy="8" r="8"/>
                  <circle cx="189" cy="157" r="8"/>
                  <circle cx="548" cy="76" r="8"/>
                  <circle cx="685" cy="347" r="8"/>
                  <circle cx="858" cy="141" r="8"/>
                  <circle cx="874" cy="670" r="8" transform="rotate(180 874 670)"/>
                  <circle cx="657" cy="488" r="8" transform="rotate(180 657 488)"/>
                  <circle cx="443" cy="604" r="8" transform="rotate(180 443 604)"/>
                  <circle cx="339" cy="339" r="8" transform="rotate(180 339 339)"/>
                  <circle cx="24" cy="537" r="8" transform="rotate(180 24 537)"/>
               </g>
            </g>
        </svg>
    </div>

<p>Behold,
The bottom of the page!
</p>

body {
    background: rgb(2,0,36);
    background: linear-gradient(180deg, rgba(2,0,36,1) 12%, rgba(9,9,121,1) 60%, rgba(0,212,255,1) 100%);
    background-repeat: no-repeat;
    font-family: 'BenchNine', sans-serif;
    text-align: center;
}

h1 {
    /* color: white; */
    background: rgb(216,216,254);
    background: linear-gradient(180deg, rgba(216,216,254,1) 0%, rgba(49,52,112,1) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}
h2 {
  background: rgb(40,86,148);
background: linear-gradient(90deg, rgba(40,86,148,1) 0%, rgba(31,58,111,1) 50%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
.cursor {
    width: 20px;
    height: 20px;
    border: 1px solid teal;
    border-radius: 50%;
    position: absolute;
    transition-duration: 200ms;
    transition-timing-function: ease-out;
    animation: cursorAnim .5s infinite alternate;
}
cursor::after {
    content: "";
    width: 20px;
    height: 20px;
    position: absolute;
    border: 4px solid teal;
    border-radius: 50%;
    opacity: .5;
    top: -8px;
    left: -8px;
    animation: cursorAnim2;
}
 @keyframes cursorAnim {
    from {
        transform: scale(1);
    } to {
        transform: scale(.7);
    }
}
@keyframes cursorAnim3 {
    0% {
        transform: scale(1);
    } 
    50% {
        transform: scale(3);
    }
    100% {
        transform: scale(1);
        opacity: 0;
    }
}
.expand {
    animation: cursorAnim3 .5s forwards;
    border: 1px solid plum;
}

 .animation-area {
        width: 100%;
        height: 100vh;
    }
    
    .box-area {
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        overflow: hidden;
    }
    
    .box-area li {
        position: absolute;
        display: ruby-base;
        list-style: none;
        width: 25px;
        height: 25px;
        background: rgba(255,255,255,0.2);
        animation: animate 20s linear infinite;
        bottom: -150px;
    }
    
    .box-area li:nth-child(1) {
        left: 86%;
        width: 80px;
        height: 80px;
        animation-delay: 0s;
    }
    
    .box-area li:nth-child(2) {
        left: 12%;
        width: 30px;
        height: 30px;
        animation-delay: 1.5s;
        animation-duration: 10s;
    }
    
    .box-area li:nth-child(3) {
        left: 70%;
        width: 100px;
        height: 100px;
        animation-delay: 5.5s;
    }
    
    .box-area li:nth-child(4) {
        left: 70%;
        width: 150px;
        height: 150px;
        animation-delay: 0s;
        animation-duration: 15s;
    }
    
    .box-area li:nth-child(5) {
        left: 65%;
        width: 40px;
        height: 40px;
        animation-delay: 0s;
    }
    
    .box-area li:nth-child(6) {
        left: 15%;
        width: 110px;
        height: 110px;
        animation-delay: 3.5s;
    }
    
    @keyframes animate {
        0% {
            transform: translateY(0) rotate(0deg);
            opacity: 1;
        }
        100% {
            transform: translateY(-800px) rotate(360deg);
        }
    }

.loader5 {
  border: 24px solid rgb(84, 123, 12);
  border-radius: 25%;
  border-top: 12px solid rgb(98, 141, 19);
  border-bottom: 16px solid rgb(119, 167, 30);
  width: 80px;
  height: 80px;
  -webkit-animation: spin 4s linear infinite; 
  /* safari */
  animation: spin 3s linear infinite;
  text-align: center;
}

/* safari */
@-webkit-keyframes spin {
  0% { -webkit-transform: rotate(0deg); }
  50% { -webkit-transform: rotate(180deg); }
  100% { -webkit-transform: rotate(360deg); }
}

.snow {
    position: absolute;
    min-width: 100vw;
    min-height: 100vh;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    }
    
    .snow .svg {
    position: absolute;
    width: 100%;
    height: 100%;
    }
    
    #snow-top-layer {
    will-change: transform;
    transform: translateY(-768px);
    animation: fall 22.5s infinite linear;
    }
    
    #snow-bottom-layer {
    will-change: transform;
    transform: translateY(-768px);
    animation: fall 45s infinite linear;
    }
    
    @keyframes fall {
    
    100% {
       transform: translateY(0);
    }
    
    } 

p {
  background: rgb(72,85,99);
background: linear-gradient(90deg, rgba(72,85,99,1) 0%, rgba(41,50,60,1) 50%);
  -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;

}

const cursor = document.querySelector('.cursor');

document.addEventListener('mousemove', e => {
    cursor.setAttribute("style", "top: "+(e.pageY - 10)+"px; left: "+(e.pageX - 10)+"px");
})

document.addEventListener('click', () => {
    cursor.classList.add("expand");

    setTimeout(() => {
        cursor.classList.remove("expand");
    }, 500)
})