Animate dotted line in SVG

Viewed 665

I need to animate the dotted line in SVG.

My Work

.paths {
  fill: none;
  stroke: grey;
  stroke-dasharray: 1440;
  stroke-width: 1440;
  stroke-linejoin: round;
}

.mask {
  fill: #000000;
  stroke: white;
  stroke-width: 2;
  stroke-dasharray: 1440;
  stroke-dashoffset: 1440;
  animation: dash 1s linear alternate infinite;
}

/* does not work in IE, need JS to animate there */
@keyframes dash {
  from {
    stroke-dashoffset: 1440;
  }
  to {
    stroke-dashoffset: 0;
  }
}
<svg xmlns:xlink="http://www.w3.org/1999/xlink" width="1440px" height="273px" viewBox="0 0 1440 273">
  <defs>
    <path id="path1" d="M1123.32761,257.775194 C1125.31269,257.911714 1127.29919,258.015386 1129.28728,258.086416 L1129.21587,260.08514 C1127.20586,260.013327 1125.19742,259.908511 1123.19039,259.770481 L1123.32761,257.775194 Z M1149.15549,257.721324 L1149.29867,259.716193 C1147.28887,259.860436 1145.28109,259.97275 1143.27514,260.052933 L1143.19526,258.054529 C1145.18004,257.975192 1147.16672,257.864058 1149.15549,257.721324 Z M1103.59895,255.321644 C1105.56049,255.675785 1107.52304,255.996909 1109.48673,256.285221 L1109.1962,258.264006 C1107.21086,257.972516 1105.2267,257.647856 1103.24361,257.289824 L1103.59895,255.321644 Z M1168.88749,255.288356 L1169.23041,257.258739 C1167.24336,257.604557 1165.25882,257.920261 1163.27658,258.20567 L1162.99155,256.226084 C1164.95438,255.94347 1166.91962,255.630836 1168.88749,255.288356 Z M1188.35409,250.958394 L1188.87533,252.889276 C1186.92607,253.415479 1184.97988,253.913788 1183.03651,254.384054 L1182.56612,252.440158 C1184.49241,251.974026 1186.42164,251.480057 1188.35409,250.958394 Z M1084.25085,250.741977 C1086.16784,251.304314 1088.08548,251.834299 1090.00388,252.332124 L1089.50152,254.268004 C1087.56281,253.764911 1085.62497,253.229342 1083.68788,252.661108 L1084.25085,250.741977 Z M1207.33821,244.987822 L1208.01252,246.870721 C1206.11001,247.55205 1204.21122,248.207832 1202.31583,248.837965 L1201.68487,246.9401 C1203.56568,246.314814 1205.45002,245.664022 1207.33821,244.987822 Z M1225.85178,237.605501 L1226.65478,239.437218 C1224.80575,240.247808 1222.96117,241.035193 1221.12065,241.799335 L1220.35377,239.952207 C1222.18212,239.193112 1224.01467,238.410864 1225.85178,237.605501 Z M1243.87525,229.045179 L1244.78457,230.826511 C1242.98505,231.74511 1241.19088,232.642521 1239.40158,233.518781 L1238.52195,231.722604 C1240.30125,230.85124 1242.08553,229.958778 1243.87525,229.045179 Z M1261.42046,219.519613 L1262.41643,221.253983 C1260.66426,222.260177 1258.91857,223.246868 1257.17875,224.214204 L1256.20687,222.466219 C1257.93857,221.503395 1259.67624,220.521243 1261.42046,219.519613 Z M1627.26914,207.80897 L1629.21956,208.251526 C1628.78078,210.185312 1628.32001,212.137365 1627.83724,214.107688 L1625.8947,213.631731 C1626.37476,211.672456 1626.83291,209.731535 1627.26914,207.80897 Z M1278.49891,209.229407 L1279.56454,210.921868 C1277.85538,211.998018 1276.1542,213.055892 1274.46021,214.0958 L1273.41387,212.39134 C1275.10136,211.355425 1276.79611,210.30155 1278.49891,209.229407 Z M1295.23872,198.284184 L1296.35974,199.940482 C1294.68797,201.071972 1293.02633,202.185759 1291.3737,203.282419 L1290.26786,201.615952 C1291.91537,200.522688 1293.57195,199.41229 1295.23872,198.284184 Z M1631.0542,188.234904 L1633.02987,188.545938 C1632.72173,190.503182 1632.38775,192.481868 1632.02793,194.481999 L1630.05953,194.127881 C1630.41679,192.141994 1630.74835,190.177668 1631.0542,188.234904 Z M1311.61721,186.87165 L1312.78098,188.498197 C1311.13598,189.67516 1309.50454,190.833846 1307.88488,191.975337 L1306.73273,190.340547 C1308.34847,189.201819 1309.97604,188.045879 1311.61721,186.87165 Z M1327.75521,175.071146 L1328.95067,176.674541 C1327.32647,177.885519 1325.72185,179.075558 1324.1336,180.24687 L1322.94653,178.637255 L1324.53753,177.461706 L1327.75521,175.071146 Z M1633.33305,168.458621 L1635.32824,168.597179 C1635.19105,170.572731 1635.02291,172.573908 1634.82383,174.600715 L1632.8334,174.405206 C1633.03064,172.397228 1633.19718,170.415032 1633.33305,168.458621 Z M1343.68311,163.015316 L1344.90005,164.602477 L1342.49631,166.442409 L1340.13663,168.242262 L1338.9251,166.650976 L1342.4767,163.939546 C1342.87684,163.633261 1343.27894,163.325215 1343.68311,163.015316 Z M1359.51238,150.772551 L1360.74098,152.350697 L1356.00685,156.030684 L1354.78072,154.450624 L1359.51238,150.772551 Z M1635.61723,148.48601 C1635.70897,150.466726 1635.76293,152.478657 1635.77913,154.521803 L1633.77919,154.537655 C1633.7632,152.519891 1633.70992,150.533521 1633.61937,148.578547 L1635.61723,148.48601 Z M1375.26677,138.480722 L1376.49701,140.057593 L1371.77398,143.744201 L1370.54315,142.167795 L1375.26677,138.480722 Z M1633.19245,128.479647 C1633.59284,130.427096 1633.94681,132.412826 1634.25438,134.436827 L1632.27708,134.737305 C1631.97467,132.747302 1631.62678,130.795675 1631.23342,128.882414 L1633.19245,128.479647 Z M1391.04874,126.226714 L1392.26974,127.810752 L1388.5058,130.718451 C1388.18339,130.968027 1387.85859,131.219581 1387.53123,131.473233 L1386.30624,129.892286 L1390.12519,126.939006 C1390.43491,126.700001 1390.74271,126.46261 1391.04874,126.226714 Z M1406.98073,114.102279 L1408.17977,115.703003 L1405.80923,117.483552 L1403.39122,119.309342 L1402.18411,117.714697 L1404.60612,115.885892 L1406.98073,114.102279 Z M1627.19129,109.230023 C1627.98998,111.065414 1628.73295,112.946826 1629.42021,114.874221 L1627.53639,115.545951 C1626.86425,113.660973 1626.13792,111.821687 1625.3574,110.028055 L1627.19129,109.230023 Z M1423.15144,102.260561 L1424.31262,103.88895 L1421.89948,105.617432 L1419.45083,107.386531 L1418.27638,105.767683 L1419.50857,104.875594 L1421.9458,103.122221 C1422.34909,102.833352 1422.75095,102.546143 1423.15144,102.260561 Z M1616.89406,91.8265019 C1618.13872,93.4196688 1619.32194,95.0639875 1620.44368,96.7594041 L1618.77571,97.8629848 C1617.68288,96.2112645 1616.53032,94.6095503 1615.31801,93.0577883 L1616.89406,91.8265019 Z M1439.66882,90.8937273 L1440.77103,92.5625997 C1439.13002,93.6464073 1437.47001,94.7577896 1435.78903,95.8978018 L1434.66647,94.2425514 C1436.35412,93.0980136 1438.02091,91.9820924 1439.66882,90.8937273 Z M1456.65814,80.262159 L1457.67166,81.9863339 C1455.97755,82.9821795 1454.26607,84.009305 1452.53577,85.0682626 L1451.49176,83.36238 C1453.23205,82.2973056 1454.95369,81.2640836 1456.65814,80.262159 Z M1602.43466,77.6278689 C1604.06185,78.8604769 1605.62973,80.1429259 1607.13827,81.4752008 L1605.81435,82.9742797 C1604.3435,81.6752891 1602.81441,80.4245689 1601.22701,79.2221036 L1602.43466,77.6278689 Z M-78.5464409,80.1810759 L-77.8041165,82.0382121 L-78.0837087,82.1500046 L-78.8264397,80.2930311 L-78.5464409,80.1810759 Z M-59.9314676,72.9002172 L-59.2171165,74.7682917 C-61.0774103,75.4796676 -62.94244,76.1978128 -64.8122056,76.9227274 L-64.8122056,76.9227274 L-65.5351776,75.0579723 C-63.6625459,74.3319465 -61.7946426,73.6126948 -59.9314676,72.9002172 L-59.9314676,72.9002172 Z M1474.30911,70.7113881 L1475.18977,72.5070587 C1473.43084,73.3697016 1471.65526,74.269521 1469.86186,75.2067311 L1468.93554,73.4341807 C1470.74389,72.4891567 1472.53469,71.5816295 1474.30911,70.7113881 Z M1584.99313,67.326038 C1586.85734,68.1749035 1588.67051,69.0668343 1590.43261,70.0018452 L1589.49516,71.7685356 C1587.76896,70.8525762 1585.99202,69.9784658 1584.16432,69.1462191 L1584.99313,67.326038 Z M-41.1584271,65.8923933 L-40.4742965,67.7717457 C-42.3455906,68.4529428 -44.2218471,69.1412323 -46.1030658,69.836614 L-46.1030658,69.836614 L-46.7964965,67.9606732 C-44.9121861,67.2641486 -43.0328296,66.574722 -41.1584271,65.8923933 L-41.1584271,65.8923933 Z M1492.79726,62.7886941 L1493.47778,64.6693575 C1491.64083,65.3340569 1489.7873,66.0444582 1487.9162,66.8004971 L1487.16693,64.9461517 C1489.06054,64.1810176 1490.93698,63.461837 1492.79726,62.7886941 Z M1566.11753,60.654598 C1568.09433,61.181211 1570.02926,61.7431318 1571.92229,62.3403751 L1571.32054,64.2477015 C1569.45651,63.6596076 1567.55056,63.1061016 1565.60269,62.5871982 L1566.11753,60.654598 Z M-22.2844901,59.2040051 L-21.6329904,61.0949171 C-23.5150223,61.7433573 -25.4022596,62.3992362 -27.2947021,63.062554 L-27.2947021,63.062554 L-27.9562584,61.1751369 C-26.060473,60.5106474 -24.1698836,59.8536035 -22.2844901,59.2040051 L-22.2844901,59.2040051 Z M1512.1888,57.3379301 L1512.57061,59.3011476 C1510.65566,59.6735671 1508.72396,60.1027581 1506.77461,60.5883876 L1506.29114,58.6477033 C1508.27385,58.1537626 1510.23944,57.7170436 1512.1888,57.3379301 Z M1546.35809,56.751561 C1548.3801,57.0280411 1550.36791,57.3332852 1552.32152,57.6673018 L1551.98447,59.6386955 C1550.05299,59.3084646 1548.08722,59.0066041 1546.08714,58.7331227 L1546.35809,56.751561 Z M1532.30429,55.4965393 L1532.26735,57.4961982 C1530.30361,57.45993 1528.32339,57.492429 1526.32588,57.5930941 L1526.22521,55.595629 C1528.26825,55.49267 1530.29435,55.4594179 1532.30429,55.4965393 Z M341.468329,52.2749039 C343.202397,53.2872484 344.921385,54.3211941 346.625292,55.37674 L346.625292,55.37674 L345.572045,57.0769369 C343.882995,56.0305948 342.178977,55.0056537 340.459989,54.0021127 L340.459989,54.0021127 Z M-3.30069717,52.8580177 L-2.68453709,54.7607386 C-4.57748934,55.3737353 -6.47591122,55.9945475 -8.37980267,56.6231753 L-8.37980267,56.6231753 L-9.0068667,54.7240201 C-7.09935092,54.0941955 -5.19729443,53.4721947 -3.30069717,52.8580177 L-3.30069717,52.8580177 Z M15.798896,46.8817504 L16.3766682,48.7964774 C14.4716779,49.3713115 12.5609239,49.9543804 10.6444061,50.5456841 L10.6444061,50.5456841 L10.0547717,48.6345767 C11.975232,48.0420567 13.8899401,47.4577812 15.798896,46.8817504 L15.798896,46.8817504 Z M323.687712,42.9011856 C325.506396,43.7626404 327.310268,44.6453372 329.099326,45.5492758 L329.099326,45.5492758 L328.197395,47.3343588 C326.423517,46.4380897 324.634906,45.5628608 322.831561,44.7086717 L322.831561,44.7086717 Z M35.0479454,41.2985098 L35.583826,43.2253809 C33.6679805,43.7581953 31.7460571,44.2996916 29.8180561,44.8498701 L29.8180561,44.8498701 L29.2692401,42.9266434 C31.20154,42.3752382 33.127775,41.832527 35.0479454,41.2985098 L35.0479454,41.2985098 Z M54.4137086,36.1554872 L54.9038177,38.0945057 C52.9760606,38.5817684 51.0418747,39.0782129 49.1012602,39.5838393 L49.1012602,39.5838393 L48.5969961,37.6484536 C50.5423146,37.1416016 52.4812187,36.643946 54.4137086,36.1554872 L54.4137086,36.1554872 Z M305.208518,35.0703932 C307.091705,35.7792274 308.960599,36.5085766 310.815199,37.2584411 L310.815199,37.2584411 L310.065506,39.1126151 C308.225906,38.3688152 306.372062,37.6453394 304.503972,36.9421878 L304.503972,36.9421878 Z M73.8034822,31.5145207 L74.2436816,33.4654755 C72.3025074,33.9034681 70.3545091,34.3512054 68.3996867,34.8086875 L68.3996867,34.8086875 L67.9439456,32.8613046 C69.9039324,32.4026139 71.8571112,31.9536859 73.8034822,31.5145207 L73.8034822,31.5145207 Z M286.127378,28.7316532 C288.059932,29.2922946 289.978841,29.8725317 291.884104,30.4723651 L291.884104,30.4723651 L291.283506,32.3800555 C289.392675,31.7847656 287.488222,31.2088996 285.570145,30.6524581 L285.570145,30.6524581 Z M93.4176489,27.374151 L93.8026966,29.3367356 C91.8508972,29.7196674 89.8918554,30.1129389 87.9255713,30.5165504 L87.9255713,30.5165504 L87.5234237,28.5573982 C89.4953898,28.1526204 91.4601315,27.7582046 93.4176489,27.374151 L93.4176489,27.374151 Z M266.670617,23.8473546 C268.642665,24.2687694 270.601741,24.708821 272.547842,25.1675104 L272.547842,25.1675104 L272.089022,27.11417 C270.15654,26.6586908 268.211088,26.2216993 266.252666,25.8031963 L266.252666,25.8031963 Z M113.12364,23.81784 L113.447966,25.791368 C111.485224,26.1139209 109.514773,26.4474775 107.536613,26.7920379 L107.536613,26.7920379 L107.193416,24.821704 C109.177847,24.4760513 111.154588,24.1414299 113.12364,23.81784 L113.12364,23.81784 Z M132.960422,20.8973251 L133.217567,22.8807253 C131.248015,23.1360758 129.270265,23.4031229 127.284319,23.681867 L127.284319,23.681867 L127.006327,21.7012811 C128.9992,21.4215647 130.983898,21.1535793 132.960422,20.8973251 L132.960422,20.8973251 Z M246.908397,20.3110525 C248.903634,20.601611 250.886667,20.9097036 252.857495,21.2353313 L252.857495,21.2353313 L252.531468,23.2085789 C250.573255,22.8850357 248.602828,22.5789014 246.620185,22.290177 L246.620185,22.290177 Z M152.90331,18.6843349 L153.086024,20.6759712 C151.109111,20.8573348 149.123449,21.0511805 147.129037,21.2575088 L147.129037,21.2575088 L146.923229,19.2681263 C148.925315,19.061004 150.918676,18.8664067 152.90331,18.6843349 L152.90331,18.6843349 Z M226.963564,18.0248091 C228.970843,18.1950729 230.966703,18.3817432 232.951143,18.5848206 L232.951143,18.5848206 L232.747536,20.5744297 C230.774638,20.3725334 228.790301,20.1869408 226.794525,20.0176527 L226.794525,20.0176527 Z M172.896989,17.2589283 L172.997287,19.2564118 C171.013922,19.3560012 169.021191,19.4689474 167.019095,19.5952506 L167.019095,19.5952506 L166.893175,17.5992185 C168.903786,17.4723781 170.905058,17.3589478 172.896989,17.2589283 L172.896989,17.2589283 Z M206.992853,16.8834341 C209.00573,16.9447694 211.007928,17.0214428 212.999449,17.1134549 L212.999449,17.1134549 L212.907144,19.1113237 C210.92611,19.0197961 208.934375,18.9435234 206.931939,18.8825063 L206.931939,18.8825063 Z M192.934298,16.7036306 L192.943239,18.7036107 C190.958051,18.7124854 188.962846,18.7356444 186.957622,18.7730881 L186.957622,18.7730881 L186.920283,16.7734367 C188.934948,16.7358167 190.939619,16.7125478 192.934298,16.7036306 L192.934298,16.7036306 Z" />
    <mask id="mask1">
      <use class="mask" xlink:href="#path1">
    </mask>
  </defs>
  <use class="paths" xlink:href="#path1" mask="url(#mask1)" />
</svg>

Below is the reference I have added I need my SVG starts to its animation from the right side and end left side. It will be once or infinity that has been controlled with the CSS animation.

Reference

Thanks in advance.

0 Answers
Related