svg line with dots animation

svg line with dots animation

by Ayyappan Sakthivadivel

HTML

<div></div>

CSS

div {
  position: relative;
  width: 180px;
  height: 55px;
  background: black;
  overflow: hidden;
  font-size:16px;
}
div + div {
  transform: rotate(45deg);
  transform-origin: left bottom;
}

div::before {
  content: '• • • • • • • • • • • • • • • • • • •';
  position: absolute;
  color: red;
  left: 0;
  top: 20px; 
}
div::after {
  content: '• • •';
  position: absolute;
  color: white;
  left: 2px;
  top: 20px;
  width: 40px;
  transform: translateX(-100%);
  animation: anim 2s steps(24) infinite;  
}

@keyframes anim {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(190px); }
}

@keyframes anim2 {
  100% { transform: translateX(-100%); }
  0%   { transform: translateX(190px); }
}