svg animated lines

straight line animation

svg #path {
    
    
  stroke-dashoffset: 1000;
  animation: dash 4s linear forwards;
}
@keyframes dash {
    
    
  from {
    
    
    stroke-dashoffset: 1000;
  }

  to {
    
    
    stroke-dashoffset: 0;
  }
}

dotted line animation

curPath.setAttribute('stroke', '#379FFE')
curPath.setAttribute('stroke-width', '3')
curPath.setAttribute('fill', 'none')
// 虚线长度空白长度
curPath.setAttribute('stroke-dasharray', '6 4')
let num = 0
timer = setInterval(function () {
    
    
	num++
	// 正负可以控制线条流动方向
    curPath.setAttribute('stroke-dashoffset', -num)
}, 100)