SVG animation

며칠 전까지만해도 svg의 path를 내가 직접 계산을 해서 만드는 줄 알았다...
브랜드 사이트 리뉴얼 건으로 svg에 대해 자세히 알아봤는데,
이미지나 아이콘을 svg로 저장을 하여 html에 copy를 하면 바로 코드가 뜨는 것을 알아버렸다...
나는 똥멍청이,,,ㅠㅠ 그것도 모르고 svg만 나오면 겁부터 먹었었는데!!!

이제라도 알았으니 svg를 응용하여 animation을 적용해보자!

---

1. img를 svg코드로 가져오기

	<svg width="290" height="84" viewBox="0 0 290 84" fill="none" xmlns="http://www.w3.org/2000/svg">
       <path d="M6.15822 14.5H24.8782C31.2049 14.5 36.4049 16.0817 40.4782 19.245C44.5949 22.365 46.6532 
        26.7417 46.6532 32.375V42.06C46.6532 47.9533 44.6599 52.4167 40.6732 55.45C36.6866 58.4833 31.4432 
        60 24.9432 60H6.15822C5.68156 60 5.26989 59.8267 4.92322 59.48C4.57656 59.1333 4.40322 58.7217 
        4.40322 58.245V16.255C4.40322 15.7783 4.57656 15.3667 4.92322 15.02C5.26989 14.6733 5.68156 14.5 
        6.15822 14.5ZM20.6532 27.175V47.325H24.8782C26.3516 47.325 27.5216 46.8917 28.3882 46.025C29.2982 
        45.115 29.7532 43.7933 29.7532 42.06V32.375C29.7532 28.9083 28.1282 27.175 24.8782 27.175H20.6532ZM58.403 
        18.66C62.3897 15.4533 67.6547 13.85 74.198 13.85C80.7413 13.85 85.9847 15.475 89.928 18.725C93.9147 21.9317 
        95.908 26.46 95.908 32.31V42.45C95.908 48.3867 93.9363 52.915 89.993 56.035C86.093 59.1117 80.828 60.65 74.198 
        60.65C67.568 60.65 62.2813 59.1117 58.338 56.035C54.438 52.915 52.488 48.3867 52.488 42.45V32.31C52.488 26.4167 
        54.4597 21.8667 58.403 18.66ZM70.688 46.675C71.5547 47.5417 72.7247 47.975 74.198 47.975C75.6713 47.975 76.8413 
        47.5417 77.708 46.675C78.5747 45.8083 79.008 44.4867 79.008 42.71V31.79C79.008 30.0567 78.5747 28.7567 77.708 
        27.89C76.8413 26.98 75.6713 26.525 74.198 26.525C72.7247 26.525 71.5547 26.98 70.688 27.89C69.8213 28.7567 69.388 
        30.0567 69.388 31.79V42.71C69.388 44.4867 69.8213 45.8083 70.688 46.675ZM130.476 14.5H142.241C142.717 14.5 143.129 
        14.6733 143.476 15.02C143.822 15.3667 143.996 15.7783 143.996 16.255V58.245C143.996 58.7217 143.822 59.1333 143.476 
        59.48C143.129 59.8267 142.717 60 142.241 60H131.971C130.844 60 129.956 59.5017 129.306 58.505L118.321 41.93V58.245C118.321 
        58.7217 118.147 59.1333 117.801 59.48C117.454 59.8267 117.042 60 116.566 60H104.801C104.324 60 103.912 59.8267 103.566 
        59.48C103.219 59.1333 103.046 58.7217 103.046 58.245V16.255C103.046 15.7783 103.219 15.3667 103.566 15.02C103.912 14.6733 
        104.324 14.5 104.801 14.5H115.071C116.284 14.5 117.172 14.9983 117.736 15.995L128.721 34V16.255C128.721 15.7783 128.894 
        15.3667 129.241 15.02C129.587 14.6733 129.999 14.5 130.476 14.5ZM179.406 14.5H192.146C192.622 14.5 193.034 14.6733 193.381 
        15.02C193.727 15.3667 193.901 15.7783 193.901 16.255V42.385C193.901 48.4517 192.016 53.0233 188.246 56.1C184.476 59.1333 
        179.341 60.65 172.841 60.65C166.384 60.65 161.249 59.1333 157.436 56.1C153.666 53.0667 151.781 48.495 151.781 
        42.385V16.255C151.781 15.7783 151.954 15.3667 152.301 15.02C152.647 14.6733 153.059 14.5 153.536 14.5H166.276C166.752 
        14.5 167.164 14.6733 167.511 15.02C167.857 15.3667 168.031 15.7783 168.031 16.255V42.58C168.031 45.9167 169.634 47.585 
        172.841 47.585C176.047 47.585 177.651 45.9167 177.651 42.58V16.255C177.651 15.7783 177.824 15.3667 178.171 15.02C178.517 
        14.6733 178.929 14.5 179.406 14.5ZM201.168 14.5H239.258C239.735 14.5 240.147 14.6733 240.493 15.02C240.84 15.3667 241.013 
        15.7783 241.013 16.255V26.72C241.013 27.1967 240.84 27.6083 240.493 27.955C240.147 28.3017 239.735 28.475 239.258 
        28.475H228.468V58.245C228.468 58.7217 228.295 59.1333 227.948 59.48C227.602 59.8267 227.19 60 226.713 60H213.713C213.237 
        60 212.825 59.8267 212.478 59.48C212.132 59.1333 211.958 58.7217 211.958 58.245V28.475H201.168C200.692 28.475 200.28 28.3017 
        199.933 27.955C199.587 27.6083 199.413 27.1967 199.413 26.72V16.255C199.413 15.7783 199.587 15.3667 199.933 15.02C200.28 14.6733 
        200.692 14.5 201.168 14.5ZM246.031 28.8C246.031 24.38 247.851 20.7833 251.491 18.01C255.174 15.2367 259.984 13.85 265.921 
        13.85C271.901 13.85 276.776 15.3017 280.546 18.205C284.359 21.1083 286.266 24.1417 286.266 27.305C286.266 27.695 286.114 
        28.0417 285.811 28.345C285.551 28.605 285.248 28.735 284.901 28.735H271.901C270.904 28.735 269.994 28.3667 269.171 
        27.63C268.348 26.8933 267.243 26.525 265.856 26.525C263.776 26.525 262.736 27.1317 262.736 28.345C262.736 28.995 263.234 
        29.5367 264.231 29.97C265.271 30.4033 267.178 30.7933 269.951 31.14C276.408 31.9633 281.001 33.48 283.731 35.69C286.504 
        37.8567 287.891 41.1717 287.891 45.635C287.891 50.055 285.854 53.6733 281.781 56.49C277.751 59.2633 272.464 60.65 265.921 
        60.65C259.378 60.65 254.243 59.3067 250.516 56.62C246.789 53.9333 244.926 50.6617 244.926 46.805C244.926 46.415 245.056 
        46.09 245.316 45.83C245.619 45.5267 245.966 45.375 246.356 45.375H258.706C259.616 45.375 260.613 45.8083 261.696 46.675C262.823 
        47.5417 264.361 47.975 266.311 47.975C269.561 47.975 271.186 47.3683 271.186 46.155C271.186 45.375 270.601 44.79 269.431 
        44.4C268.261 43.9667 266.051 43.5333 262.801 43.1C251.621 41.6267 246.031 36.86 246.031 28.8Z" 
        stroke="#333333"/>
    </svg>

