SVG 선을 점선으로 만들되, 점선 한 칸의 길이를 선 전체 길이와 같게 합니다(stroke-dasharray). 그 점선을 전체 길이만큼 밀어 두었다가(stroke-dashoffset) 0으로 되돌리면, 선이 그려지는 것처럼 보입니다. 선의 전체 길이는 요소마다 --len으로 넣습니다.

애니메이션 속성

stroke-dashoffset

렌더링 비용

Paint