svg path코드 해석해보기

 

border 애니메이션을 주기 위해서 일러스트에서 path작업하고 export를 하고 나서

스크립트로 요것들을 좀 변경해주려고 보니 내가 만들었지만 코드가 너무 복잡함

 

숫자만 보면 울렁이면서 가슴만 부여잡고 있을 수는 없기에

구글링을 좀 해봤더니 아래 사이트를 발견할 수 있었음!!

 

 

https://github.com/mathieudutour/svg-path-visualizer

GitHub - mathieudutour/svg-path-visualizer: Enter a SVG path data to visualize it and discover all its different commands

 

 

직접 그린 path로 테스트를 해봤는데,

만든 코드를 입력창에 붙여넣으면

어떤 숫자가 어떤 걸 의미하는지 한 눈에 알 수 있어서 좋음!

 

 

 

 

https://svg-path-visualizer.netlify.app/#M75.89%2C288.03S-14.69%2C269.07%2C2.73%2C192.29c13.54-59.7%2C90.56-66.61%2C151.23-51.5s112.5%2C43.64%2C140.74%2C58.4c25.9%2C13.54%2C79.6%2C37.32%2C121.93%2C47.64s94.08%2C19.95%2C144-2.06c44.69-19.71%2C58.39-59.94%2C62.75-79.57%2C6.71-30.21%2C6.97-44.92%2C2.06-56.79-7.87-19.06-28.52-19.87-37.81-10.06s-5.81%2C30.45%2C10.19%2C38.71%2C41.35%2C7.94%2C64.6-1.07c37.85-14.67%2C62.89-78.93%2C18.04-135.69

SVG Path Visualizer

 

 

만들어주신 Mathieu님께 Thank you! 인사를...

너무 마음에 들어서 별도 하나 눌러봄~~ ㅎㅎㅎㅎ;;;