[css/jquery] keyframe을 이용하여 길따라 움직이는 svg 만들기

<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 330 524.26" class="n_course1">
            <g>
                <g id="n1">
                    <line id="n1-1" class="cls-0" x1="2.5" y1="381.5" x2="239.58" y2="521.76" />
                    <line id="n1-2" class="cls-0" x1="191.09" y1="264.05" x2="2.5" y2="381.5" />
                    <line id="n1-3" class="cls-0" x1="134.04" y1="229.59" x2="190.5" y2="263.5" />
                    <line id="n1-4" class="cls-0" x1="134.5" y1="229.5" x2="327.5" y2="113.5" />
                    <line id="n1-5" class="cls-0" x1="148.5" y1="2.5" x2="327.5" y2="113.5" />
                </g>
            </g>
        </svg>

✅html
1) 원하는 코스 일러스트 svg변환하여 가져오기 ( 한줄이 아닌 여러줄로 가져온다)
2) 각 line에 id명을 다르게 부여

.cls-0 {
    fill: none;
    stroke: #ffce46;
    stroke-linecap: round;
    stroke-linejoin: round;
    stroke-width: 14px;
}
@keyframes Cn1 {
   from {stroke-dashoffset : -500px;}
   to {stroke-dashoffset : 0px;}
}
@keyframes Cn1-1 {
    from {stroke-dashoffset : 500px;}
    to {stroke-dashoffset : 0px;}
#n1-1{stroke-dasharray: 500; stroke-dashoffset: -500;animation: 1s linear 0s forwards;}
#n1-2{stroke-dasharray: 500; stroke-dashoffset: -500;animation: 1.8s linear 0s forwards;}
#n1-3{stroke-dasharray: 500; stroke-dashoffset: -500;animation: 2s linear 0s forwards;}
#n1-4{stroke-dasharray: 500; stroke-dashoffset: -500;animation: 2s linear 2s forwards;}
#n1-5{stroke-dasharray: 500; stroke-dashoffset: -500;animation: 2s linear 1.8s forwards;}

 }

✅css
1) svg에 있던 style을 css로 빼준다
2) keyframe 명과 keyframe애니메이션을 작성한다
3) 각 길에 animation시간을 다르게하여 자연스럽게 이어지게 한다
4) jquery를 연결하기 전 animation에 keyframe명을 넣어 미리 확인

$('#btN1').click(function () {
        $('.n_course1').css('display', 'block');
        $('#n1-1,#n1-2,#n1-3,#n1-5').css('animation-name', 'Cn1');
        $('#n1-4').css('animation-name', 'Cn1-1');
        $('.n_course2,.s_course1,.s_course2,.s_course3').css('display', 'none');
        
    });

✅jquery
1) 버튼 클릭 이벤트 함수
2) 원하는 코스 display block이 되고
3) 각 코스 명에 원하는 keyframe css설정을 넣어준다
4) 다른 코스가 동시에 뜨는것을 방지하기 위해 해당 코스를 제외하고 display none 해준다

✔ 코스가 많으면 코드가 길어진다 다른 방법이 있을지 생각해볼 필요가있다..