I am trying to recreate the following behavior, specifically I want the letters to come in one letter at a time, from left to right as if someone was actually writing it on the screen.
http://codepen.io/itsnorbat/pen/vNEEYZ
I know that this part of svg code is the word hello:
<path id="fontshape" d="m 250 252 c 0 0 25.833 -21.854 33 -6.59 c 2.244 4.778 -43.583 107.903 -43.583 107.903 s 20.416 -48.943 27.583 -51.667 c 5.042 -1.916 42.333 2.175 53 -3.079 s 31.667 -58.746 31.667 -58.746 s -49.991 106.985 -38.334 113.492 c 14.228 7.941 77.913 -39.622 64.667 -50.334 c -8.667 -7.009 -17.608 4.216 -21 8.334 c -1.747 2.121 -21.333 44.027 2.667 42.014 s 91.817 -93.427 96.306 -103.723 c 4.669 -10.712 1.947 -11.996 -0.639 -12.291 c -11.721 -1.335 -37.539 40.442 -53 103.333 c -3.426 13.935 6.667 17.333 15.333 9.333 s 76.855 -91.35 79 -100.226 c 2.393 -9.902 -7.731 -15.378 -17 0.226 c -11.271 18.976 -36.465 82.571 -36 92.667 c 0.263 5.689 2.403 18.828 15.333 6.667 c 19.894 -18.71 42.666 -47.667 42.666 -47.667 s -21.522 22.389 -22 45 c -0.245 11.592 16.631 5.965 23.274 0.667 c 5.081 -4.052 17.727 -21.334 15.06 -36.667 s -13.334 -10.001 -16.667 1.333 s 5 10 17 8 s 17 -13.666 17 -14.333" fill="none" stroke="none" />
and this is the animation:
.animatedfont {
fill:none;
stroke:#fff;
stroke-width:3;
stroke-linecap:round;
stroke-linejoin:round;
stroke-miterlimit:100;
stroke-dasharray: 2000;
stroke-dashoffset: 0;
-webkit-animation: dash 4.9s linear forwards;
-o-animation: dash 4.9s linear forwards;
-moz-animation: dash 4.9s linear forwards;
animation: dash 4.9s linear forwards;
-webkit-animation-play-state: running;
}
@-webkit-keyframes dash {
from {
stroke-dashoffset: 2000;
}
to {
stroke-dashoffset: 0;
}
Here is my effort: https://jsbin.com/qelonotoxu/1/edit?html,js,output
and my animate code:
<style type="text/css">
.st0{
fill:none;
stroke:#000000;
stroke-dasharray: 2000;
stroke-dashoffset: 2000;
-webkit-animation: dash 10s linear forwards;
-o-animation: dash 10s linear forwards;
-moz-animation: dash 10s linear forwards;
animation: dash 10s linear forwards;
}
@-webkit-keyframes dash {
to {
stroke-dashoffset: 2000;
}
}
@keyframes dash {
to {
stroke-dashoffset: 0;
}
}
</style>
As you can see all of the letters are animated at the same time and if I change my stroke-dashoffset = 0, it does not animate at all. Any suggestions are much appreciated. Thanks.
I'll show you how you can animate each of these letters (well, actually I stopped after three letters) separately using as few changes as possible to the svg path
and only using css-based animation keyframes
. However, let me say from the start, this is painful and not the way to animate letters in the way you want. Perhaps the end lesson will be: "Try something else."
To see the animation in action, click "Run code snippet" below.
I had to do several things. Animating from start-to-end (or end-to-start) along a path
that has multiple 'moveto' commands within it (i.e. multiple "M"
s) using the stroke-dashoffset
attribute is undoable. This is because the stroke dasharray re-starts after every 'moveto' and, I believe, you have no control over that. Thus, the path
had to have all the 'moveto' commands eliminated. This meant, though, that with a solid stroke there would be ugly connections from where one letter "ends" to where the next letter "begins". These needed to be gotten rid of by inserting a dasharray gap at each jump to the next letter where the original 'moveto' commands were. I did that (painfully) by trial and error. Then multiple animation keyframes
were required to animate one letter after the next. To start, one dash was gradually lengthened to complete the first letter, followed by an essentially infinite gap to hide the remaining letters. Then a correct gap was inserted to the second letter, and the process was repeated.
Part of the problem here is that the letters in your path are separated by 'moveto' commands. In the codepen that you linked to in your question showing the behaviour you were looking for, you'll see that the path is actually continuous, with no gaps between letters...a much easier thing to css-animate by changing stroke-dashoffset
. If that's what you want, great, but you're going to have to fundamentally change (i.e. go back to Illustrator, etc.) the image you're using, which you may or may not be willing or able to do.
You still could animate each letter in this image separately. However, if you did, I think the best strategy would be to separate the single monolithic path
element into individual path
s for each "letter". You would then have to animate the first letter (possibly using stroke-dashoffset
, but possibly another way) and, when that is finished, start the next letter, etc. I suppose you could try to do this using strictly css-based animations. However, in the end, I think it would probably be better (more efficient, more broadly applicable, etc.) to use some sort of JavaScript-based animation where you could control things more programmatically.
.st0 {
fill: none;
stroke: #000000;
stroke-dashoffset: 0;
-webkit-animation: dash 5s linear forwards;
-o-animation: dash 5s linear forwards;
-moz-animation: dash 5s linear forwards;
animation: dash 5s linear forwards;
}
@keyframes dash {
0% {
stroke-dasharray: 0 10000000;
}
40% {
stroke-dasharray: 580 10000000;
}
40% {
stroke-dasharray: 580 50 0 10000000;
}
70% {
stroke-dasharray: 580 50 295 10000000;
}
70% {
stroke-dasharray: 580 50 295 53 0 10000000;
}
90% {
stroke-dasharray: 580 50 295 53 113 10000000;
}
90% {
stroke-dasharray: 580 50 295 53 113 42 0 10000000;
}
100% {
stroke-dasharray: 580 50 295 53 113 42 60 10000000;
}
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 268.382 72.239" style="enable-background:new 0 0 268.382 72.239;" xml:space="preserve">
<g>
<path id="path" class="st0" stroke-width="5" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" d="M37.627,7.954c-2.16,1.632-4.032,3.54-5.616,5.724c-1.584,2.185-3.013,4.525-4.284,7.02
c-1.272,2.497-2.425,5.088-3.456,7.776c-1.033,2.688-2.052,5.389-3.06,8.1c-1.008,2.712-2.077,5.353-3.204,7.92
c-1.128,2.568-2.437,4.98-3.924,7.236l0.144,0.144c1.487-1.392,3.107-2.952,4.86-4.68c1.751-1.728,3.552-3.528,5.4-5.4
c1.847-1.872,3.683-3.768,5.508-5.688c1.824-1.919,3.564-3.792,5.22-5.616c1.656-1.823,3.179-3.564,4.572-5.22
c1.392-1.656,2.544-3.132,3.456-4.428c0.288-0.432,0.731-1.08,1.332-1.944c0.6-0.864,1.26-1.812,1.98-2.844
c0.72-1.031,1.512-2.099,2.376-3.204c0.864-1.104,1.728-2.1,2.592-2.988c0.864-0.888,1.703-1.62,2.52-2.196
c0.815-0.576,1.559-0.864,2.232-0.864c0.24,0,0.456,0.084,0.648,0.252c0.191,0.169,0.288,0.421,0.288,0.756
c0,0.288-0.121,0.612-0.36,0.972c-0.241,0.36-0.517,0.72-0.828,1.08c-0.313,0.36-0.661,0.709-1.044,1.044
c-0.385,0.336-0.72,0.625-1.008,0.864c-2.016,1.776-3.697,3.732-5.04,5.868c-1.344,2.137-2.532,4.405-3.564,6.804
c-1.033,2.401-1.956,4.86-2.772,7.38c-0.816,2.52-1.692,5.04-2.628,7.56s-1.992,4.993-3.168,7.416
c-1.177,2.424-2.653,4.716-4.428,6.876l0.144,0.144c2.208-1.487,4.632-3.12,7.272-4.896c2.64-1.775,5.292-3.683,7.956-5.724
c2.664-2.04,5.256-4.212,7.776-6.516c2.52-2.304,4.788-4.716,6.804-7.236c2.016-2.52,3.696-5.148,5.04-7.884
c1.343-2.736,2.16-5.568,2.448-8.496c-0.529-0.288-0.925-0.708-1.188-1.26c-0.265-0.551-0.396-1.14-0.396-1.764
c0-0.767,0.275-1.404,0.828-1.908c0.551-0.504,1.235-0.756,2.052-0.756c0.576,0,1.067,0.133,1.476,0.396
c0.407,0.264,0.744,0.601,1.008,1.008c0.263,0.409,0.443,0.864,0.54,1.368c0.096,0.504,0.144,0.997,0.144,1.476
c0,2.113-0.588,4.345-1.764,6.696c-1.177,2.353-2.7,4.705-4.572,7.056c-1.872,2.353-3.996,4.692-6.372,7.02
c-2.376,2.329-4.777,4.5-7.2,6.516c-2.424,2.016-4.764,3.864-7.02,5.544c-2.256,1.681-4.201,3.072-5.832,4.176
c-1.152,0.769-2.4,1.597-3.744,2.484c-1.345,0.889-2.653,1.777-3.924,2.664c-1.272,0.889-2.46,1.753-3.564,2.592
c-1.104,0.84-1.992,1.596-2.664,2.268l-0.432-0.576c1.728-2.399,3.215-5.004,4.464-7.812c1.248-2.808,2.399-5.711,3.456-8.712
c1.055-3,2.124-6.012,3.204-9.036c1.08-3.024,2.292-5.904,3.636-8.64l-0.144-0.072c-1.584,1.969-3.48,4.201-5.688,6.696
c-2.208,2.497-4.584,5.076-7.128,7.74c-2.545,2.664-5.148,5.304-7.812,7.92c-2.664,2.617-5.245,5.052-7.74,7.308
c-0.72,0.673-1.357,1.321-1.908,1.944c-0.552,0.625-1.044,1.177-1.476,1.656c-0.432,0.48-0.853,0.864-1.26,1.152
c-0.409,0.288-0.876,0.432-1.404,0.432c-0.673,0-1.008-0.241-1.008-0.72c0-0.288,0.167-0.576,0.504-0.864
c0.335-0.288,0.72-0.6,1.152-0.936c0.432-0.335,0.852-0.659,1.26-0.972c0.407-0.312,0.708-0.636,0.9-0.972
c1.392-2.399,2.58-4.919,3.564-7.56c0.983-2.639,1.908-5.292,2.772-7.956c0.864-2.664,1.775-5.328,2.736-7.992
c0.959-2.664,2.099-5.244,3.42-7.74c1.319-2.495,2.927-4.883,4.824-7.164c1.896-2.279,4.236-4.356,7.02-6.228l-0.144-0.144
c-1.584,0.72-3.432,1.393-5.544,2.016c-2.113,0.624-4.284,1.308-6.516,2.052c-2.232,0.745-4.428,1.548-6.588,2.412
c-2.16,0.864-4.093,1.861-5.796,2.988c-1.705,1.128-3.072,2.424-4.104,3.888c-1.033,1.465-1.548,3.157-1.548,5.076
c0,1.776,0.479,3.145,1.44,4.104c0.959,0.961,2.207,1.44,3.744,1.44c1.104,0,2.111-0.216,3.024-0.648
c0.911-0.432,1.692-1.008,2.34-1.728c0.648-0.72,1.14-1.536,1.476-2.448c0.335-0.911,0.504-1.824,0.504-2.736
c0-0.288-0.012-0.576-0.036-0.864c-0.024-0.288-0.061-0.576-0.108-0.864h0.864c0.047,0.288,0.083,0.576,0.108,0.864
c0.023,0.288,0.036,0.576,0.036,0.864c0,1.2-0.216,2.316-0.648,3.348c-0.432,1.033-1.02,1.933-1.764,2.7
c-0.745,0.769-1.632,1.357-2.664,1.764c-1.033,0.408-2.149,0.612-3.348,0.612c-2.016,0-3.684-0.576-5.004-1.728
c-1.321-1.152-1.98-2.808-1.98-4.968c0-2.16,0.587-4.02,1.764-5.58c1.175-1.56,2.772-2.94,4.788-4.14
c2.016-1.199,4.392-2.279,7.128-3.24c2.736-0.96,5.639-1.872,8.712-2.736c2.543-0.72,4.596-1.319,6.156-1.8
c1.56-0.479,2.796-0.888,3.708-1.224c0.911-0.335,1.572-0.612,1.98-0.828c0.407-0.216,0.684-0.419,0.828-0.612L37.627,7.954
L89.682,8.241L64.194,46.113l0.144,0.144c0.959-1.199,2.088-2.58,3.384-4.14
c1.296-1.559,2.7-3.035,4.212-4.428c1.512-1.392,3.107-2.567,4.788-3.528c1.68-0.96,3.359-1.44,5.04-1.44
c2.927,0,4.392,1.465,4.392,4.392c0,0.769-0.277,1.681-0.828,2.736c-0.552,1.056-1.249,2.172-2.088,3.348
c-0.84,1.177-1.741,2.365-2.7,3.564c-0.961,1.201-1.861,2.365-2.7,3.492c-0.841,1.128-1.537,2.185-2.088,3.168
c-0.552,0.984-0.828,1.812-0.828,2.484c0,0.529,0.155,0.972,0.468,1.332c0.312,0.36,0.731,0.54,1.26,0.54
c1.104,0,2.315-0.348,3.636-1.044c1.32-0.695,2.688-1.607,4.104-2.736c1.415-1.127,2.819-2.387,4.212-3.78
c1.392-1.392,2.675-2.772,3.852-4.14c1.176-1.368,2.232-2.664,3.168-3.888s1.62-2.22,2.052-2.988l0.432,0.144
c-0.529,0.913-1.272,2.016-2.232,3.312c-0.96,1.296-2.052,2.664-3.276,4.104c-1.224,1.44-2.545,2.869-3.96,4.284
c-1.417,1.417-2.833,2.689-4.248,3.816c-1.417,1.128-2.82,2.041-4.212,2.736c-1.393,0.695-2.689,1.044-3.888,1.044
c-1.249,0-2.268-0.385-3.06-1.152c-0.792-0.767-1.188-1.823-1.188-3.168c0-0.959,0.276-2.016,0.828-3.168
c0.551-1.152,1.248-2.315,2.088-3.492c0.839-1.176,1.739-2.352,2.7-3.528c0.959-1.175,1.859-2.292,2.7-3.348
c0.839-1.056,1.536-2.027,2.088-2.916c0.551-0.888,0.828-1.644,0.828-2.268c0-0.768-0.216-1.296-0.648-1.584
c-0.432-0.288-0.96-0.432-1.584-0.432c-1.2,0-2.532,0.444-3.996,1.332c-1.464,0.889-2.977,2.052-4.536,3.492
c-1.561,1.44-3.108,3.06-4.644,4.86c-1.537,1.8-2.988,3.612-4.356,5.436c-1.368,1.825-2.568,3.553-3.6,5.184
c-1.033,1.632-1.836,3.024-2.412,4.176h-4.68c2.64-4.127,5.352-8.327,8.136-12.6c2.783-4.271,5.555-8.52,8.316-12.744
c2.76-4.223,5.46-8.388,8.1-12.492c2.639-4.104,5.136-8.028,7.488-11.772L89.682,8.241
L129.928,39.85c-1.152,1.296-2.448,2.329-3.888,3.096c-1.44,0.769-2.856,1.152-4.248,1.152
c-1.344,0-2.497-0.299-3.456-0.9c-0.961-0.6-1.705-1.307-2.232-2.124h-0.144c-0.48,1.825-1.368,3.769-2.664,5.832
c-1.296,2.064-2.844,3.96-4.644,5.688c-1.8,1.728-3.78,3.168-5.94,4.32c-2.16,1.152-4.368,1.728-6.624,1.728
c-2.064,0-3.625-0.6-4.68-1.8c-1.057-1.199-1.584-2.808-1.584-4.824c0-1.055,0.264-2.279,0.792-3.672
c0.528-1.392,1.26-2.795,2.196-4.212c0.936-1.415,2.04-2.808,3.312-4.176c1.271-1.368,2.651-2.592,4.14-3.672
c1.487-1.08,3.06-1.944,4.716-2.592c1.656-0.648,3.323-0.972,5.004-0.972c1.968,0,3.492,0.576,4.572,1.728
c1.08,1.152,1.667,2.641,1.764,4.464c0.096,1.104,0.612,2.124,1.548,3.06s2.219,1.404,3.852,1.404c1.44,0,2.796-0.36,4.068-1.08
c1.271-0.72,2.459-1.656,3.564-2.808L129.928,39.85
L93.713,53.746c0,1.249,0.24,2.232,0.72,2.952
c0.479,0.72,1.199,1.08,2.16,1.08c1.296,0,2.58-0.348,3.852-1.044c1.271-0.695,2.496-1.607,3.672-2.736
c1.176-1.127,2.268-2.412,3.276-3.852c1.008-1.44,1.883-2.927,2.628-4.464c0.744-1.536,1.332-3.036,1.764-4.5
c0.432-1.464,0.648-2.796,0.648-3.996c0-1.008-0.252-1.86-0.756-2.556c-0.504-0.695-1.285-1.044-2.34-1.044
c-1.008,0-2.088,0.324-3.24,0.972c-1.152,0.648-2.316,1.5-3.492,2.556c-1.177,1.057-2.293,2.281-3.348,3.672
c-1.056,1.393-2.005,2.833-2.844,4.32c-0.84,1.488-1.501,2.977-1.98,4.464C93.952,51.058,93.713,52.449,93.713,53.746
L153.688,7.954c-4.273,6.48-7.992,12.084-11.16,16.812c-3.168,4.728-5.881,8.772-8.137,12.132
c-2.256,3.36-4.104,6.132-5.543,8.316c-1.44,2.185-2.568,3.973-3.384,5.364c-0.817,1.393-1.38,2.496-1.692,3.312
c-0.313,0.816-0.468,1.512-0.468,2.088c0,1.2,0.528,1.8,1.584,1.8c1.199,0,2.604-0.492,4.212-1.476
c1.608-0.983,3.336-2.328,5.184-4.032c1.848-1.703,3.732-3.696,5.652-5.976c1.92-2.279,3.791-4.716,5.615-7.308l0.793,0.288
c-1.729,2.448-3.553,4.812-5.473,7.092c-1.92,2.281-3.77,4.261-5.543,5.94c-2.353,2.208-4.382,3.816-6.085,4.824
c-1.704,1.008-3.252,1.512-4.644,1.512c-1.488,0-2.556-0.336-3.204-1.008c-0.648-0.671-0.972-1.559-0.972-2.664
c0-1.008,0.18-2.052,0.54-3.132c0.36-1.08,0.972-2.376,1.836-3.888c0.864-1.512,2.003-3.348,3.42-5.508
c1.415-2.16,3.168-4.812,5.256-7.956c2.088-3.143,4.548-6.887,7.38-11.232c2.832-4.344,6.096-9.443,9.791-15.3H153.688
L170.174,39.418c-0.72,1.2-1.62,2.52-2.699,3.96c-1.08,1.44-2.305,2.869-3.673,4.284
c-1.367,1.416-2.832,2.784-4.392,4.104c-1.561,1.32-3.181,2.496-4.86,3.528c-1.681,1.033-3.372,1.848-5.075,2.448
c-1.705,0.6-3.373,0.9-5.005,0.9c-2.016,0-3.576-0.517-4.68-1.548c-1.104-1.031-1.656-2.507-1.656-4.428
c0-2.112,0.636-4.332,1.908-6.66c1.271-2.328,2.892-4.475,4.86-6.444c1.968-1.968,4.127-3.6,6.479-4.896
c2.352-1.296,4.608-1.944,6.769-1.944c1.199,0,2.135,0.252,2.808,0.756c0.672,0.504,1.008,1.236,1.008,2.196
c0,1.152-0.624,2.268-1.872,3.348s-2.771,2.064-4.571,2.952c-1.801,0.889-3.733,1.681-5.796,2.376
c-2.064,0.696-3.889,1.212-5.473,1.548c-0.528,0.961-0.961,2.041-1.296,3.24c-0.336,1.201-0.504,2.401-0.504,3.6
c0,0.576,0.06,1.141,0.18,1.692c0.119,0.553,0.312,1.057,0.576,1.512c0.264,0.457,0.623,0.828,1.08,1.116
c0.456,0.288,1.02,0.432,1.692,0.432c1.584,0,3.443-0.515,5.58-1.548c2.135-1.032,4.308-2.412,6.516-4.14
c2.207-1.728,4.32-3.695,6.336-5.904c2.016-2.208,3.744-4.488,5.185-6.84L170.174,39.418
L158.51,35.602
c0-0.672-0.18-1.176-0.54-1.512c-0.359-0.335-0.804-0.504-1.332-0.504c-1.008,0-2.1,0.396-3.275,1.188
c-1.177,0.792-2.34,1.776-3.492,2.952c-1.152,1.177-2.196,2.437-3.132,3.78c-0.937,1.344-1.645,2.545-2.124,3.6
c1.055-0.191,2.376-0.563,3.96-1.116c1.584-0.551,3.107-1.235,4.572-2.052c1.463-0.816,2.724-1.764,3.779-2.844
C157.982,38.014,158.51,36.85,158.51,35.602
L193.934,39.489c-1.439,2.304-3.108,4.597-5.004,6.876c-1.896,2.281-3.973,4.333-6.228,6.156
c-2.257,1.825-4.717,3.301-7.381,4.428c-2.663,1.127-5.507,1.692-8.531,1.692c-1.152,0-2.232-0.144-3.24-0.432
s-1.885-0.72-2.628-1.296c-0.744-0.576-1.344-1.308-1.8-2.196c-0.456-0.888-0.685-1.932-0.685-3.132
c0-1.248,0.408-2.376,1.225-3.384c0.816-1.008,1.919-1.512,3.312-1.512c0.72,0,1.308,0.18,1.764,0.54s0.685,0.9,0.685,1.62
c0,0.672-0.169,1.249-0.504,1.728c-0.337,0.48-0.841,0.72-1.513,0.72c-0.528,0-0.948-0.144-1.26-0.432
c-0.312-0.288-0.517-0.648-0.611-1.08c-0.529,0.288-0.888,0.708-1.08,1.26c-0.191,0.552-0.288,1.116-0.288,1.692
c0,1.681,0.637,2.941,1.908,3.78c1.271,0.84,2.699,1.26,4.283,1.26c1.009,0,1.884-0.204,2.628-0.612
c0.744-0.407,1.368-0.936,1.872-1.584s0.876-1.404,1.116-2.268c0.239-0.864,0.36-1.728,0.36-2.592c0-0.911-0.156-1.859-0.468-2.844
c-0.313-0.983-0.661-1.955-1.045-2.916c-0.385-0.959-0.744-1.908-1.079-2.844c-0.337-0.936-0.505-1.811-0.505-2.628
c0-1.055,0.217-2.003,0.648-2.844c0.432-0.839,1.02-1.548,1.764-2.124s1.596-1.02,2.556-1.332c0.959-0.312,1.968-0.468,3.023-0.468
c1.92,0,3.479,0.421,4.681,1.26c1.199,0.84,1.8,1.957,1.8,3.348c0,1.249-0.468,2.16-1.404,2.736
c-0.936,0.576-1.979,0.864-3.132,0.864c0.288-0.527,0.54-1.163,0.756-1.908c0.216-0.744,0.324-1.428,0.324-2.052
c0-0.959-0.301-1.764-0.9-2.412c-0.601-0.648-1.452-0.972-2.556-0.972c-1.393,0-2.425,0.421-3.096,1.26
c-0.672,0.841-1.008,1.861-1.008,3.06c0,1.057,0.181,2.064,0.54,3.024c0.36,0.961,0.78,1.92,1.26,2.88
c0.432,0.96,0.827,1.944,1.188,2.952c0.36,1.008,0.54,2.137,0.54,3.384c0,0.912-0.205,1.789-0.612,2.628
c-0.408,0.84-0.948,1.609-1.62,2.304c-0.671,0.696-1.428,1.285-2.267,1.764c-0.84,0.48-1.692,0.792-2.556,0.936l0.144,0.144
c2.592-0.288,5.063-1.044,7.416-2.268c2.352-1.224,4.548-2.711,6.588-4.464c2.04-1.751,3.924-3.672,5.652-5.76
c1.728-2.088,3.24-4.14,4.536-6.156L193.934,39.489
L212.726,33.297h4.68c-1.776,2.497-3.48,4.921-5.112,7.272c-1.632,2.353-3.084,4.525-4.355,6.516
c-1.272,1.992-2.293,3.744-3.061,5.256c-0.768,1.512-1.151,2.7-1.151,3.564c0,1.249,0.647,1.872,1.943,1.872
c1.009,0,2.292-0.492,3.853-1.476c1.56-0.983,3.251-2.34,5.076-4.068c1.823-1.728,3.695-3.744,5.615-6.048
c1.92-2.304,3.744-4.752,5.473-7.344l0.432,0.144c-1.296,1.969-2.82,4.093-4.572,6.372c-1.752,2.28-3.588,4.404-5.508,6.372
c-1.92,1.969-3.841,3.612-5.76,4.932c-1.92,1.321-3.721,1.98-5.4,1.98c-1.393,0-2.412-0.349-3.06-1.044
c-0.648-0.695-0.972-1.523-0.972-2.484c0-0.671,0.107-1.332,0.323-1.98c0.217-0.648,0.443-1.307,0.685-1.98l-0.145-0.072
c-0.624,0.673-1.403,1.452-2.34,2.34c-0.936,0.889-1.943,1.717-3.023,2.484c-1.08,0.769-2.196,1.417-3.349,1.944
c-1.151,0.527-2.257,0.792-3.312,0.792c-1.776,0-3.024-0.553-3.744-1.656s-1.08-2.351-1.08-3.744c0-1.967,0.623-4.14,1.872-6.516
c1.247-2.376,2.832-4.608,4.752-6.696c1.919-2.088,4.007-3.827,6.264-5.22c2.256-1.392,4.393-2.088,6.408-2.088
c0.96,0,1.8,0.133,2.521,0.396c0.72,0.265,1.319,0.625,1.8,1.08c0.479,0.457,0.852,0.972,1.116,1.548
c0.263,0.576,0.468,1.177,0.611,1.8h0.145L212.726,33.297
L189.182,53.458c0,1.104,0.227,1.956,0.684,2.556
c0.456,0.601,1.092,0.9,1.908,0.9c0.815,0,1.775-0.299,2.88-0.9c1.104-0.6,2.256-1.404,3.456-2.412
c1.199-1.008,2.387-2.171,3.563-3.492c1.176-1.319,2.22-2.724,3.133-4.212c0.911-1.487,1.655-3,2.231-4.536
c0.576-1.536,0.864-2.999,0.864-4.392c0-1.104-0.312-1.944-0.937-2.52c-0.624-0.576-1.393-0.864-2.304-0.864
c-1.439,0-3.049,0.625-4.824,1.872c-1.776,1.249-3.456,2.844-5.04,4.788c-1.584,1.944-2.916,4.093-3.995,6.444
C189.722,49.042,189.182,51.297,189.182,53.458
L249.588,7.954c-4.272,6.48-7.992,12.084-11.16,16.812c-3.168,4.728-5.88,8.772-8.136,12.132
c-2.257,3.36-4.104,6.132-5.544,8.316c-1.439,2.185-2.568,3.973-3.384,5.364c-0.816,1.393-1.381,2.496-1.692,3.312
c-0.312,0.816-0.468,1.512-0.468,2.088c0,1.2,0.527,1.8,1.584,1.8c1.199,0,2.604-0.492,4.212-1.476
c1.607-0.983,3.336-2.328,5.185-4.032c1.847-1.703,3.731-3.696,5.651-5.976c1.92-2.279,3.791-4.716,5.616-7.308l0.792,0.288
c-1.728,2.448-3.553,4.812-5.472,7.092c-1.921,2.281-3.77,4.261-5.544,5.94c-2.353,2.208-4.381,3.816-6.084,4.824
c-1.705,1.008-3.253,1.512-4.645,1.512c-1.488,0-2.556-0.336-3.204-1.008c-0.647-0.671-0.972-1.559-0.972-2.664
c0-1.008,0.18-2.052,0.54-3.132s0.972-2.376,1.836-3.888c0.864-1.512,2.004-3.348,3.42-5.508c1.415-2.16,3.168-4.812,5.256-7.956
c2.088-3.143,4.548-6.887,7.38-11.232c2.832-4.344,6.096-9.443,9.792-15.3H249.588
L266.074,39.418c-0.72,1.2-1.62,2.52-2.699,3.96c-1.08,1.44-2.305,2.869-3.673,4.284
c-1.367,1.416-2.832,2.784-4.392,4.104c-1.561,1.32-3.181,2.496-4.86,3.528c-1.681,1.033-3.372,1.848-5.075,2.448
c-1.705,0.6-3.373,0.9-5.005,0.9c-2.016,0-3.576-0.517-4.68-1.548c-1.104-1.031-1.656-2.507-1.656-4.428
c0-2.112,0.636-4.332,1.908-6.66c1.271-2.328,2.892-4.475,4.86-6.444c1.968-1.968,4.127-3.6,6.479-4.896
c2.352-1.296,4.608-1.944,6.769-1.944c1.199,0,2.135,0.252,2.808,0.756c0.672,0.504,1.008,1.236,1.008,2.196
c0,1.152-0.624,2.268-1.872,3.348s-2.771,2.064-4.571,2.952c-1.801,0.889-3.733,1.681-5.796,2.376
c-2.064,0.696-3.889,1.212-5.473,1.548c-0.528,0.961-0.961,2.041-1.296,3.24c-0.336,1.201-0.504,2.401-0.504,3.6
c0,0.576,0.06,1.141,0.18,1.692c0.119,0.553,0.312,1.057,0.576,1.512c0.264,0.457,0.623,0.828,1.08,1.116
c0.456,0.288,1.02,0.432,1.692,0.432c1.584,0,3.443-0.515,5.58-1.548c2.135-1.032,4.308-2.412,6.516-4.14
c2.207-1.728,4.32-3.695,6.336-5.904c2.016-2.208,3.744-4.488,5.185-6.84L266.074,39.418
L254.41,35.602
c0-0.672-0.18-1.176-0.54-1.512c-0.359-0.335-0.804-0.504-1.332-0.504c-1.008,0-2.1,0.396-3.275,1.188
c-1.177,0.792-2.34,1.776-3.492,2.952c-1.152,1.177-2.196,2.437-3.132,3.78c-0.937,1.344-1.645,2.545-2.124,3.6
c1.055-0.191,2.376-0.563,3.96-1.116c1.584-0.551,3.107-1.235,4.572-2.052c1.463-0.816,2.724-1.764,3.779-2.844
C253.882,38.014,254.41,36.85,254.41,35.602z" />
</g>
</svg>