참고한 사이트: https://www.fl-ex.co.kr/
웹사이트를 구경하다가 스크롤에 맞춰서 라인이 생기는게 너무 멋있었다.
svg로 path를만들기 위해 우선 일러스트레이터로 패스를 그렸다.
그린 패스의 앵커포인트 위치를 순서대로 정리하고 그 사이에 있는 핸들의 끝점위치를 찍어 작성했다.
처음 점좌표는 시작점이라서 앞에 M을 붙이고 그 다음으로 오는 좌표에 커브라는 뜻의 C를 붙이고 좌표 3개를 적은다음 반복하면 된당
M시작앵커포인트 C핸들 핸들 앵커포인트 C핸들 핸들 앵커포인트 ... 이런식
M0,168 C12,144 80,82 191,76 C361,67 401,224 258,367 C151,473 101,441 93,420 C85,400 109,348 234,322 C407,286 408,342 412,429 C417,507 463,573 595,554
https://codepen.io/ysuwjwgl-the-styleful/pen/GgRRXVo
**아래는 코드펜에서 스크롤값이 작아지기 때문에 end:"top -120px"로 수정해뒀다.
실제로는 웹 사이트 높이에 맞게 넣어야 이쁜것같다.
UX/UI