devEvan
1k
2020-12-21 10:25:42
0
484

SVG와 삼각함수로 도넛 차트 만들어보기


이번에 차트 라이브러리를 사용하지 않고 SVG를 사용하여 직접 도넛 차트를 구현할 일이 있었는데, 막상 만들어보니 삽질 요소가 꽤 많았던 것 같아요...!

애니메이션을 구현하려면 circle 엘리먼트가 아니라 호을 직접 그려야 한다는 것을 알고 간만에 삼각함수를 다시 보기도 했습니다 😅

이렇게 삽질하면서 얻은 내용들을 한번 적어서 공유해볼까 합니다

https://evan-moon.github.io/2020/12/12/draw-arc-with-svg-clippath/

2
  • 댓글 0

  • 로그인을 하시면 댓글 을 등록할 수 있습니다.