소개

한 땀 한 땀 수작업으로 작업한 SVG Path 애니메이션. 고됐지만 단어가 하나씩 완성될 때마다 올라오는 뿌듯함도 있었음.

사용 기술

글자는 SVG Path를 사용해 벡터 형태의 선으로 그렸고 애니메이션은 Framer Motion을 사용.

https://www.w3schools.com/graphics/svg_path.asp

방법

SVG code의 기본 구조

<svg height="210" width="400" xmlns="http://www.w3.org/2000/svg">
  <path d="M150 5 L75 200 L225 200 Z"
  style="fill:none;stroke:green;stroke-width:3" />
</svg>

<svg> 태그로 감싸여 있음
width와 height 속성으로 이미지(캔버스) 사이즈를 정할 수 있음
- xy 좌표 값은 캔버스 좌측 상단이 0임
- x는 우측으로 갈수록 숫자가 커지고 y는 하단으로 갈수록 숫자가 커짐.
xmlns 속성은 xml 파생 언어인 svg를 위해 namespace를 연결하는 부분임 (w3에서 사용하는 주소 복붙)
루트 태그(<svg>) 안에서 다양한 svg 요소를 사용할 수 있음 (circle, rectangle, line, path, fill 등 - 요소마다 사용하는 속성이 다름)
https://www.w3schools.com/graphics/svg_inhtml.asp 참조

SVG Path의 d 속성

<path d="M150 5 L75 200 L225 200 Z"
  style="fill:none;stroke:green;stroke-width:3" />

경로를 정의하는 필수 속성으로 명령어 + 좌표의 형태를 띄고 있음. 예시: M(명령어) + 150 5(xy 좌표)
명령어 정의
- M : moveto (한 지점에서 다른 지점으로 움직여라)
- L : lineto (직선을 그려라)
- H : horizontal lineto (수평선을 그려라)
- V : vertical lineto (수직선을 그려라)
- C : curveto (커브선을 그려라 - 3차 베지에 곡선)
- S : smooth curveto (부드러운 커브선을 그려라)
- Q : quadratic Bézier curve (2차 베지에 곡선을 그려라)
- T : smooth quadratic Bézier curve (부드러운 2차 베지에 곡선을 그려라)
- A : elliptical Arc (타원형 곡선을 그려라)
- Z : closepath (경로 닫기)
d="M150 5 L75 200 L225 200 Z"
- x 좌표 150와 y 좌표 5가 시작점(M)
- M150 5 L75 200 : 시작점(150 5)에서 75 200로 직선(L) 그림
- L225 200 : 75 200에서 225 200으로 직선(L) 그림
- Z : 225 200에서 시작점(150 5)으로 경로 닫음(Z)
- 이렇게 삼각형이 그려짐 :
d="M 300,20 L 220,20 M 260,20 L 260,120"
- M 300,20 L 220,20 : 300 20에서 시작(M)하여 220 20으로 직선(L)
- M 260,20 L 260,120 : 260 20에서 시작(M)하여 260 120으로 직선(L)
- 시작점과 연결할 필요가 없기 때문에 Z를 사용하지 않음
- T가 그려짐 :
d="M 190,185 C 190,170 180,160 160,160 C 140,160 130,170 130,185 L 130,245 C 130,260 140,270 160,270 C 180,270 190,260 190,245 L 190,185 M 175,250 L 200,275"
- 제일 어려웠던 Q (사실 R이 더 어려움) :
- O 부분과 , 부분으로 나눌 수 있음
- , 부분 : M 175,250 L 200,275
- O 부분 : M 190,185 C 190,170 180,160 160,160 C 140,160 130,170 130,185 L 130,245 C 130,260 140,270 160,270 C 180,270 190,260 190,245 L 190,185
- O는 다시 4 부분으로 나눌 수 있음: 위 곡선 + 왼쪽 직선 + 아래 곡선 + 오른쪽 직선
  - 위 곡선 : M 190,185 C 190,170 180,160 160,160 C 140,160 130,170 130,185
  - 왼쪽 직선 : L 130,245
  - 아래 곡선 : C 130,260 140,270 160,270 C 180,270 190,260 190,245
  - 오른쪽 직선 : L 190,185
- C는 3차 베지에 곡선을 그려줌
- 한 번에 사용되는 좌표는 4개임
  - 예시) M 190,185 C 190,170 180,160 160,160
    - P0 : 시작점 190 185
    - P1 : 첫 번째 제어점 190 170
    - P2 : 두 번째 제어점 180 160
    - P3 : 끝점 160 160
- 제어점들은 실제 곡선의 좌표가 아닌 곡선의 기울기와 휘어짐 방향을 조절
  - 이전 끝점을 이어받아 반대쪽 곡선을 그려주면 위 곡선이 완성됨 (C 140,160 130,170 130,185)

Motion 넣어주기

<motion.svg
      width="800"
      height="500"
      viewBox="0 0 800 500"
      initial="hidden"
      animate="visible"
      style={image}
      xmlns="http://www.w3.org/2000/svg"
      role="img"
      aria-label="The Quiet Corner animated title"
    > 
     <motion.path
        d="M 300,20 L 220,20 M 260,20 L 260,120"
        stroke="#FF5342"
        variants={draw}
        custom={2}
        style={shape}
      />
  ...

기본 svg와 비슷하나 추가 속성이 있음
- https://motion.dev/docs/react-svg-animation 참조
variants 속성으로 애니메이션 속도, 반복 횟수, 투명도 등을 조절할 수 있음
애니메이션의 경우 시작점부터 끝점까지 설정한 순서가 그림을 그리는 순서임

마무리

미리 만든 이미지에 좌표를 대입하는 게 아니라 점 하나하나 찍어가며 만들어서 생각보다 힘들었다. 같은 글자를 반복해서 쓸 때도 옆 글자 크기를 조금만 틀리게 설정하면 이전 넓이/높이 값을 재사용할 수 없어서 처음부터 다시 해야 했다. 그래도 완성하고 나니 뿌듯하긴 한데, 블로그 개편을 생각 중이라 곧 메인에서 내리게 될 것 같다.

( ´_>`)

[SVG Path Animation] SVG로 글씨 쓰기 feat. Framer Motion