polyline dotted lines animated

polyline dotted lines animated

by Ayyappan Sakthivadivel

HTML

<svg viewBox="0 0 300 200">
<polyline class="path-farward" stroke="#5184AF" points="106.56 55.9 162.6 55.9 162.6 191.69 217.15 191.69" />
</svg>

CSS

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

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

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

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