[html]keyframe을 이용한 움직이는 svg

See the Pen svg-animation by sangmok-ye (@sangmok-ye) on CodePen.

 

 

svg-animation

...

codepen.io

 

stroke-dasharray는 path의 길이 

stroke-dashoffset이 0으로 향할수록 path가 나타남

 

js로 array와 offset을 path길이만큼 설정 후

keyframe으로 offset을 0으로 만들어

 

path가 나타나게 함

 

 

+)

array=offset일 경우 선이 완전이 생기고 난 후 바로 사라짐

offset을 *2할 경우 사라지고 생기고를 반복함