<svg width="300px" height="175px" version="1.1">
    <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="path"></path>
  <path fill="transparent" stroke="#FF2851" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="line2"></path>
  <path fill="transparent" stroke="#000000" stroke-width="4" d="M10 80 Q 77.5 10, 145 80 T 280 80" class="line1"></path>
</svg>
svg {
  width: 300px;
  display: block;
  position: absolute;
  
  .line1 {
    stroke-dasharray: 340;
    stroke-dashoffset: 40;
    animation: dash 1.5s linear alternate infinite;
  }

  .line2 {
    stroke-dasharray: 320;
    stroke-dashoffset: 320;
    animation: dash2 1.5s linear alternate infinite;
  }

  @keyframes dash {
    from {
      stroke-dashoffset: 360;
    }
    to {
      stroke-dashoffset: 40;
    }
  }

  @keyframes dash2 {
    from {
      stroke-dashoffset: 280;
    }
    to {
      stroke-dashoffset: -40;
    }
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.