<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>
</svg>
svg {
  width: 300px;
  display: block;
  position: absolute;
  
  .path {
    stroke-dasharray: 320;
    stroke-dashoffset: 0;
    animation: dash 1s linear;
  }
  
  @keyframes dash {
    from {
      stroke-dashoffset: 320;
    }
    to {
      stroke-dashoffset: 0;
    }
  }
}
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.