SVG를 이용한 Animation 만들기

이 게시물은 SVG를 이용한 Animation 생성 방법에 대해 설명합니다.

목표 1: animation1

• Figma를 통해 도형을 만들고 색상을 지정합니다.
• SVG 코드에서 각 객체에 ID를 부여하여 CSS를 작성합니다.
• CSS로 애니메이션 효과를 추가하고 도형의 색상을 클릭 시 변경할 수 있도록 스크립트를 작성합니다.

목표 2: animation2

• Figma에서 #skeleton을 준비하고 애니메이션을 추가합니다.
• #bolt에 해당하는 객체를 설정하고 애니메이션에 지연을 추가하여 순차적으로 동작하도록 만듭니다.

이와 같은 방식으로 SVG 애니메이션을 완성할 수 있습니다.