SMIL example

HTML

<svg>
    <path style="stroke: #2c3e50; stroke-dasharray:100; stroke-dashoffset:820; stroke-width:18; fill:transparent" d="M150,150 m0,-130 a 190,130 80 0,1 0,260 a 130,130 0 0,1 0,-200">
      <animate attributeName="stroke-dashoffset" dur="6s" to="-820" repeatCount="indefinite"/>
    </path>
  </svg>

CSS

html,body,svg{
    margin:0;
    width:1920000px;
    height:1080px;
}
svg{
    background-color:#bcefd1;
}

path{
    fill:none;
}
.normal{
    stroke:black;
    stroke-width:2;
    marker-start:url(#infinityStart);
    marker-end:url(#infinityEnd);
    stroke-linecap:round;
}
.dotted{
    stroke:orange;
    stroke-width:1;
    stroke-dasharray:0, 5, 1;
    stroke-linecap:round;
}