SVG Text Stroke Animation with Anime.js
10/22/2021
Contents
Demo
Code
HTML
<div id="container">
<svg width="419px" height="273px" viewBox="0 0 419 273" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
<g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
<g transform="translate(-90.000000, -164.000000)" fill-rule="nonzero" stroke="#F6F4F2">
<g transform="translate(91.000000, 165.000000)">
<path d="M41.015625,10.15625 L33.6328125,14.53125 C32.321608,12.255197 31.0691782,10.7312522 29.8754891,9.95937541 L29.6875,9.84375 C28.3854102,9.0104125 26.7057395,8.59375 24.6484375,8.59375 C22.1223832,8.59375 20.02605,9.30988867 18.359375,10.7421875 C16.6927,12.1484445 15.859375,13.9192602 15.859375,16.0546875 C15.859375,18.9974105 18.0468531,21.3671785 22.421875,23.1640625 L28.4375,25.625 C33.3333578,27.6041766 36.9140512,30.019517 39.1796875,32.8710938 C41.4453238,35.7226705 42.578125,39.2187293 42.578125,43.359375 C42.578125,48.9062777 40.7291852,53.4895652 37.03125,57.109375 C33.307273,60.7552266 28.6849234,62.578125 23.1640625,62.578125 C17.9296613,62.578125 13.6067879,61.0286613 10.1953125,57.9296875 C6.8359207,54.8307137 4.7395875,50.4687781 3.90625,44.84375 L13.125,42.8125 C13.525002,46.212517 14.2129954,48.6044951 15.1889994,49.9884993 L15.3125,50.15625 C17.1875094,52.7604297 19.921857,54.0625 23.515625,54.0625 C26.3541809,54.0625 28.7109281,53.1119887 30.5859375,51.2109375 C32.4609469,49.3098863 33.3984375,46.9010563 33.3984375,43.984375 C33.3984375,42.8124941 33.2356787,41.7382861 32.9101562,40.7617188 C32.5846338,39.7851514 32.0768264,38.8867229 31.3867188,38.0664062 C30.6966111,37.2460896 29.804693,36.4778682 28.7109375,35.7617188 C27.617182,35.0455693 26.3151117,34.3619824 24.8046875,33.7109375 L18.984375,31.2890625 C10.7291254,27.7994617 6.6015625,22.6953461 6.6015625,15.9765625 C6.6015625,11.4452898 8.33331602,7.65626523 11.796875,4.609375 C15.260434,1.53644297 19.5702867,0 24.7265625,0 C31.6797223,0 37.1093555,3.38538281 41.015625,10.15625 Z" id="Path"></path>
<path d="M58.6675347,1.171875L75.3472222 42.96875 92.2612847 1.171875 102.222222 1.171875 75.1519097 66.015625 48.7065972 1.171875z"></path>
<path d="M140.303819,30.078125 L165.225694,30.078125 L165.225694,32.0703125 C165.225694,36.6015852 164.691846,40.6119617 163.624132,44.1015625 C162.58246,47.3307453 160.824665,50.3515484 158.350694,53.1640625 C152.751708,59.4661773 145.629384,62.6171875 136.983507,62.6171875 C128.545965,62.6171875 121.319475,59.570343 115.303819,53.4765625 C109.288164,47.3567402 106.280382,40.0130637 106.280382,31.4453125 C106.280382,22.6952687 109.340247,15.273468 115.460069,9.1796875 C121.579892,3.05986523 129.027734,0 137.803819,0 C142.517385,0 146.918382,0.963532031 151.006944,2.890625 C154.913214,4.81771797 158.754321,7.94268672 162.530382,12.265625 L156.046007,18.4765625 C151.098066,11.8879879 145.06948,8.59375 137.960069,8.59375 C131.579829,8.59375 126.22832,10.7942488 121.905382,15.1953125 C117.582444,19.5182508 115.421007,24.9348633 115.421007,31.4453125 C115.421007,38.1640961 117.829837,43.6978949 122.647569,48.046875 C127.1528,52.0833535 132.035564,54.1015625 137.296007,54.1015625 C141.775196,54.1015625 145.798593,52.5911609 149.366319,49.5703125 C152.934046,46.5234223 154.926213,42.8776254 155.342882,38.6328125 L140.303819,38.6328125 L140.303819,30.078125 Z" id="Path"></path>
<path d="M23.5546875,113.726562L23.5546875 165.484375 14.453125 165.484375 14.453125 113.726562 0.5859375 113.726562 0.5859375 105.171875 37.3828125 105.171875 37.3828125 113.726562z"></path>
<path d="M77.4175347,148.53125 L50.1519097,148.53125 C50.3862859,151.656266 51.4019007,154.14322 53.1987847,155.992188 C54.9956687,157.815113 57.3003332,158.726562 60.1128472,158.726562 C62.3003582,158.726562 64.1102359,158.205734 65.5425347,157.164062 C66.9487918,156.122391 68.5503382,154.195327 70.3472222,151.382812 L77.7690972,155.523438 C76.6232582,157.476572 75.4123328,159.149733 74.1362847,160.542969 C72.8602367,161.936205 71.4930628,163.082027 70.0347222,163.980469 C68.5763816,164.878911 67.0008765,165.536456 65.3081597,165.953125 C63.6154429,166.369794 61.7795238,166.578125 59.8003472,166.578125 C54.1232355,166.578125 49.5659894,164.755227 46.1284722,161.109375 C42.690955,157.437482 40.9722222,152.567739 40.9722222,146.5 C40.9722222,140.484345 42.6388722,135.614602 45.9722222,131.890625 C49.331614,128.218732 53.7846945,126.382812 59.3315972,126.382812 C64.9305836,126.382812 69.3576226,128.166649 72.6128472,131.734375 C75.84203,135.276059 77.4565972,140.184864 77.4565972,146.460938 L77.4175347,148.53125 Z" id="Path"></path>
<path d="M68.3940972,141.34375 C67.1701328,136.656227 64.2144332,134.3125 59.5269097,134.3125 C58.4591961,134.3125 57.4566019,134.475259 56.5190972,134.800781 C55.5815925,135.126304 54.7287365,135.595049 53.9605035,136.207031 C53.1922705,136.819013 52.534725,137.554683 51.9878472,138.414062 C51.4409695,139.273442 51.024307,140.249995 50.7378472,141.34375 L68.3940972,141.34375 Z" id="Path"></path>
<path d="M99.5225694,144.898438L85.8506944 127.4375 96.3194444 127.4375 104.796007 138.53125 113.428819 127.4375 124.210069 127.4375 110.147569 144.898438 126.436632 165.484375 115.967882 165.484375 104.796007 151.265625 93.3506944 165.484375 82.6085069 165.484375z"></path>
<path d="M143.658854,135.640625L143.658854 165.484375 134.869792 165.484375 134.869792 135.640625 131.119792 135.640625 131.119792 127.4375 134.869792 127.4375 134.869792 113.492188 143.658854 113.492188 143.658854 127.4375 150.494792 127.4375 150.494792 135.640625z"></path>
<path d="M221.384549,114.15625 L214.001736,118.53125 C212.690532,116.255197 211.438102,114.731252 210.244413,113.959375 L210.056424,113.84375 C208.754334,113.010413 207.074663,112.59375 205.017361,112.59375 C202.491307,112.59375 200.394974,113.309889 198.728299,114.742188 C197.061624,116.148445 196.228299,117.91926 196.228299,120.054688 C196.228299,122.997411 198.415777,125.367179 202.790799,127.164062 L208.806424,129.625 C213.702281,131.604177 217.282975,134.019517 219.548611,136.871094 C221.814247,139.722671 222.947049,143.218729 222.947049,147.359375 C222.947049,152.906278 221.098109,157.489565 217.400174,161.109375 C213.676197,164.755227 209.053847,166.578125 203.532986,166.578125 C198.298585,166.578125 193.975712,165.028661 190.564236,161.929688 C187.204844,158.830714 185.108511,154.468778 184.275174,148.84375 L193.493924,146.8125 C193.893926,150.212517 194.581919,152.604495 195.557923,153.988499 L195.681424,154.15625 C197.556433,156.76043 200.290781,158.0625 203.884549,158.0625 C206.723104,158.0625 209.079852,157.111989 210.954861,155.210938 C212.82987,153.309886 213.767361,150.901056 213.767361,147.984375 C213.767361,146.812494 213.604602,145.738286 213.27908,144.761719 C212.953557,143.785151 212.44575,142.886723 211.755642,142.066406 C211.065535,141.24609 210.173617,140.477868 209.079861,139.761719 C207.986106,139.045569 206.684035,138.361982 205.173611,137.710938 L199.353299,135.289062 C191.098049,131.799462 186.970486,126.695346 186.970486,119.976562 C186.970486,115.44529 188.70224,111.656265 192.165799,108.609375 C195.629358,105.536443 199.93921,104 205.095486,104 C212.048646,104 217.478279,107.385383 221.384549,114.15625 Z" id="Path"></path>
<path d="M244.895833,135.640625L244.895833 165.484375 236.106771 165.484375 236.106771 135.640625 232.356771 135.640625 232.356771 127.4375 236.106771 127.4375 236.106771 113.492188 244.895833 113.492188 244.895833 127.4375 251.731771 127.4375 251.731771 135.640625z"></path>
<path d="M259.930556,127.4375 L268.719618,127.4375 L268.719618,130.835938 C270.334209,129.143221 271.766487,127.984378 273.016493,127.359375 C274.292541,126.70833 275.802943,126.382812 277.547743,126.382812 C279.865463,126.382812 282.287314,127.138013 284.813368,128.648438 L280.789931,136.695312 C279.123256,135.49739 277.495668,134.898438 275.907118,134.898438 C271.115427,134.898438 268.719618,138.518193 268.719618,145.757812 L268.719618,165.484375 L259.930556,165.484375 L259.930556,127.4375 Z" id="Path"></path>
<path d="M289.574653,146.1875 C289.574653,140.692681 291.540779,136.018248 295.47309,132.164062 C299.405402,128.309877 304.19702,126.382812 309.84809,126.382812 C315.525202,126.382812 320.342862,128.322897 324.301215,132.203125 C328.207485,136.083353 330.16059,140.84893 330.16059,146.5 C330.16059,152.203154 328.194464,156.981752 324.262153,160.835938 C320.3038,164.664082 315.447077,166.578125 309.69184,166.578125 C303.988687,166.578125 299.210089,164.62502 295.355903,160.71875 C291.501717,156.864564 289.574653,152.020863 289.574653,146.1875 Z" id="Path"></path>
<path d="M298.559028,146.34375 C298.559028,150.145852 299.574643,153.153635 301.605903,155.367188 C303.689247,157.606782 306.436615,158.726562 309.84809,158.726562 C313.285607,158.726562 316.032976,157.619803 318.090278,155.40625 C320.14758,153.192697 321.176215,150.236998 321.176215,146.539062 C321.176215,142.841127 320.14758,139.885428 318.090278,137.671875 C316.006934,135.43228 313.259566,134.3125 309.84809,134.3125 C306.488698,134.3125 303.767372,135.43228 301.684028,137.671875 C299.600684,139.91147 298.559028,142.802066 298.559028,146.34375 Z" id="Path"></path>
<path d="M350.46875,99.5078125L350.46875 139.742188 362.851562 127.4375 374.648438 127.4375 358.125 143.414062 375.859375 165.484375 364.453125 165.484375 351.875 149.429688 350.46875 150.835938 350.46875 165.484375 341.679688 165.484375 341.679688 99.5078125z"></path>
<path d="M417.105035,148.53125 L389.83941,148.53125 C390.073786,151.656266 391.089401,154.14322 392.886285,155.992188 C394.683169,157.815113 396.987833,158.726562 399.800347,158.726562 C401.987858,158.726562 403.797736,158.205734 405.230035,157.164062 C406.636292,156.122391 408.237838,154.195327 410.034722,151.382812 L417.456597,155.523438 C416.310758,157.476572 415.099833,159.149733 413.823785,160.542969 C412.547737,161.936205 411.180563,163.082027 409.722222,163.980469 C408.263882,164.878911 406.688377,165.536456 404.99566,165.953125 C403.302943,166.369794 401.467024,166.578125 399.487847,166.578125 C393.810736,166.578125 389.253489,164.755227 385.815972,161.109375 C382.378455,157.437482 380.659722,152.567739 380.659722,146.5 C380.659722,140.484345 382.326372,135.614602 385.659722,131.890625 C389.019114,128.218732 393.472194,126.382812 399.019097,126.382812 C404.618084,126.382812 409.045123,128.166649 412.300347,131.734375 C415.52953,135.276059 417.144097,140.184864 417.144097,146.460938 L417.105035,148.53125 Z" id="Path"></path>
<path d="M408.081597,141.34375 C406.857633,136.656227 403.901933,134.3125 399.21441,134.3125 C398.146696,134.3125 397.144102,134.475259 396.206597,134.800781 C395.269093,135.126304 394.416236,135.595049 393.648003,136.207031 C392.87977,136.819013 392.222225,137.554683 391.675347,138.414062 C391.128469,139.273442 390.711807,140.249995 390.425347,141.34375 L408.081597,141.34375 Z" id="Path"></path>
<path d="M42.34375,254.835938L16.5234375 254.835938 9.8046875 269.484375 0 269.484375 29.84375 205.382812 58.6328125 269.484375 48.671875 269.484375z"></path>
<path d="M38.6328125,246.28125L29.6875 225.773438 20.3125 246.28125z"></path>
<path d="M71.2921875,231.4375 L80.1203125,231.4375 L80.1203125,234.953125 C83.1932445,231.906235 86.6567516,230.382812 90.5109375,230.382812 C94.938043,230.382812 98.3885293,231.776028 100.8625,234.5625 C102.997927,236.932304 104.065625,240.799452 104.065625,246.164062 L104.065625,269.484375 L95.2375,269.484375 L95.2375,248.234375 C95.2375,244.484356 94.7166719,241.893236 93.675,240.460938 C92.6593699,239.002597 90.8104301,238.273438 88.128125,238.273438 C85.2114437,238.273438 83.141152,239.23697 81.9171875,241.164062 C80.7192648,243.065114 80.1203125,246.385393 80.1203125,251.125 L80.1203125,269.484375 L71.2921875,269.484375 L71.2921875,231.4375 Z" id="Path"></path>
<path d="M130.748437,231.4375L130.748437 269.484375 121.959375 269.484375 121.959375 231.4375z"></path>
<path d="M120.63125,215.617188 C120.63125,214.080721 121.19114,212.75261 122.310937,211.632812 C123.430735,210.513015 124.771867,209.953125 126.334375,209.953125 C127.922925,209.953125 129.277078,210.513015 130.396875,211.632812 C131.516672,212.726568 132.076562,214.0677 132.076562,215.65625 C132.076562,217.2448 131.516672,218.598953 130.396875,219.71875 C129.30312,220.838547 127.961987,221.398438 126.373437,221.398438 C124.784888,221.398438 123.430735,220.838547 122.310937,219.71875 C121.19114,218.598953 120.63125,217.231779 120.63125,215.617188 Z" id="Path"></path>
<path d="M148.68125,231.4375 L157.470313,231.4375 L157.470313,234.953125 C159.163029,233.182283 160.608327,231.984378 161.80625,231.359375 C163.082298,230.70833 164.683845,230.382812 166.610938,230.382812 C170.907834,230.382812 174.306238,232.257794 176.80625,236.007812 C179.56668,232.257794 183.303622,230.382812 188.017188,230.382812 C196.584939,230.382812 200.86875,235.578073 200.86875,245.96875 L200.86875,269.484375 L192.040625,269.484375 L192.040625,248.351562 C192.040625,244.705711 191.597921,242.127612 190.7125,240.617188 C189.801037,239.080721 188.303656,238.3125 186.220313,238.3125 C183.798425,238.3125 182.03412,239.223949 180.927344,241.046875 C179.820567,242.869801 179.267188,245.799459 179.267188,249.835938 L179.267188,269.484375 L170.439063,269.484375 L170.439063,248.46875 C170.439063,241.697883 168.485957,238.3125 164.579688,238.3125 C162.105717,238.3125 160.302349,239.23697 159.169531,241.085938 C158.036713,242.934905 157.470313,245.851543 157.470313,249.835938 L157.470313,269.484375 L148.68125,269.484375 L148.68125,231.4375 Z" id="Path"></path>
<path d="M246.809375,231.4375 L255.6375,231.4375 L255.6375,269.484375 L246.809375,269.484375 L246.809375,265.5 C243.189565,268.885434 239.296375,270.578125 235.129687,270.578125 C229.869245,270.578125 225.52033,268.677102 222.082812,264.875 C218.671337,260.994772 216.965625,256.151071 216.965625,250.34375 C216.965625,244.640596 218.671337,239.88804 222.082812,236.085938 C225.494288,232.283835 229.765079,230.382812 234.895312,230.382812 C239.322418,230.382812 243.293732,232.205711 246.809375,235.851562 L246.809375,231.4375 Z" id="Path"></path>
<path d="M225.95,250.34375 C225.95,253.989602 226.926553,256.958322 228.879687,259.25 C230.884906,261.56772 233.410922,262.726562 236.457812,262.726562 C239.713037,262.726562 242.343219,261.606782 244.348437,259.367188 C246.353656,257.049468 247.35625,254.106789 247.35625,250.539062 C247.35625,246.971336 246.353656,244.028657 244.348437,241.710938 C242.343219,239.445301 239.739079,238.3125 236.535937,238.3125 C233.515089,238.3125 230.989073,239.458322 228.957812,241.75 C226.952594,244.06772 225.95,246.932275 225.95,250.34375 Z" id="Path"></path>
<path d="M282.59375,239.640625L282.59375 269.484375 273.804688 269.484375 273.804688 239.640625 270.054688 239.640625 270.054688 231.4375 273.804688 231.4375 273.804688 217.492188 282.59375 217.492188 282.59375 231.4375 289.429688 231.4375 289.429688 239.640625z"></path>
<path d="M310.995312,231.4375L310.995312 269.484375 302.20625 269.484375 302.20625 231.4375z"></path>
<path d="M300.878125,215.617188 C300.878125,214.080721 301.438015,212.75261 302.557812,211.632812 C303.67761,210.513015 305.018742,209.953125 306.58125,209.953125 C308.1698,209.953125 309.523953,210.513015 310.64375,211.632812 C311.763547,212.726568 312.323437,214.0677 312.323437,215.65625 C312.323437,217.2448 311.763547,218.598953 310.64375,219.71875 C309.549995,220.838547 308.208862,221.398438 306.620312,221.398438 C305.031763,221.398438 303.67761,220.838547 302.557812,219.71875 C301.438015,218.598953 300.878125,217.231779 300.878125,215.617188 Z" id="Path"></path>
<path d="M327.13125,250.1875 C327.13125,244.692681 329.097376,240.018248 333.029687,236.164062 C336.961999,232.309877 341.753618,230.382812 347.404687,230.382812 C353.081799,230.382812 357.899459,232.322897 361.857812,236.203125 C365.764082,240.083353 367.717187,244.84893 367.717187,250.5 C367.717187,256.203154 365.751061,260.981752 361.81875,264.835938 C357.860397,268.664082 353.003675,270.578125 347.248437,270.578125 C341.545284,270.578125 336.766686,268.62502 332.9125,264.71875 C329.058314,260.864564 327.13125,256.020863 327.13125,250.1875 Z" id="Path"></path>
<path d="M336.115625,250.34375 C336.115625,254.145852 337.13124,257.153635 339.1625,259.367188 C341.245844,261.606782 343.993212,262.726562 347.404687,262.726562 C350.842205,262.726562 353.589573,261.619803 355.646875,259.40625 C357.704177,257.192697 358.732812,254.236998 358.732812,250.539062 C358.732812,246.841127 357.704177,243.885428 355.646875,241.671875 C353.563531,239.43228 350.816163,238.3125 347.404687,238.3125 C344.045296,238.3125 341.323969,239.43228 339.240625,241.671875 C337.157281,243.91147 336.115625,246.802066 336.115625,250.34375 Z" id="Path"></path>
<path d="M383.814063,231.4375 L392.642188,231.4375 L392.642188,234.953125 C395.71512,231.906235 399.178627,230.382812 403.032813,230.382812 C407.459918,230.382812 410.910404,231.776028 413.384375,234.5625 C415.519802,236.932304 416.5875,240.799452 416.5875,246.164062 L416.5875,269.484375 L407.759375,269.484375 L407.759375,248.234375 C407.759375,244.484356 407.238547,241.893236 406.196875,240.460938 C405.181245,239.002597 403.332305,238.273438 400.65,238.273438 C397.733319,238.273438 395.663027,239.23697 394.439063,241.164062 C393.24114,243.065114 392.642188,246.385393 392.642188,251.125 L392.642188,269.484375 L383.814063,269.484375 L383.814063,231.4375 Z" id="Path"></path>
</g>
</g>
</g>
</svg>
</div>
<script src="main.js"></script>
JavaScript
anime({
targets: 'svg path',
strokeDashoffset: [anime.setDashoffset, 0],
easing: 'easeInOutSine',
duration: 1500,
delay: function(el, i) { return i * 250 },
direction: 'alternate',
loop: true
});