style.css

*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body{
    width: 100%;
    height: 100vh;
    background-color: rgb(22, 18, 41);
}

#logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: fill 0.3s ease forwards 3s;
}

#logo path:nth-child(1){
    stroke-dasharray: 549;
    stroke-dashoffset: 549;
    animation: anima 2s ease forwards;
}

#logo path:nth-child(2){
    stroke-dasharray: 490;
  stroke-dashoffset: 490;
  animation: anima 2s ease forwards 0.5s;
}

#logo path:nth-child(3){
    stroke-dasharray: 604;
  stroke-dashoffset: 604; 
  animation: anima 2s ease forwards 1s;   
}

#logo path:nth-child(4){
    stroke-dasharray: 227;
  stroke-dashoffset: 227;
  animation: anima 2s ease forwards 1.5s;
}

#logo path:nth-child(5){
    stroke-dasharray: 490;
  stroke-dashoffset: 490;
  animation: anima 2s ease forwards 2s;
}

@keyframes anima{
    to{
        stroke-dashoffset: 0;
    }
}

@keyframes fill{
    from{
        fill: transparent;
    }
    to{
        fill: white;
    }
}