

.line {
    animation-duration: 4s;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}

#line1 {
    animation-name: line1-animation;
    animation-delay: .2s;
}

#line2 {
    animation-name: line2-animation;
    animation-delay: 0.3s;
}

#line3 {
    animation-name: line3-animation;
    animation-delay: 0.4s;
}

@keyframes line3-animation {
    0%, 5% { d: path('M17.5,17.5 C17.5,17.5 349.726,17.5 412.377,17.5'); }
    8% { d: path('M17.5,17.5 C17.5,17.5 250,17.5 300,17.5'); }
    11% { d: path('M17.5,17.5 C17.5,17.5 150,17.5 200,17.5'); }
    14% { d: path('M17.5,17.5 C17.5,17.5 50,17.5 80,17.5'); }
    17%, 75% { d: path('M17.5,17.5 C17.5,17.5 17.5,17.5 17.5,17.5'); }
    78% { d: path('M17.5,17.5 C17.5,17.5 50,17.5 80,17.5'); }
    81% { d: path('M17.5,17.5 C17.5,17.5 150,17.5 200,17.5'); }
    84% { d: path('M17.5,17.5 C17.5,17.5 250,17.5 300,17.5'); }
    87%, 100% { d: path('M17.5,17.5 C17.5,17.5 349.726,17.5 412.377,17.5'); }
}

@keyframes line2-animation {
    0%, 17% { d: path('M17.5,17.5 C17.5,17.5 370.824,17.5 417.444,17.5'); }
    20% { d: path('M17.5,17.5 C17.5,17.5 250,17.5 300,17.5'); }
    23% { d: path('M17.5,17.5 C17.5,17.5 150,17.5 200,17.5'); }
    26% { d: path('M17.5,17.5 C17.5,17.5 50,17.5 80,17.5'); }
    29%, 65% { d: path('M17.5,17.5 C17.5,17.5 17.5,17.5 17.5,17.5'); }
    68% { d: path('M17.5,17.5 C17.5,17.5 50,17.5 80,17.5'); }
    71% { d: path('M17.5,17.5 C17.5,17.5 150,17.5 200,17.5'); }
    74% { d: path('M17.5,17.5 C17.5,17.5 250,17.5 300,17.5'); }
    77%, 100% { d: path('M17.5,17.5 C17.5,17.5 370.824,17.5 417.444,17.5'); }
}

@keyframes line1-animation {
    0%, 29% { d: path('M17.5,17.5 C17.5,17.5 386,17.5 419.995,17.5'); }
    32% { d: path('M17.5,17.5 C17.5,17.5 250,17.5 300,17.5'); }
    35% { d: path('M17.5,17.5 C17.5,17.5 150,17.5 200,17.5'); }
    38% { d: path('M17.5,17.5 C17.5,17.5 50,17.5 80,17.5'); }
    41%, 55% { d: path('M17.5,17.5 C17.5,17.5 17.5,17.5 17.5,17.5'); }
    58% { d: path('M17.5,17.5 C17.5,17.5 50,17.5 80,17.5'); }
    61% { d: path('M17.5,17.5 C17.5,17.5 150,17.5 200,17.5'); }
    64% { d: path('M17.5,17.5 C17.5,17.5 250,17.5 300,17.5'); }
    67%, 100% { d: path('M17.5,17.5 C17.5,17.5 386,17.5 419.995,17.5'); }
}