Задать вопрос
@Danila232

Как сделать SVG анимашку для логотипа?

Как сделать так, чтобы при наведении на логотип его синие лепестки как бы раздвигались, слегка расступались в стороны как показано стрелкой? Есть ли какой то способ сделать это с помощью чисто svg свойств? А то JS я только начал учить.

655bcb27ab907798931124.png

<a href="" class="logo">
            <svg width="220" height="33" viewBox="0 0 220 33" fill="none" xmlns="http://www.w3.org/2000/svg">
                <g clip-path="url(#clip0_9_288)">
                <path d="M57.7041 26.7295C57.7041 25.499 58.0575 24.4289 58.7429 23.5087C59.4391 22.5884 60.403 21.8715 61.6346 21.3579C62.8662 20.8443 64.3013 20.5768 65.9399 20.5768C66.7431 20.5768 67.5678 20.641 68.3924 20.7587C69.2171 20.8764 69.9454 21.0797 70.5558 21.3472V20.2879C70.5558 19.1108 70.2024 18.2013 69.4956 17.5593C68.7887 16.9172 67.7284 16.5855 66.3147 16.5855C65.2438 16.5855 64.2263 16.7674 63.2732 17.1313C62.32 17.4951 61.324 18.0194 60.2744 18.7042L58.7429 15.5262C59.9853 14.6702 61.2705 14.0495 62.6092 13.6429C63.9372 13.2363 65.3402 13.0437 66.7967 13.0437C69.5277 13.0437 71.6589 13.7071 73.1904 15.0447C74.7112 16.3822 75.4823 18.3083 75.4823 20.8336V26.8579C75.4823 27.3608 75.568 27.7246 75.7608 27.9386C75.9428 28.1527 76.2427 28.2918 76.6604 28.3346V32.3258C76.2213 32.4007 75.825 32.4649 75.4716 32.5077C75.1182 32.5505 74.8183 32.5719 74.572 32.5505C73.5974 32.5505 72.8584 32.3365 72.3551 31.9085C71.8517 31.4805 71.5518 30.9562 71.4554 30.3141L71.3483 29.3297C70.4916 30.3997 69.442 31.2344 68.1997 31.8122C66.9573 32.4007 65.6829 32.6896 64.3977 32.6896C63.1125 32.6896 61.988 32.4221 60.9706 31.8978C59.9532 31.3735 59.1606 30.6458 58.593 29.747C58.0254 28.8375 57.7362 27.8316 57.7362 26.7295H57.7041ZM69.6348 27.6497C69.9025 27.4143 70.1274 27.1361 70.2988 26.8258C70.4701 26.5155 70.5558 26.2587 70.5558 26.0447V24.1507C69.9668 23.9153 69.3349 23.7334 68.6495 23.5943C67.9641 23.4659 67.3215 23.4017 66.711 23.4017C65.4366 23.4017 64.3977 23.6692 63.5838 24.2042C62.7698 24.7392 62.3628 25.4455 62.3628 26.3229C62.3628 26.7937 62.5021 27.2538 62.7698 27.6925C63.0376 28.1312 63.4231 28.4844 63.9265 28.7412C64.4298 28.998 65.0403 29.1371 65.7793 29.1371C66.5182 29.1371 67.2358 28.998 67.9426 28.7091C68.6495 28.4202 69.2278 28.067 69.6669 27.639L69.6348 27.6497Z" fill="#1D293A"/>
                <path d="M91.4934 17.3988C89.9833 17.4202 88.6339 17.7091 87.4665 18.2548C86.2991 18.8005 85.4424 19.6138 84.9069 20.6838V32.3151H80.0339V13.3326H84.5427V17.249C85.2282 15.9328 86.0957 14.8949 87.1559 14.1352C88.2162 13.3754 89.33 12.9688 90.5081 12.8939C90.7544 12.9153 90.9472 12.926 91.0971 12.9153C91.2471 12.9046 91.3756 12.9153 91.5041 12.9688V17.3988H91.4934Z" fill="#1D293A"/>
                <path d="M94.2029 12.8619V8.03601H99.0758V12.8619H94.2029ZM94.2029 32.3259V17.1848L99.0758 13.1722V32.3259H94.2029Z" fill="#1D293A"/>
                <path d="M102.225 26.7295C102.225 25.499 102.578 24.4289 103.274 23.5087C103.97 22.5884 104.934 21.8715 106.166 21.3579C107.397 20.8443 108.833 20.5768 110.471 20.5768C111.274 20.5768 112.099 20.641 112.924 20.7587C113.748 20.8764 114.477 21.0797 115.087 21.3472V20.2879C115.087 19.1108 114.734 18.2013 114.027 17.5593C113.32 16.9172 112.26 16.5855 110.846 16.5855C109.775 16.5855 108.758 16.7674 107.804 17.1313C106.851 17.4951 105.845 18.0194 104.806 18.7042L103.263 15.5262C104.506 14.6702 105.791 14.0495 107.13 13.6429C108.458 13.2363 109.861 13.0437 111.317 13.0437C114.048 13.0437 116.179 13.7071 117.7 15.0447C119.221 16.3822 119.992 18.3083 119.992 20.8336V26.8579C119.992 27.3608 120.089 27.7246 120.271 27.9386C120.453 28.1527 120.753 28.2918 121.17 28.3346V32.3258C120.731 32.4007 120.335 32.4649 119.981 32.5077C119.628 32.5612 119.328 32.5719 119.082 32.5505C118.107 32.5505 117.368 32.3365 116.865 31.9085C116.362 31.4805 116.062 30.9562 115.965 30.3141L115.858 29.3297C115.001 30.3997 113.952 31.2344 112.709 31.8122C111.467 32.4007 110.193 32.6896 108.897 32.6896C107.601 32.6896 106.487 32.4221 105.48 31.8978C104.463 31.3735 103.67 30.6458 103.103 29.747C102.535 28.8375 102.246 27.8316 102.246 26.7295H102.225ZM114.155 27.6497C114.423 27.4143 114.648 27.1361 114.819 26.8258C114.991 26.5155 115.076 26.2587 115.076 26.0447V24.1507C114.487 23.9153 113.855 23.7334 113.17 23.5943C112.485 23.4659 111.842 23.4017 111.232 23.4017C109.957 23.4017 108.918 23.6692 108.104 24.2042C107.29 24.7392 106.883 25.4455 106.883 26.3229C106.883 26.7937 107.023 27.2538 107.29 27.6925C107.558 28.1312 107.944 28.4844 108.447 28.7412C108.95 28.998 109.561 29.1371 110.3 29.1371C111.039 29.1371 111.756 28.998 112.463 28.7091C113.17 28.4202 113.748 28.067 114.187 27.639L114.155 27.6497Z" fill="#1D293A"/>
                <path d="M129.02 32.3259L121.952 13.3434H127.007L131.912 27.9066L136.742 13.3434H141.39L134.322 32.3259H129.01H129.02Z" fill="#1D293A"/>
                <path d="M152.229 32.6897C150.686 32.6897 149.305 32.4328 148.052 31.9085C146.809 31.3949 145.749 30.678 144.871 29.7792C143.993 28.8803 143.318 27.8424 142.858 26.6867C142.397 25.5311 142.161 24.2899 142.161 22.963C142.161 21.176 142.568 19.5282 143.393 18.0301C144.207 16.5214 145.374 15.3122 146.874 14.4134C148.373 13.5146 150.172 13.0544 152.271 13.0544C154.37 13.0544 156.127 13.5039 157.616 14.4134C159.104 15.3229 160.25 16.5107 161.053 17.9766C161.857 19.4533 162.264 21.0583 162.264 22.7918C162.264 23.1021 162.253 23.4017 162.231 23.6799C162.21 23.9581 162.178 24.1936 162.157 24.3862H147.366C147.441 25.392 147.709 26.2373 148.191 26.9436C148.662 27.6498 149.273 28.1848 150.022 28.57C150.772 28.9552 151.554 29.1371 152.389 29.1371C153.385 29.1371 154.328 28.9017 155.195 28.4202C156.063 27.9494 156.652 27.3074 156.973 26.4941L161.15 27.6605C160.711 28.6342 160.068 29.5009 159.211 30.2607C158.355 31.0204 157.348 31.6089 156.17 32.0369C155.002 32.465 153.696 32.679 152.25 32.679L152.229 32.6897ZM147.216 21.3151H157.251C157.155 20.3628 156.877 19.5389 156.427 18.8327C155.977 18.1264 155.377 17.5807 154.649 17.1848C153.921 16.7889 153.096 16.5963 152.196 16.5963C151.297 16.5963 150.515 16.7889 149.797 17.1848C149.08 17.5807 148.491 18.1264 148.041 18.8327C147.591 19.5389 147.313 20.3628 147.216 21.3151Z" fill="#1D293A"/>
                <path d="M183.094 32.3259H178.189V21.7325C178.189 20.213 177.921 19.1109 177.396 18.4154C176.872 17.7199 176.122 17.3667 175.147 17.3667C174.494 17.3667 173.819 17.5379 173.155 17.8697C172.481 18.2014 171.892 18.6615 171.367 19.2393C170.842 19.8278 170.435 20.4913 170.146 21.2617V32.3259H165.273V13.3327H169.707V16.8745C170.199 16.0506 170.821 15.3658 171.57 14.8093C172.331 14.2529 173.198 13.8249 174.173 13.5039C175.147 13.1936 176.197 13.0331 177.321 13.0331C178.521 13.0331 179.496 13.2471 180.267 13.6644C181.038 14.0817 181.627 14.6595 182.023 15.3872C182.43 16.1148 182.708 16.9173 182.869 17.7948C183.03 18.6722 183.105 19.5603 183.105 20.4485V32.3152L183.094 32.3259Z" fill="#1D293A"/>
                <path d="M198.763 31.3735C198.324 31.5661 197.82 31.7694 197.242 31.9727C196.664 32.176 196.042 32.3472 195.378 32.4863C194.704 32.6255 194.029 32.6897 193.344 32.6897C192.412 32.6897 191.576 32.5291 190.816 32.2188C190.056 31.9085 189.456 31.4056 189.006 30.7101C188.556 30.0253 188.331 29.1264 188.331 28.0136V17.0671H185.847V13.3326L193.279 7.11572V13.3326H197.306V17.0671H193.279V26.3443C193.301 26.997 193.483 27.4679 193.825 27.7675C194.168 28.0671 194.607 28.2169 195.143 28.2169C195.635 28.2169 196.117 28.1206 196.61 27.9387C197.103 27.7568 197.499 27.5963 197.82 27.4465L198.773 31.3628L198.763 31.3735Z" fill="#1D293A"/>
                <path d="M209.922 32.6897C208.358 32.6897 206.966 32.4222 205.734 31.8979C204.503 31.3736 203.442 30.6459 202.564 29.7257C201.686 28.8055 201.022 27.7675 200.572 26.6012C200.122 25.4348 199.897 24.1936 199.897 22.8988C199.897 21.6041 200.122 20.2772 200.572 19.1002C201.022 17.9232 201.686 16.8745 202.553 15.9757C203.421 15.0769 204.481 14.3599 205.724 13.8463C206.966 13.3327 208.358 13.0652 209.9 13.0652C211.443 13.0652 212.899 13.322 214.131 13.8463C215.362 14.3599 216.423 15.0769 217.301 15.9757C218.179 16.8852 218.854 17.9232 219.314 19.1002C219.775 20.2772 220.01 21.5506 220.01 22.8988C220.01 24.2471 219.775 25.4348 219.314 26.6012C218.854 27.7675 218.179 28.8162 217.301 29.7257C216.423 30.6459 215.362 31.3629 214.131 31.8979C212.899 32.4222 211.496 32.6897 209.943 32.6897H209.922ZM204.91 22.8881C204.91 23.9689 205.124 24.9319 205.563 25.7986C206.002 26.6547 206.612 27.3288 207.373 27.8103C208.144 28.2918 208.99 28.5272 209.922 28.5272C210.854 28.5272 211.689 28.2811 212.449 27.7889C213.21 27.2967 213.809 26.6333 214.259 25.7772C214.709 24.9319 214.934 23.9582 214.934 22.856C214.934 21.7539 214.709 20.8123 214.259 19.9669C213.809 19.1216 213.199 18.4475 212.449 17.9553C211.7 17.463 210.843 17.2169 209.89 17.2169C208.937 17.2169 208.123 17.463 207.362 17.9553C206.602 18.4475 206.002 19.1109 205.563 19.9669C205.124 20.8123 204.91 21.786 204.91 22.8881Z" fill="#1D293A"/>
                <path d="M22.0728 33H39.3155V29.8434L22.0728 33Z" fill="#0A69F9"/>
                <path d="M16.5574 33C18.3352 30.2607 32.4078 28.4096 36.5097 27.2432L37.3129 22.3853C36.5525 22.7812 18.3138 27.789 16.5574 33Z" fill="#0A69F9"/>
                <path d="M11.0417 33C14.6081 27.5214 25.4892 23.8083 33.7036 21.4863L35.3208 14.927C33.7893 15.7188 14.5653 22.5885 11.0525 33H11.0417Z" fill="#0A69F9"/>
                <path d="M5.51562 33C10.8598 24.7821 18.5708 19.2179 30.8871 15.7295L33.3075 7.45813C31.0156 8.64587 10.7955 17.3774 5.51562 33Z" fill="#0A69F9"/>
                <path d="M31.3046 0C28.2416 1.59436 7.03632 12.177 0 33C7.1327 22.0428 11.6629 14.6167 28.081 9.97276L31.3046 0Z" fill="#0A69F9"/>
                </g>
                <defs>
                <clipPath id="clip0_9_288">
                <rect width="220" height="33" fill="white"/>
                </clipPath>
                </defs>
            </svg> 
        </a>
  • Вопрос задан
  • 50 просмотров
Подписаться 1 Простой 3 комментария
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы