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

body{
    width: 100%;
    height: 100%;
    background-color: white;
}

#logo{
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%,-50%);
}


#logo path:nth-child(1){
    stroke-dasharray: 282px;
    stroke-dashoffset: 282px;
    animation: line-anim 3s ease forwards;
}
#logo path:nth-child(2){
    stroke-dasharray: 138px;
    stroke-dashoffset: 138px;
    animation: line-anim 3s ease forwards;
}
#logo path:nth-child(3){
    stroke-dasharray: 182px;
    stroke-dashoffset: 182px;
    animation: line-anim 3s ease forwards;
}
#logo path:nth-child(4){
    stroke-dasharray: 51px;
    stroke-dashoffset: 51px;
    animation: line-anim 3s ease forwards;
}
#logo path:nth-child(5){
    stroke-dasharray: 71px;
    stroke-dashoffset: 71px;
    animation: line-anim 3s ease forwards;
}
#logo path:nth-child(6){
    stroke-dasharray: 2px;
    stroke-dashoffset: 2px;
    animation: line-anim 3s ease forwards;
}
#logo path:nth-child(7){
    stroke-dasharray: 129px;
    stroke-dashoffset: 129px;
    animation: line-anim 3s ease forwards;
}
#logo path:nth-child(8){
    stroke-dasharray: 99px;
    stroke-dashoffset: 99px;
    animation: line-anim 3s ease forwards;
}

@keyframes line-anim {
    to{
        stroke-dashoffset: 0;
    }
}