Como animar linhas de um SVG só com CSS

Que tal adicionar movimento para os contornos de um SVG usando só CSS? Neste vídeo você vai aprender como fazer isso.

Caso ainda não saiba como gerar um SVG a partir do Photoshop, aproveite que no vídeo também tem um método bem fácil de fazer.

Veja como ficou o CSS

.animate-svg {
width: 800px;
margin: 200px auto;
}

.animate-svg svg {
stroke-width: 2px;
stroke: #003366;
width: 100%;
height: 100%;
stroke-dashoffset: 1000;
stroke-dasharray: 1000;
animation: svganimation 5s ease-in-out forwards infinite;
}

@keyframes svganimation {
0% {
stroke-dashoffset: 1000;
}
50% {
stroke-dashoffset: 0;
}
100% {
stroke-dashoffset: 0;
}
}