dotted lines

dotted lines

by Ayyappan Sakthivadivel

HTML

<svg width="300px" height="200px" viewBox="0 0 300 200">
<line class="path" x1="40" x2="260" y1="100" y2="100" stroke="#5184AF" />
</svg>

CSS

.path {
  stroke-width: 2;
  stroke-dasharray: 5;
  stroke-dashoffset: 50;
  animation: dash 5s linear infinite;
  stroke-linecap:rectangle;
}

@keyframes dash {
  to {
    stroke-dashoffset: 0;
  }
}