.cursor {
    position: fixed;
    width: 20px;
    height: 20px;
    border-top: 5px solid #47ebf0;
    border-left: 5px solid #47ebf0;
    transform-origin: top;
    transform: translate(-1px,5px) rotate(15deg) scale(0);
    transition: transform 0.1s;
    pointer-events: none;
    animation: animate 5s linear infinite;
    
}
body{
    max-height: 100vh;
    background: #222;
    background-image: linear-gradient(to right, #333 1px, transparent 1px),
                      linear-gradient(to bottom, #333 1px, transparent 1px);
    background-size: 40px 40px;    
    cursor: none;            
}
.cursor:before {
    content: '';
    position: absolute;
    left: -2.5px;
    width: 5px;
    height: 30px;
    background: #47ebf0;
    transform-origin: top;
    transform: rotate(315deg);
    
}
body:hover .cursor{
    transform: translate(-1px,5px) rotate(15deg) scale(1);
}
@keyframes animate {
    0%{
        filter: drop-shadow(0 0 5px #47ebf0) drop-shadow(0 0 15px #47ebf0) drop-shadow(0 0 30px #47ebf0) 
        hue-rotate(0deg);
    }
    100%{
        filter: drop-shadow(0 0 5px #47ebf0) drop-shadow(0 0 15px #47ebf0) drop-shadow(0 0 30px #47ebf0) 
        hue-rotate(360deg);
    }
    
}