dots animation svg

dots animation svg

by Ayyappan Sakthivadivel

HTML

<svg width="500" height="330">
  <defs>
  <path id="h_path" d="M30,20H358"/>
  </defs>
    <use class="bg" xlink:href="#h_path"/>
    <use class="move" xlink:href="#h_path"/>
</svg>

CSS

path, circle {
  stroke-width: 4px;
  fill: transparent;
}

.bg {
  stroke: black;
  stroke-dasharray: 4 12;
}

.move {
  stroke: red;
  animation: link-anim 3s infinite steps(21);
  stroke-dasharray: 4 12 4 12 4 300;
}

@keyframes link-anim {
  0% {
    stroke-dashoffset: 368;
  }
  100% {
    stroke-dashoffset: 32;
  }
}