SVG로 만드는 멋진 것들

• SVG는 웹에서 벡터 그래픽을 표현하는 강력한 도구임
• 애니메이션을 통해 SVG 요소를 더욱 매력적으로 만들 수 있음
• 마스크를 사용하여 SVG 요소의 특정 부분을 강조하거나 숨길 수 있음
• 서버 사이드 렌더링을 통해 클라이언트 측 자바스크립트 없이 TOC를 구현할 수 있음
• CSS와 SVG를 결합하여 인터랙티브한 요소를 만들 수 있음

SVG 애니메이션

• SVG는 벡터 그래픽을 웹에서 표현하는 데 사용됨
• JSX(React)로 작성된 예제 코드가 포함되어 있음
• line 또는 path를 사용하여 선을 만들고, 이를 마스크로 사용하여 애니메이션을 추가할 수 있음
• @keyframes를 사용하여 애니메이션을 정의하고, transform 속성을 통해 요소의 위치를 변경할 수 있음
• Figma나 다른 SVG 편집기에서 디자인된 부분을 활용하여 애니메이션 블록을 마스크로 처리할 수 있음

Clerk 스타일 목차

• Clerk 스타일의 목차를 Fumadocs에서 구현함
• 서버에서 목차를 렌더링하여 클라이언트 측 자바스크립트 없이 SSR과 호환되도록 함
• 절대 위치를 사용하여 요소의 정확한 위치를 알 수 없는 서버 환경에서 목차를 렌더링함
• thumb라는 애니메이션된 부분을 추가하여 활성화된 항목을 강조함
• 클라이언트에서 렌더링된 위치 정보를 활용하여 SVG를 사용해 "마스크 맵"을 구성함
• mask-image 속성을 사용하여 애니메이션된 div 블록을 마스크하여 목차의 강조된 부분을 렌더링함

Clerk의 영감을 받아 문서 사이트의 목차를 더욱 흥미롭게 구현함.