CSS wavy line
<div id="curve"></div>

/** https://css-tricks.com/forums/topic/how-to-make-curve-line/
**/

#curve{
            margin:0 auto;
            position:relative;
            width:100%;
            height:100%;
            }
    
            #curve:after{
            content:"";
            position:absolute;
            width:50%;
            height:100px;
            border-top:1px solid red;
            border-radius:50%;
            left:50%;
            top:10%;
            }
 #curve:before{
            content:"";
            position:absolute;
            width:50%;
            height:100px;
            border-bottom:1px solid red;
            border-radius:50%;
            left:.2%;
            margin-top:-1%;
            }

-webkit-animation: AnimationName 30s ease infinite;
-moz-animation: AnimationName 30s ease infinite;
animation: AnimationName 30s ease infinite;

@-webkit-keyframes AnimationName {
    0%{background-position:43% 0%}
    50%{background-position:58% 100%}
    100%{background-position:43% 0%}
}
@-moz-keyframes AnimationName {
    0%{background-position:43% 0%}
    50%{background-position:58% 100%}
    100%{background-position:43% 0%}
}
@keyframes AnimationName { 
    0%{background-position:43% 0%}
    50%{background-position:58% 100%}
    100%{background-position:43% 0%}
}