Anime.js 网页加载时的 SVG 填充颜色动画
Anime.js SVG fill color animation on web page load
我想基于 anime.js 库创建 SVG 动画。它可以很好地处理描边颜色，但我想用 svg 填充颜色制作动画。这里我保留了填充颜色为灰色，可以和描边颜色一样。
我使用的是 2.2.0 版本。现在 3.0+ 版本可用
这是代码示例
anime({
targets: '.path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 6000,
delay: function(el, i) {
return i * 250
},
direction: 'linear',
loop: false
});
body {
background: gray;
}
svg.ax-shoes {
display: block;
margin: 0 auto;
width: auto;
height: 400px;
}
<script src="https://unpkg.com/animejs@2.2.0/anime.js"></script>
<svg viewBox="0 0 567.639 567.639" class="ax-shoes">
<path class="path" fill="gray" stroke="orange" stroke-width="6" d="M512.603,270.913c-17.002-3.118-45.795-3.146-80.104-9.534l4.714,28.257c0.813,4.82-2.457,9.381-7.268,10.174
c-0.497,0.086-0.984,0.115-1.473,0.115c-4.245,0-7.994-3.051-8.711-7.373l-4.905-29.366c-0.536-3.213-3.529-6.445-6.665-7.287
c-1.77-0.487-3.548-0.985-5.346-1.501c-3.127-0.899-5.222,0.927-4.686,4.131l2.467,14.812c0.812,4.819-2.457,9.371-7.268,10.184
c-0.497,0.077-0.984,0.125-1.473,0.125c-4.236,0-7.984-3.051-8.711-7.383l-4.074-24.403c-0.535-3.223-3.423-6.78-6.436-8.042
c-2.113-0.87-4.227-1.788-6.35-2.745c-2.974-1.329-4.915,0.134-4.37,3.347l2.104,12.613c0.812,4.829-2.448,9.39-7.268,10.184
c-0.497,0.076-0.976,0.134-1.463,0.134c-4.236,0-7.985-3.069-8.712-7.392l-4.332-25.962c-0.525-3.213-3.241-7.153-6.015-8.845
c-2.63-1.635-5.278-3.337-7.918-5.097c-2.706-1.798-4.437-0.717-3.901,2.496l3.031,18.188c0.813,4.819-2.447,9.371-7.268,10.165
c-0.497,0.095-0.984,0.134-1.463,0.134c-4.245,0-7.994-3.06-8.711-7.392l-7.526-45.116c-1.759-2.018-3.385-3.988-4.666-5.699
c-10.882-14.458-32.627-40.841-50.585-47.191c-18.8-6.636-33.87,6.923-37.112,19.498c-1.616,6.321,1.224,16.82,3.242,23.017
c1.253,3.844,3.204,8.042,6.235,11.504c4.284,4.905,5.91,10.098,0.937,14.296c-11.628,9.888-33.622,26.622-58.551,35.85
c-49.142,18.188-57.748-6.875-57.748-6.875s-10.873-35.228-28.286-47.917c-5.259-3.844-16.161-5.221-22.491-3.729
c-2.247,0.545-4.312,1.387-6.282,2.362c3.882,22.692,20.913,77.456,95.396,113.393c96.61,46.654,289.006,55.959,325.057,57.307
c3.261,0.125,3.3,0.68,0.096,1.225c-23.485,3.959-114.491,17.441-205.01,6.34C151.476,358.237,49.08,326.212,22.277,236.047
c-0.555,1.97-1.081,3.815-1.587,5.403c-4.322,13.626-8.329,22.701-9.161,52.326c-0.172,6.512-2.85,16.352-5.145,22.453
c-2.754,7.285-5.67,18.053-6.053,31.355c-0.382,13.244-0.373,24.557-0.268,32.426c0.086,6.512,4.188,15.387,9.801,18.695
c4.007,2.381,9.094,4.809,14.927,6.311c6.312,1.635,16.094,4.553,22.31,6.531c2.687,0.861,5.814,1.588,9.294,1.951
c6.483,0.668,14.066-0.201,16.916-0.039c2.85,0.154,5.154,1.635,5.154,3.318s3.404,3.041,7.612,3.041s8.826-1.77,10.318-3.93
c1.492-2.172,4.466-3.93,6.636-3.93c2.171,0,3.94,1.768,3.94,3.93c0,2.17,3.184,3.93,7.124,3.93s8.224-1.865,9.572-4.188
c1.367-2.295,4.121-4.18,6.158-4.18c2.027,0,4.886,1.875,6.378,4.18c1.501,2.312,5.575,4.188,9.104,4.188
c3.529,0,7.488-1.77,8.845-3.93c1.358-2.172,4.542-2.172,7.115,0c2.582,2.17,8.53,3.93,13.273,3.93
c4.743,0,9.151-1.424,9.83-3.184c0.669-1.77,3.203-3.203,5.651-3.203c2.438,0,5.527,1.424,6.885,3.203
c1.358,1.76,6.082,2.408,10.557,1.473c4.476-0.957,9.094-3.711,10.318-6.148c1.224-2.439,3.758-2.889,5.661-0.996
c1.884,1.914,7.057,4.008,11.542,4.668c4.475,0.688,9.869-0.086,12.039-1.723c2.171-1.625,5.69-2.609,7.851-2.219
c2.17,0.422,3.93,2.391,3.93,4.428c0,2.047,3.749,3.691,8.357,3.691c4.619,0,9.677-1.09,11.312-2.457
c1.625-1.357,4.81-2.133,7.114-1.721c2.305,0.4,4.179,1.836,4.179,3.193s2.305,2.447,5.154,2.447c2.859,0,7.038-0.879,9.343-1.959
c2.305-1.092,5.498-1.75,7.124-1.473c1.636,0.268,2.955,1.701,2.955,3.203c0,1.49,5.278,2.695,11.79,2.695h0.985
c6.521,0,11.79-1.768,11.79-3.93c0-2.17,1.875-3.93,4.17-3.93c2.305,0,4.179,1.77,4.179,3.93c0,2.172,4.618,3.93,10.317,3.93
s12.298-1.205,14.746-2.695c2.438-1.502,6.072-1.502,8.108,0c2.027,1.49,8.855,2.695,15.233,2.695s12.651-1.539,14.009-3.432
c1.358-1.895,4.332-3.988,6.627-4.676c2.305-0.66,5.059,0.314,6.14,2.209c1.09,1.902,7.143,2.418,13.55,1.186l1.912-0.383
c6.388-1.254,12.24-4.361,13.053-6.953c0.813-2.572,2.688-4.885,4.179-5.154c1.492-0.268,4.026,1.168,5.652,3.195
c1.625,2.037,6.474,2.695,10.805,1.463c4.342-1.215,8.415-5.289,9.095-9.084c0.679-3.797,3.538-7.65,6.388-8.588
c2.85-0.957,5.154,0.479,5.154,3.193c0,2.717,4.943,3.041,11.035,0.756c6.139-2.334,11.082-6.396,11.082-9.113
c0-2.715,1.646-5.584,3.682-6.387c2.037-0.814,4.677-0.488,5.9,0.727c1.215,1.223,4.849,0.354,8.109-1.961
c3.261-2.295,6.34-5.938,6.885-8.1c0.545-2.17,5.565-6.637,10.337-11.072c9.85-9.172,23.142-27.197,16.677-54.508
C556.093,265.528,548.721,277.558,512.603,270.913z"/>
</svg>
最初在您的 SVG 路径上使用十六进制颜色作为 fill（而不是像 gray 这样的关键字），然后将新填充添加到您的动画属性中。
anime({
targets: '.path',
strokeDashoffset: [anime.setDashoffset, 0],
fill: '#ff0000',
easing: 'easeInOutSine',
duration: 6000,
delay: function(el, i) {
return i * 250
},
direction: 'linear',
loop: false,
complete: () => {
console.log('show the rest of the webpage')
}
});
body {
background: gray;
}
svg.ax-shoes {
display: block;
margin: 0 auto;
width: auto;
height: 400px;
}
<script src="https://unpkg.com/animejs@2.2.0/anime.js"></script>
<svg viewBox="0 0 567.639 567.639" class="ax-shoes"><path class="path" fill="#808080" stroke="orange" stroke-width="6" d="M512.603 270.913c-17.002-3.118-45.795-3.146-80.104-9.534l4.714 28.257c.813 4.82-2.457 9.381-7.268 10.174a8.564 8.564 0 01-1.473.115c-4.245 0-7.994-3.051-8.711-7.373l-4.905-29.366c-.536-3.213-3.529-6.445-6.665-7.287-1.77-.487-3.548-.985-5.346-1.501-3.127-.899-5.222.927-4.686 4.131l2.467 14.812c.812 4.819-2.457 9.371-7.268 10.184a9.593 9.593 0 01-1.473.125 8.843 8.843 0 01-8.711-7.383l-4.074-24.403c-.535-3.223-3.423-6.78-6.436-8.042a210.215 210.215 0 01-6.35-2.745c-2.974-1.329-4.915.134-4.37 3.347l2.104 12.613c.812 4.829-2.448 9.39-7.268 10.184a9.635 9.635 0 01-1.463.134 8.86 8.86 0 01-8.712-7.392l-4.332-25.962c-.525-3.213-3.241-7.153-6.015-8.845a296.498 296.498 0 01-7.918-5.097c-2.706-1.798-4.437-.717-3.901 2.496l3.031 18.188c.813 4.819-2.447 9.371-7.268 10.165a7.755 7.755 0 01-1.463.134c-4.245 0-7.994-3.06-8.711-7.392l-7.526-45.116c-1.759-2.018-3.385-3.988-4.666-5.699-10.882-14.458-32.627-40.841-50.585-47.191-18.8-6.636-33.87 6.923-37.112 19.498-1.616 6.321 1.224 16.82 3.242 23.017 1.253 3.844 3.204 8.042 6.235 11.504 4.284 4.905 5.91 10.098.937 14.296-11.628 9.888-33.622 26.622-58.551 35.85-49.142 18.188-57.748-6.875-57.748-6.875s-10.873-35.228-28.286-47.917c-5.259-3.844-16.161-5.221-22.491-3.729-2.247.545-4.312 1.387-6.282 2.362 3.882 22.692 20.913 77.456 95.396 113.393 96.61 46.654 289.006 55.959 325.057 57.307 3.261.125 3.3.68.096 1.225-23.485 3.959-114.491 17.441-205.01 6.34C151.476 358.237 49.08 326.212 22.277 236.047c-.555 1.97-1.081 3.815-1.587 5.403-4.322 13.626-8.329 22.701-9.161 52.326-.172 6.512-2.85 16.352-5.145 22.453-2.754 7.285-5.67 18.053-6.053 31.355a779.823 779.823 0 00-.268 32.426c.086 6.512 4.188 15.387 9.801 18.695 4.007 2.381 9.094 4.809 14.927 6.311 6.312 1.635 16.094 4.553 22.31 6.531a46.22 46.22 0 009.294 1.951c6.483.668 14.066-.201 16.916-.039 2.85.154 5.154 1.635 5.154 3.318s3.404 3.041 7.612 3.041 8.826-1.77 10.318-3.93c1.492-2.172 4.466-3.93 6.636-3.93a3.944 3.944 0 013.94 3.93c0 2.17 3.184 3.93 7.124 3.93s8.224-1.865 9.572-4.188c1.367-2.295 4.121-4.18 6.158-4.18 2.027 0 4.886 1.875 6.378 4.18 1.501 2.312 5.575 4.188 9.104 4.188 3.529 0 7.488-1.77 8.845-3.93 1.358-2.172 4.542-2.172 7.115 0 2.582 2.17 8.53 3.93 13.273 3.93s9.151-1.424 9.83-3.184c.669-1.77 3.203-3.203 5.651-3.203 2.438 0 5.527 1.424 6.885 3.203 1.358 1.76 6.082 2.408 10.557 1.473 4.476-.957 9.094-3.711 10.318-6.148 1.224-2.439 3.758-2.889 5.661-.996 1.884 1.914 7.057 4.008 11.542 4.668 4.475.688 9.869-.086 12.039-1.723 2.171-1.625 5.69-2.609 7.851-2.219 2.17.422 3.93 2.391 3.93 4.428 0 2.047 3.749 3.691 8.357 3.691 4.619 0 9.677-1.09 11.312-2.457 1.625-1.357 4.81-2.133 7.114-1.721 2.305.4 4.179 1.836 4.179 3.193s2.305 2.447 5.154 2.447c2.859 0 7.038-.879 9.343-1.959 2.305-1.092 5.498-1.75 7.124-1.473 1.636.268 2.955 1.701 2.955 3.203 0 1.49 5.278 2.695 11.79 2.695h.985c6.521 0 11.79-1.768 11.79-3.93 0-2.17 1.875-3.93 4.17-3.93 2.305 0 4.179 1.77 4.179 3.93 0 2.172 4.618 3.93 10.317 3.93s12.298-1.205 14.746-2.695c2.438-1.502 6.072-1.502 8.108 0 2.027 1.49 8.855 2.695 15.233 2.695s12.651-1.539 14.009-3.432c1.358-1.895 4.332-3.988 6.627-4.676 2.305-.66 5.059.314 6.14 2.209 1.09 1.902 7.143 2.418 13.55 1.186l1.912-.383c6.388-1.254 12.24-4.361 13.053-6.953.813-2.572 2.688-4.885 4.179-5.154 1.492-.268 4.026 1.168 5.652 3.195 1.625 2.037 6.474 2.695 10.805 1.463 4.342-1.215 8.415-5.289 9.095-9.084.679-3.797 3.538-7.65 6.388-8.588 2.85-.957 5.154.479 5.154 3.193 0 2.717 4.943 3.041 11.035.756 6.139-2.334 11.082-6.396 11.082-9.113 0-2.715 1.646-5.584 3.682-6.387 2.037-.814 4.677-.488 5.9.727 1.215 1.223 4.849.354 8.109-1.961 3.261-2.295 6.34-5.938 6.885-8.1.545-2.17 5.565-6.637 10.337-11.072 9.85-9.172 23.142-27.197 16.677-54.508-9.838-41.526-17.21-29.496-53.328-36.141z"/></svg>
我想基于 anime.js 库创建 SVG 动画。它可以很好地处理描边颜色，但我想用 svg 填充颜色制作动画。这里我保留了填充颜色为灰色，可以和描边颜色一样。
我使用的是 2.2.0 版本。现在 3.0+ 版本可用
这是代码示例
anime({
targets: '.path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 6000,
delay: function(el, i) {
return i * 250
},
direction: 'linear',
loop: false
});
body {
background: gray;
}
svg.ax-shoes {
display: block;
margin: 0 auto;
width: auto;
height: 400px;
}
<script src="https://unpkg.com/animejs@2.2.0/anime.js"></script>
<svg viewBox="0 0 567.639 567.639" class="ax-shoes">
<path class="path" fill="gray" stroke="orange" stroke-width="6" d="M512.603,270.913c-17.002-3.118-45.795-3.146-80.104-9.534l4.714,28.257c0.813,4.82-2.457,9.381-7.268,10.174
c-0.497,0.086-0.984,0.115-1.473,0.115c-4.245,0-7.994-3.051-8.711-7.373l-4.905-29.366c-0.536-3.213-3.529-6.445-6.665-7.287
c-1.77-0.487-3.548-0.985-5.346-1.501c-3.127-0.899-5.222,0.927-4.686,4.131l2.467,14.812c0.812,4.819-2.457,9.371-7.268,10.184
c-0.497,0.077-0.984,0.125-1.473,0.125c-4.236,0-7.984-3.051-8.711-7.383l-4.074-24.403c-0.535-3.223-3.423-6.78-6.436-8.042
c-2.113-0.87-4.227-1.788-6.35-2.745c-2.974-1.329-4.915,0.134-4.37,3.347l2.104,12.613c0.812,4.829-2.448,9.39-7.268,10.184
c-0.497,0.076-0.976,0.134-1.463,0.134c-4.236,0-7.985-3.069-8.712-7.392l-4.332-25.962c-0.525-3.213-3.241-7.153-6.015-8.845
c-2.63-1.635-5.278-3.337-7.918-5.097c-2.706-1.798-4.437-0.717-3.901,2.496l3.031,18.188c0.813,4.819-2.447,9.371-7.268,10.165
c-0.497,0.095-0.984,0.134-1.463,0.134c-4.245,0-7.994-3.06-8.711-7.392l-7.526-45.116c-1.759-2.018-3.385-3.988-4.666-5.699
c-10.882-14.458-32.627-40.841-50.585-47.191c-18.8-6.636-33.87,6.923-37.112,19.498c-1.616,6.321,1.224,16.82,3.242,23.017
c1.253,3.844,3.204,8.042,6.235,11.504c4.284,4.905,5.91,10.098,0.937,14.296c-11.628,9.888-33.622,26.622-58.551,35.85
c-49.142,18.188-57.748-6.875-57.748-6.875s-10.873-35.228-28.286-47.917c-5.259-3.844-16.161-5.221-22.491-3.729
c-2.247,0.545-4.312,1.387-6.282,2.362c3.882,22.692,20.913,77.456,95.396,113.393c96.61,46.654,289.006,55.959,325.057,57.307
c3.261,0.125,3.3,0.68,0.096,1.225c-23.485,3.959-114.491,17.441-205.01,6.34C151.476,358.237,49.08,326.212,22.277,236.047
c-0.555,1.97-1.081,3.815-1.587,5.403c-4.322,13.626-8.329,22.701-9.161,52.326c-0.172,6.512-2.85,16.352-5.145,22.453
c-2.754,7.285-5.67,18.053-6.053,31.355c-0.382,13.244-0.373,24.557-0.268,32.426c0.086,6.512,4.188,15.387,9.801,18.695
c4.007,2.381,9.094,4.809,14.927,6.311c6.312,1.635,16.094,4.553,22.31,6.531c2.687,0.861,5.814,1.588,9.294,1.951
c6.483,0.668,14.066-0.201,16.916-0.039c2.85,0.154,5.154,1.635,5.154,3.318s3.404,3.041,7.612,3.041s8.826-1.77,10.318-3.93
c1.492-2.172,4.466-3.93,6.636-3.93c2.171,0,3.94,1.768,3.94,3.93c0,2.17,3.184,3.93,7.124,3.93s8.224-1.865,9.572-4.188
c1.367-2.295,4.121-4.18,6.158-4.18c2.027,0,4.886,1.875,6.378,4.18c1.501,2.312,5.575,4.188,9.104,4.188
c3.529,0,7.488-1.77,8.845-3.93c1.358-2.172,4.542-2.172,7.115,0c2.582,2.17,8.53,3.93,13.273,3.93
c4.743,0,9.151-1.424,9.83-3.184c0.669-1.77,3.203-3.203,5.651-3.203c2.438,0,5.527,1.424,6.885,3.203
c1.358,1.76,6.082,2.408,10.557,1.473c4.476-0.957,9.094-3.711,10.318-6.148c1.224-2.439,3.758-2.889,5.661-0.996
c1.884,1.914,7.057,4.008,11.542,4.668c4.475,0.688,9.869-0.086,12.039-1.723c2.171-1.625,5.69-2.609,7.851-2.219
c2.17,0.422,3.93,2.391,3.93,4.428c0,2.047,3.749,3.691,8.357,3.691c4.619,0,9.677-1.09,11.312-2.457
c1.625-1.357,4.81-2.133,7.114-1.721c2.305,0.4,4.179,1.836,4.179,3.193s2.305,2.447,5.154,2.447c2.859,0,7.038-0.879,9.343-1.959
c2.305-1.092,5.498-1.75,7.124-1.473c1.636,0.268,2.955,1.701,2.955,3.203c0,1.49,5.278,2.695,11.79,2.695h0.985
c6.521,0,11.79-1.768,11.79-3.93c0-2.17,1.875-3.93,4.17-3.93c2.305,0,4.179,1.77,4.179,3.93c0,2.172,4.618,3.93,10.317,3.93
s12.298-1.205,14.746-2.695c2.438-1.502,6.072-1.502,8.108,0c2.027,1.49,8.855,2.695,15.233,2.695s12.651-1.539,14.009-3.432
c1.358-1.895,4.332-3.988,6.627-4.676c2.305-0.66,5.059,0.314,6.14,2.209c1.09,1.902,7.143,2.418,13.55,1.186l1.912-0.383
c6.388-1.254,12.24-4.361,13.053-6.953c0.813-2.572,2.688-4.885,4.179-5.154c1.492-0.268,4.026,1.168,5.652,3.195
c1.625,2.037,6.474,2.695,10.805,1.463c4.342-1.215,8.415-5.289,9.095-9.084c0.679-3.797,3.538-7.65,6.388-8.588
c2.85-0.957,5.154,0.479,5.154,3.193c0,2.717,4.943,3.041,11.035,0.756c6.139-2.334,11.082-6.396,11.082-9.113
c0-2.715,1.646-5.584,3.682-6.387c2.037-0.814,4.677-0.488,5.9,0.727c1.215,1.223,4.849,0.354,8.109-1.961
c3.261-2.295,6.34-5.938,6.885-8.1c0.545-2.17,5.565-6.637,10.337-11.072c9.85-9.172,23.142-27.197,16.677-54.508
C556.093,265.528,548.721,277.558,512.603,270.913z"/>
</svg>
最初在您的 SVG 路径上使用十六进制颜色作为 fill（而不是像 gray 这样的关键字），然后将新填充添加到您的动画属性中。
anime({
targets: '.path',
strokeDashoffset: [anime.setDashoffset, 0],
fill: '#ff0000',
easing: 'easeInOutSine',
duration: 6000,
delay: function(el, i) {
return i * 250
},
direction: 'linear',
loop: false,
complete: () => {
console.log('show the rest of the webpage')
}
});
body {
background: gray;
}
svg.ax-shoes {
display: block;
margin: 0 auto;
width: auto;
height: 400px;
}
<script src="https://unpkg.com/animejs@2.2.0/anime.js"></script>
<svg viewBox="0 0 567.639 567.639" class="ax-shoes"><path class="path" fill="#808080" stroke="orange" stroke-width="6" d="M512.603 270.913c-17.002-3.118-45.795-3.146-80.104-9.534l4.714 28.257c.813 4.82-2.457 9.381-7.268 10.174a8.564 8.564 0 01-1.473.115c-4.245 0-7.994-3.051-8.711-7.373l-4.905-29.366c-.536-3.213-3.529-6.445-6.665-7.287-1.77-.487-3.548-.985-5.346-1.501-3.127-.899-5.222.927-4.686 4.131l2.467 14.812c.812 4.819-2.457 9.371-7.268 10.184a9.593 9.593 0 01-1.473.125 8.843 8.843 0 01-8.711-7.383l-4.074-24.403c-.535-3.223-3.423-6.78-6.436-8.042a210.215 210.215 0 01-6.35-2.745c-2.974-1.329-4.915.134-4.37 3.347l2.104 12.613c.812 4.829-2.448 9.39-7.268 10.184a9.635 9.635 0 01-1.463.134 8.86 8.86 0 01-8.712-7.392l-4.332-25.962c-.525-3.213-3.241-7.153-6.015-8.845a296.498 296.498 0 01-7.918-5.097c-2.706-1.798-4.437-.717-3.901 2.496l3.031 18.188c.813 4.819-2.447 9.371-7.268 10.165a7.755 7.755 0 01-1.463.134c-4.245 0-7.994-3.06-8.711-7.392l-7.526-45.116c-1.759-2.018-3.385-3.988-4.666-5.699-10.882-14.458-32.627-40.841-50.585-47.191-18.8-6.636-33.87 6.923-37.112 19.498-1.616 6.321 1.224 16.82 3.242 23.017 1.253 3.844 3.204 8.042 6.235 11.504 4.284 4.905 5.91 10.098.937 14.296-11.628 9.888-33.622 26.622-58.551 35.85-49.142 18.188-57.748-6.875-57.748-6.875s-10.873-35.228-28.286-47.917c-5.259-3.844-16.161-5.221-22.491-3.729-2.247.545-4.312 1.387-6.282 2.362 3.882 22.692 20.913 77.456 95.396 113.393 96.61 46.654 289.006 55.959 325.057 57.307 3.261.125 3.3.68.096 1.225-23.485 3.959-114.491 17.441-205.01 6.34C151.476 358.237 49.08 326.212 22.277 236.047c-.555 1.97-1.081 3.815-1.587 5.403-4.322 13.626-8.329 22.701-9.161 52.326-.172 6.512-2.85 16.352-5.145 22.453-2.754 7.285-5.67 18.053-6.053 31.355a779.823 779.823 0 00-.268 32.426c.086 6.512 4.188 15.387 9.801 18.695 4.007 2.381 9.094 4.809 14.927 6.311 6.312 1.635 16.094 4.553 22.31 6.531a46.22 46.22 0 009.294 1.951c6.483.668 14.066-.201 16.916-.039 2.85.154 5.154 1.635 5.154 3.318s3.404 3.041 7.612 3.041 8.826-1.77 10.318-3.93c1.492-2.172 4.466-3.93 6.636-3.93a3.944 3.944 0 013.94 3.93c0 2.17 3.184 3.93 7.124 3.93s8.224-1.865 9.572-4.188c1.367-2.295 4.121-4.18 6.158-4.18 2.027 0 4.886 1.875 6.378 4.18 1.501 2.312 5.575 4.188 9.104 4.188 3.529 0 7.488-1.77 8.845-3.93 1.358-2.172 4.542-2.172 7.115 0 2.582 2.17 8.53 3.93 13.273 3.93s9.151-1.424 9.83-3.184c.669-1.77 3.203-3.203 5.651-3.203 2.438 0 5.527 1.424 6.885 3.203 1.358 1.76 6.082 2.408 10.557 1.473 4.476-.957 9.094-3.711 10.318-6.148 1.224-2.439 3.758-2.889 5.661-.996 1.884 1.914 7.057 4.008 11.542 4.668 4.475.688 9.869-.086 12.039-1.723 2.171-1.625 5.69-2.609 7.851-2.219 2.17.422 3.93 2.391 3.93 4.428 0 2.047 3.749 3.691 8.357 3.691 4.619 0 9.677-1.09 11.312-2.457 1.625-1.357 4.81-2.133 7.114-1.721 2.305.4 4.179 1.836 4.179 3.193s2.305 2.447 5.154 2.447c2.859 0 7.038-.879 9.343-1.959 2.305-1.092 5.498-1.75 7.124-1.473 1.636.268 2.955 1.701 2.955 3.203 0 1.49 5.278 2.695 11.79 2.695h.985c6.521 0 11.79-1.768 11.79-3.93 0-2.17 1.875-3.93 4.17-3.93 2.305 0 4.179 1.77 4.179 3.93 0 2.172 4.618 3.93 10.317 3.93s12.298-1.205 14.746-2.695c2.438-1.502 6.072-1.502 8.108 0 2.027 1.49 8.855 2.695 15.233 2.695s12.651-1.539 14.009-3.432c1.358-1.895 4.332-3.988 6.627-4.676 2.305-.66 5.059.314 6.14 2.209 1.09 1.902 7.143 2.418 13.55 1.186l1.912-.383c6.388-1.254 12.24-4.361 13.053-6.953.813-2.572 2.688-4.885 4.179-5.154 1.492-.268 4.026 1.168 5.652 3.195 1.625 2.037 6.474 2.695 10.805 1.463 4.342-1.215 8.415-5.289 9.095-9.084.679-3.797 3.538-7.65 6.388-8.588 2.85-.957 5.154.479 5.154 3.193 0 2.717 4.943 3.041 11.035.756 6.139-2.334 11.082-6.396 11.082-9.113 0-2.715 1.646-5.584 3.682-6.387 2.037-.814 4.677-.488 5.9.727 1.215 1.223 4.849.354 8.109-1.961 3.261-2.295 6.34-5.938 6.885-8.1.545-2.17 5.565-6.637 10.337-11.072 9.85-9.172 23.142-27.197 16.677-54.508-9.838-41.526-17.21-29.496-53.328-36.141z"/></svg>