• 원하는 그림이나 텍스트를 그룹화하여 svg로 copy하여 html에 paste를 한다.
  (피그마를 사용하여 svg를 가져오는 방법 사용)
• html에 path의 제일 마지막 부분에 fill="~" 속성이 있다면, stroke로 바꾼다.
  (stroke에 animation을 적용 시키기 위해 stroke로 바꿈)

---

2. style 적용 시키기

	svg path {
        stroke-dasharray: 233;
        stroke-dashoffset: 0; 
        animation: donuts 5s linear infinite;
    }

• stroke-dasharray는 기본 50으로 설정한 후 브라우저 개발 도구를 통해 숫자를 올려가며 path가 완전하게 보이는 점선의 총 길이를 찾는다.
  (점선의 총 길이 === path의 총 길이)
  (저의 path 길이는 233)
• stroke-dashaffset은 기본 시작점을 0으로 설정한다. -> 0에 가까울수록 이미지가 완전히 보이고, path의 총 길이(233)에 가까울 수록 이미지가 보이지 않는다.
  (animation이 작동하지 않을 때 완전한 상태로 보여지는 설정)

---

3. animation 적용하기

	 @keyframes donuts {
        0% {
            stroke-dashoffset: 233;
        }
        50% {
            stroke-dashoffset: 0;
        }
        100% {
            stroke-dashoffset: -233;
            /* stroke-dashoffset: 233;*/
        }
    }

• 0%에서 50%가 될 때 dashoffset 값을 path 길이와 같은 233에서 0으로 설정하여, 이미지가 시계 방향으로 서서히 보이게 한다.
• 50%에서 100%가 될 때 dashoffset 값을 0에서 -233으로 설정하여 다시 이미지가 시계 방향으로 사라진다.
  (0%에서 stroke-dashoffset 값을 음수로 설정하면 반시계방향으로 animation이 실행
  0%에서 stroke-dashoffset 값을 양수로 설정하면 시계방향으로 animation이 실행
  100%에서 stroke-dashoffset 값을 음수로 설정하면 시계방향으로 animation이 실행
  100%에서 stroke-dashoffset 값을 양수로 설정하면 반시계방향으로 animation이 실행)

---

Result

---

💡 Study

• stroke-dasharray = stroke를 점선으로 만들어 준다.
• 숫자(점선의 길이)가 path의 총 길이와 가까울수록 path가 완전하게 보인다.

• stroke-dashoffset = animation이 시작점을 설정한다.
• 0에 가까울수록 이미지가 완벽하게 보이고, path의 총 길이에 가까울수록 이미지가 보이지 않는다.