CSS SVG动画一次写一个字母

Question

我试图重新创建以下行为，特别是我希望字母每次只能来自一个字母，从左到右就好像有人实际上是将它写在屏幕上一样。

http://codepen.io/itsnorbat/pen/vNEEYZ

我知道的SVG这部分代码是词您好：

<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" /> 

，这是动画：

.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; 
} 

这里是我的努力： https://jsbin.com/qelonotoxu/1/edit?html,js,output

and my animate co德：

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

正如你可以看到所有的字母都在同一时间动画，如果我改变我的行程dashoffset = 0，它不会在动画所有。任何建议，非常感谢。谢谢。

Answer 1

我会告诉你如何使用尽可能少的改变来动画每个这些字母（其实，我在三个字母后停下来），并尽可能少地改变svg path并仅使用基于css的动画keyframes。但是，从一开始就让我说，这是痛苦的和而不是的方式来动画字母的方式，你想要的。也许最后一课将是：“尝试别的。”

要查看正在操作的动画，请单击下面的“运行代码段”。我不得不做几件事情。使用stroke-dashoffset属性沿着path（其中包含多个“moveto”命令（即多个"M" s））从起始到结束（或结束到开始）的动画是可撤消的。这是因为在每次“移动”之后，笔划都会重新开始，我相信您无法控制这一点。因此，path必须消除所有'moveto'命令。然而，这意味着，坚实的中风会造成从一个字母“结束”到下一个字母“开始”的地方出现丑陋的联系。这些需要通过在每次跳到下一个字母时插入一个dasharray间隔来摆脱，这个字母是原来的'moveto'命令。我通过反复试验（痛苦地）做到了这一点。然后多个动画keyframes需要在下一个动画之后动画一个字母。首先，一个破折号逐渐加长，以完成第一个字母，然后是基本上无限的间隔，以隐藏剩余的字母。然后在第二个字母上插入正确的间隔，并重复该过程。

这里的部分问题是，路径中的字母被'moveto'命令分隔开。在你的问题中，你链接到的代码文件显示你正在寻找的行为，你会发现路径实际上是连续的，字母之间没有间隔......通过改变stroke-dashoffset更容易使css动画化。如果这就是你想要的，很好，但是你将不得不从根本上改变（即回到Illustrator等）你正在使用的图像，你可能会也可能不会愿意或不能做的。

您还在可能单独为此图像中的每个字母设置动画。但是，如果您确实这样做了，我认为最好的策略是将每个“字母”的单个单块单元path单元分成单独的path。然后，你必须为第一个字母设置动画（可能使用stroke-dashoffset，但可能是另一种方式），当完成时，开始下一个字母等。我想你可以尝试使用严格的基于css的动画来做到这一点。然而，最后，我认为使用某种基于JavaScript的动画可能更好（更高效，更广泛适用），以便您可以更加程序化地控制事物。

.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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t 
 
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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t 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 
 
\t \t C253.882,38.014,254.41,36.85,254.41,35.602z" /> 
 
    </g> 
 
</svg>