css how to animate svg

css로 웨이브를 만든 예제를 보고 svg를 이용한 애니메이션에 관심을 가지게 되었다. 어제는 svg 색을 바꾸는 정도로만 코드를 바꿨으나 오늘은 어떻게 svg를 사용해서 애니메이션을 만드는지 알아보려고 한다.

아래 영상을 참고하여 svg로 애니메이션 만드는 방식을 익혔다. 아주 간단한 예제이지만 svg 애니메이션을 어떤식으로 만드는지 단번에 이해할 수 있는 영상이었다.
svg를 이용한 간단한 애니메이션 설명 영상

svg로 애니메이션 효과 주기
svg파일에서 stroke, fill 등 수정이 가능함

svg파일 안에 태그를 이용하여 css에서 태그선택자 수정하는 것과 같이 동일하게 원하는 방식으로 수정을 한다.

테두리 그리기, 내용 채우기 등등 다양한 애니메이션이 가능하고 더 자세한 내용은 mdn을 참고하면 될 것 같음