Search code examples
cssanimationsvgadobe-illustrator

SVG draw one letter at a time


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.


Solution

  • 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 paths 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>