Как оживить мой путь SVG

У меня есть SVG, я пытаюсь анимировать с анимеями.

В основном это рисунок выбора пути.

Мне удалось анимировать, но результат был неправильным.

Я хочу этот:

enter image description here 

var lineDrawing = anime({
  targets: 'path',
  strokeDashoffset: [anime.setDashoffset, 0],
  easing: 'easeInOutCubic',
  duration: 4000,
  begin: function(anim) {
    document.querySelector('path').setAttribute("stroke", "#4a56f2");
    document.querySelector('path').setAttribute("fill", "none");
  },
  complete: function(anim) {
  },
  autoplay: false
});

document.querySelector('.play-drawing').onclick = lineDrawing.restart;
body {
  margin: 20px;
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.2em;
}

#anime-demo {
  position: relative;
}

svg {
   padding: 10px;
}

button {
  background: orange;
  color: white;
  margin: 5px;
  padding: 10px;
  border-radius: 4px;
  font-family: 'Lato';
  cursor: pointer;
  border: none;
  outline: none;
}

button:hover {
  background: blue;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/animejs/2.0.2/anime.min.js"></script>
<div class="controls">
<button class="play-drawing">Draw the Anchor</button>
</div>

<div id="anime-demo">
<svg width="400" height="631" ></path><path id="path1" d="M182.961 0.223 L 181.958 0.347 181.958 4.954 L 181.958 9.561 186.584 9.561 L 191.210 9.561 191.210 4.780 L 191.210 0.000 187.587 0.049 C 185.594 0.077,183.512 0.155,182.961 0.223 M199.708 4.460 C 199.433 10.013,199.025 9.561,204.303 9.561 C 209.559 9.561,209.098 10.067,209.098 4.292 L 209.098 0.000 204.513 0.000 L 199.929 0.000 199.708 4.460 M217.625 1.928 C 217.518 2.818,217.429 4.882,217.428 6.515 L 217.425 9.483 218.389 9.676 C 218.919 9.782,220.980 9.869,222.969 9.869 L 226.586 9.869 226.786 7.509 C 226.896 6.212,226.985 4.151,226.985 2.930 L 226.985 0.710 223.978 0.511 C 222.325 0.401,220.262 0.311,219.395 0.310 L 217.819 0.308 217.625 1.928 M166.230 0.904 C 164.958 1.000,163.922 1.218,163.928 1.388 C 164.037 4.308,164.492 9.860,164.643 10.101 C 164.823 10.390,173.262 10.014,173.587 9.703 C 173.648 9.645,173.596 7.577,173.473 5.107 L 173.248 0.617 170.896 0.672 C 169.602 0.703,167.502 0.807,166.230 0.904 M235.518 1.621 C 235.426 2.002,235.254 4.126,235.137 6.342 L 234.923 10.371 238.886 10.773 C 241.066 10.993,243.001 11.232,243.186 11.303 C 243.446 11.403,244.893 3.536,244.875 2.124 C 244.874 2.020,243.103 1.769,240.941 1.565 C 238.778 1.362,236.711 1.136,236.347 1.063 C 235.859 0.965,235.642 1.111,235.518 1.621 M154.356 2.002 C 154.187 2.059,152.442 2.337,150.479 2.620 C 148.515 2.903,146.726 3.248,146.503 3.386 C 145.894 3.762,147.660 12.736,148.295 12.492 C 148.537 12.399,150.450 12.083,152.547 11.790 C 155.979 11.310,156.360 11.195,156.358 10.640 C 156.357 10.301,156.149 8.363,155.896 6.334 C 155.643 4.305,155.436 2.466,155.436 2.248 C 155.436 1.870,155.030 1.777,154.356 2.002 M253.200 3.849 C 253.200 3.930,252.768 5.950,252.240 8.338 C 251.712 10.725,251.330 12.710,251.392 12.748 C 251.633 12.899,258.930 14.649,259.317 14.649 C 259.653 14.649,262.596 6.209,262.346 5.960 C 261.967 5.580,253.200 3.557,253.200 3.849 M135.852 5.922 C 134.093 6.534,129.067 8.399,128.986 8.470 C 128.638 8.774,132.667 16.800,133.142 16.751 C 133.618 16.702,139.995 14.526,140.270 14.319 C 140.350 14.258,139.525 11.299,137.976 6.091 C 137.797 5.489,137.226 5.444,135.852 5.922 M270.351 9.196 C 270.265 9.335,269.550 11.105,268.762 13.129 C 267.974 15.152,267.265 16.962,267.187 17.151 C 267.108 17.342,267.839 17.809,268.835 18.205 C 269.819 18.596,271.576 19.387,272.738 19.963 C 273.900 20.540,274.891 20.967,274.939 20.914 C 275.180 20.647,279.129 12.569,279.047 12.511 C 278.674 12.246,271.047 8.944,270.808 8.944 C 270.642 8.944,270.436 9.057,270.351 9.196 M117.549 15.015 C 115.624 16.315,113.985 17.545,113.906 17.750 C 113.795 18.041,117.646 23.888,118.736 25.082 C 118.972 25.341,125.983 20.831,125.983 20.421 C 125.983 20.069,121.452 12.644,121.240 12.649 C 121.135 12.651,119.474 13.716,117.549 15.015 M284.163 20.715 C 282.715 23.150,281.889 24.829,282.104 24.901 C 282.302 24.967,283.939 25.995,285.743 27.187 C 287.547 28.378,289.064 29.306,289.114 29.249 C 289.741 28.528,294.217 22.046,294.217 21.859 C 294.217 21.624,290.314 18.909,287.701 17.327 L 286.581 16.649 284.163 20.715 M104.597 23.926 C 102.825 25.119,99.391 26.831,98.766 26.831 C 98.554 26.831,98.381 26.918,98.381 27.023 C 98.381 27.387,101.250 35.312,101.475 35.568 C 101.954 36.115,110.785 31.669,111.493 30.525 C 111.675 30.230,106.806 22.822,106.429 22.822 C 106.323 22.822,105.499 23.319,104.597 23.926 M298.139 30.701 L 295.122 34.255 296.134 35.085 C 296.692 35.542,298.060 36.786,299.177 37.850 C 301.701 40.256,301.207 40.364,304.966 36.592 L 308.147 33.400 306.348 31.713 C 303.127 28.693,301.403 27.139,301.279 27.143 C 301.212 27.145,299.799 28.746,298.139 30.701 M87.278 29.484 C 87.024 29.546,85.526 29.721,83.949 29.873 C 82.373 30.024,81.016 30.215,80.934 30.297 C 80.776 30.455,81.404 39.243,81.587 39.434 C 81.763 39.617,91.113 38.517,91.358 38.284 C 91.545 38.106,90.756 32.469,90.199 29.992 C 90.045 29.311,88.837 29.101,87.278 29.484 M64.225 30.758 L 62.914 30.876 62.914 35.484 L 62.914 40.093 67.695 40.093 L 72.475 40.093 72.475 36.743 C 72.475 34.901,72.387 32.750,72.279 31.963 L 72.083 30.532 68.809 30.586 C 67.009 30.616,64.946 30.693,64.225 30.758 M48.152 31.071 L 44.954 31.171 45.156 34.784 C 45.267 36.771,45.437 38.934,45.534 39.592 L 45.711 40.787 47.297 40.597 C 48.169 40.492,50.166 40.405,51.735 40.404 L 54.588 40.401 54.586 38.165 C 54.585 36.935,54.495 34.784,54.386 33.385 L 54.188 30.840 52.768 30.905 C 51.988 30.941,49.910 31.016,48.152 31.071 M31.303 33.157 C 29.607 33.559,28.045 33.896,27.833 33.906 C 27.237 33.935,27.353 34.621,28.689 38.957 C 30.160 43.734,29.795 43.245,31.508 42.730 C 32.284 42.496,33.978 42.127,35.272 41.910 C 38.014 41.449,37.879 41.806,37.149 36.944 C 36.428 32.135,36.523 32.379,35.383 32.405 C 34.835 32.417,32.999 32.756,31.303 33.157 M17.025 39.448 C 15.307 40.877,12.936 43.712,12.967 44.297 C 12.975 44.444,14.699 45.567,16.797 46.793 L 20.612 49.022 22.487 47.187 L 24.362 45.352 21.973 41.645 C 19.223 37.379,19.411 37.462,17.025 39.448 M310.509 42.649 C 308.698 44.211,307.206 45.594,307.193 45.723 C 307.166 45.995,312.174 52.380,312.437 52.409 C 312.585 52.425,319.278 47.517,319.745 47.051 C 319.963 46.832,314.335 39.768,313.965 39.797 C 313.875 39.803,312.320 41.087,310.509 42.649 M10.027 54.249 C 9.833 55.916,10.031 60.195,10.356 61.384 C 10.471 61.805,10.986 61.790,15.037 61.242 L 19.589 60.627 19.480 57.222 C 19.348 53.119,19.782 53.532,15.112 53.071 C 12.992 52.862,11.028 52.627,10.749 52.549 C 10.333 52.433,10.202 52.742,10.027 54.249 M321.203 56.318 C 319.337 57.588,317.632 58.733,317.413 58.862 C 317.118 59.037,317.368 59.622,318.389 61.145 C 319.145 62.272,320.156 63.894,320.637 64.750 C 321.118 65.606,321.670 66.306,321.864 66.307 C 322.641 66.307,329.715 61.898,329.565 61.506 C 329.266 60.728,324.967 53.971,324.782 53.990 C 324.679 54.001,323.069 55.048,321.203 56.318 M16.503 69.190 C 13.517 69.921,12.472 70.301,12.398 70.683 C 12.286 71.266,14.133 78.664,14.487 79.047 C 14.664 79.239,22.950 77.273,23.376 76.938 C 23.455 76.876,22.582 73.211,21.559 69.314 C 21.202 67.950,21.539 67.959,16.503 69.190 M329.838 71.447 C 327.633 72.560,325.785 73.510,325.731 73.558 C 325.521 73.749,329.382 81.419,329.689 81.419 C 329.931 81.419,337.459 78.178,337.936 77.868 C 338.032 77.805,334.045 69.384,333.929 69.407 C 333.884 69.416,332.043 70.334,329.838 71.447 M21.068 86.299 C 19.001 86.922,17.210 87.536,17.087 87.661 C 16.762 87.995,19.492 96.572,19.877 96.429 C 20.055 96.362,22.039 95.703,24.287 94.963 C 26.534 94.224,28.373 93.492,28.373 93.337 C 28.373 92.174,25.744 85.123,25.318 85.142 C 25.048 85.155,23.135 85.675,21.068 86.299 M336.945 87.427 C 332.289 89.314,332.494 89.035,333.638 91.942 C 334.131 93.193,334.772 94.946,335.063 95.837 C 335.355 96.727,335.686 97.457,335.800 97.459 C 336.359 97.468,344.487 94.560,344.487 94.351 C 344.487 94.218,343.793 92.271,342.945 90.024 C 342.097 87.776,341.403 85.892,341.403 85.837 C 341.403 85.644,340.912 85.819,336.945 87.427 M26.728 102.995 C 24.551 103.822,22.713 104.555,22.644 104.624 C 22.539 104.729,25.517 112.764,25.806 113.154 C 25.885 113.261,34.200 110.170,34.493 109.925 C 34.721 109.734,31.307 101.466,31.006 101.479 C 30.830 101.487,28.905 102.169,26.728 102.995 M342.542 104.039 C 338.741 105.182,338.298 105.386,338.422 105.937 C 339.135 109.091,340.695 114.088,340.941 114.001 C 341.110 113.941,343.123 113.422,345.412 112.848 C 347.702 112.274,349.624 111.779,349.682 111.746 C 349.776 111.694,349.462 110.529,347.683 104.318 C 347.428 103.427,347.125 102.712,347.010 102.728 C 346.895 102.744,344.884 103.334,342.542 104.039 M33.007 119.858 C 30.891 120.617,29.131 121.267,29.096 121.302 C 29.061 121.338,29.427 122.695,29.910 124.320 C 30.393 125.944,30.885 127.920,31.003 128.710 C 31.259 130.416,31.027 130.378,36.581 129.637 C 41.037 129.043,40.830 129.350,39.775 124.904 C 38.741 120.547,37.949 118.424,37.369 118.452 C 37.086 118.466,35.123 119.098,33.007 119.858 M347.109 121.004 C 343.941 121.724,342.791 122.107,342.791 122.442 C 342.791 124.623,344.386 130.760,344.950 130.749 C 346.006 130.730,353.109 129.338,353.342 129.104 C 353.587 128.859,351.888 119.953,351.604 119.996 C 351.507 120.011,349.483 120.465,347.109 121.004 M346.261 138.077 C 345.475 138.197,345.412 138.312,345.411 139.650 C 345.410 140.445,345.322 142.208,345.216 143.569 L 345.023 146.044 349.603 146.561 C 352.121 146.845,354.248 147.012,354.328 146.931 C 354.408 146.851,354.534 144.777,354.608 142.321 L 354.742 137.857 350.926 137.903 C 348.826 137.928,346.727 138.007,346.261 138.077 M30.840 139.528 C 30.840 139.939,30.352 141.971,29.755 144.045 C 29.158 146.119,28.707 147.841,28.753 147.872 C 28.798 147.902,30.814 148.489,33.232 149.175 L 37.629 150.423 38.388 147.918 C 39.967 142.702,40.427 140.329,39.861 140.320 C 39.734 140.318,37.756 139.973,35.466 139.553 C 30.414 138.626,30.840 138.628,30.840 139.528 M343.240 155.204 C 343.029 156.095,342.530 157.922,342.131 159.266 C 341.731 160.609,341.439 161.740,341.481 161.779 C 341.799 162.076,349.849 164.400,350.154 164.283 C 350.476 164.159,351.046 162.306,352.693 156.032 C 352.795 155.642,351.995 155.357,348.577 154.564 C 343.286 153.337,343.694 153.288,343.240 155.204 M25.339 160.127 C 24.797 162.381,24.355 164.447,24.358 164.719 C 24.363 165.165,32.898 167.359,33.251 167.006 C 33.366 166.891,35.441 158.377,35.362 158.345 C 35.335 158.334,33.439 157.860,31.149 157.292 C 28.859 156.724,26.837 156.207,26.655 156.144 C 26.460 156.076,25.921 157.707,25.339 160.127 M337.115 173.676 C 336.243 175.905,335.575 177.775,335.630 177.830 C 335.910 178.110,343.986 181.329,344.106 181.209 C 344.504 180.811,347.516 172.841,347.329 172.683 C 347.017 172.420,339.432 169.622,339.031 169.622 C 338.849 169.622,337.987 171.446,337.115 173.676 M22.419 174.758 C 21.976 177.622,21.492 182.582,21.641 182.730 C 21.798 182.888,30.607 183.847,30.715 183.718 C 30.789 183.631,31.766 175.901,31.766 175.404 C 31.766 175.129,30.590 174.828,27.988 174.439 C 25.910 174.128,23.848 173.806,23.406 173.723 C 22.675 173.586,22.585 173.679,22.419 174.758 M330.186 189.845 C 329.189 192.138,328.426 194.048,328.489 194.092 C 329.008 194.446,336.824 197.743,336.919 197.647 C 337.180 197.387,340.478 189.853,340.478 189.519 C 340.478 189.203,332.878 185.646,332.253 185.668 C 332.112 185.673,331.182 187.553,330.186 189.845 M20.971 196.145 L 20.971 200.771 22.775 200.771 C 23.766 200.771,25.848 200.681,27.401 200.571 L 30.224 200.370 30.224 196.132 C 30.224 191.093,30.695 191.519,25.110 191.519 L 20.971 191.519 20.971 196.145 M323.251 205.942 C 320.888 211.958,320.619 211.164,325.605 212.876 C 330.300 214.487,330.301 214.487,330.301 214.000 C 330.301 213.813,331.009 211.861,331.875 209.663 C 332.740 207.465,333.400 205.630,333.340 205.586 C 333.280 205.541,331.843 204.934,330.146 204.237 C 328.450 203.540,326.552 202.755,325.928 202.493 L 324.794 202.015 323.251 205.942 M25.289 208.958 C 23.508 209.173,21.941 209.361,21.806 209.377 C 21.671 209.393,21.630 209.857,21.716 210.409 C 21.801 210.960,22.105 213.052,22.390 215.057 C 22.878 218.490,22.947 218.695,23.559 218.555 C 23.917 218.473,25.991 218.090,28.169 217.704 L 32.128 217.000 31.992 216.056 C 31.916 215.537,31.666 213.620,31.435 211.796 L 31.015 208.481 29.771 208.524 C 29.087 208.548,27.070 208.743,25.289 208.958 M321.588 222.897 L 319.198 223.002 319.198 224.203 C 319.198 226.569,321.349 234.695,321.976 234.695 C 322.132 234.695,323.982 234.071,326.088 233.308 C 328.193 232.544,330.088 231.920,330.298 231.920 C 330.525 231.920,330.609 231.699,330.504 231.380 C 329.549 228.476,328.744 225.483,328.576 224.213 L 328.371 222.668 326.175 222.730 C 324.967 222.764,322.903 222.839,321.588 222.897 M29.031 225.922 C 26.933 226.490,25.139 227.033,25.044 227.128 C 24.840 227.332,27.122 235.574,27.437 235.768 C 28.035 236.138,36.439 233.105,36.231 232.594 C 36.014 232.061,33.924 225.119,33.924 224.931 C 33.924 224.687,32.617 224.951,29.031 225.922 M329.607 241.549 C 324.991 243.750,325.164 243.143,327.706 248.227 L 329.738 252.290 333.797 250.201 C 336.030 249.051,337.900 248.091,337.953 248.066 C 338.121 247.988,333.925 239.629,333.728 239.652 C 333.624 239.664,331.769 240.517,329.607 241.549 M34.718 242.289 C 32.525 243.205,30.669 244.016,30.593 244.092 C 30.417 244.268,33.337 251.285,34.099 252.518 C 34.314 252.865,42.547 248.663,42.432 248.265 C 42.151 247.288,39.026 240.557,38.870 240.590 C 38.779 240.609,36.911 241.374,34.718 242.289 M338.165 257.680 C 336.299 258.757,334.599 259.646,334.387 259.657 C 333.812 259.686,333.825 259.715,336.237 263.895 C 338.979 268.646,338.455 268.492,342.923 265.857 C 347.323 263.263,347.147 264.005,344.449 259.409 C 341.890 255.051,342.454 255.206,338.165 257.680 M42.176 258.064 C 40.014 259.205,38.245 260.250,38.244 260.387 C 38.241 260.759,42.244 267.962,42.563 268.159 C 42.828 268.323,50.578 264.078,50.578 263.769 C 50.578 263.489,46.416 255.990,46.261 255.990 C 46.176 255.989,44.338 256.923,42.176 258.064 M51.190 273.241 C 46.560 276.057,46.685 275.548,49.540 279.952 L 51.968 283.696 55.513 281.382 C 57.464 280.109,59.235 278.965,59.449 278.840 C 59.732 278.676,59.366 277.896,58.120 276.007 C 57.174 274.573,56.105 272.880,55.745 272.244 C 54.929 270.802,55.356 270.708,51.190 273.241 M347.189 273.333 C 345.198 274.557,343.567 275.703,343.565 275.878 C 343.562 276.172,347.656 282.953,348.177 283.517 C 348.303 283.653,350.032 282.724,352.020 281.453 C 354.007 280.182,355.789 279.091,355.979 279.027 C 356.377 278.895,351.588 271.083,351.118 271.097 C 350.948 271.103,349.180 272.109,347.189 273.333 M60.722 288.058 C 56.412 291.096,56.531 290.449,59.529 294.592 C 62.527 298.736,61.954 298.649,66.215 295.605 C 70.347 292.655,70.235 293.421,67.155 289.139 C 64.123 284.925,64.966 285.067,60.722 288.058 M357.132 288.403 C 355.351 289.587,353.692 290.672,353.445 290.815 C 353.018 291.062,357.765 298.843,358.342 298.843 C 358.511 298.843,365.680 294.082,366.051 293.724 C 366.122 293.655,365.895 293.286,365.547 292.905 C 365.198 292.525,364.051 290.860,362.997 289.206 C 360.733 285.653,361.178 285.714,357.132 288.403 M71.306 302.968 C 69.234 304.206,67.467 305.290,67.380 305.377 C 67.293 305.464,67.916 306.979,68.765 308.743 C 69.613 310.507,70.394 312.402,70.500 312.953 C 70.606 313.504,70.782 313.954,70.890 313.953 C 71.263 313.948,79.607 311.552,79.750 311.409 C 80.107 311.052,76.694 303.086,75.330 301.091 C 75.145 300.821,74.027 301.343,71.306 302.968 M367.030 303.482 C 365.095 304.828,363.447 305.995,363.368 306.075 C 363.262 306.180,366.912 311.862,367.813 312.995 C 367.865 313.061,369.588 312.193,371.642 311.068 C 373.695 309.942,375.504 309.021,375.660 309.021 C 376.405 309.021,371.736 301.366,370.839 301.115 C 370.679 301.071,368.965 302.135,367.030 303.482 M374.711 318.202 C 372.591 318.974,370.827 319.623,370.793 319.645 C 370.719 319.691,373.233 327.614,373.384 327.811 C 373.503 327.968,381.866 325.669,382.161 325.398 C 382.593 325.003,379.653 316.729,379.094 316.765 C 378.804 316.784,376.831 317.431,374.711 318.202 M71.855 325.906 C 71.853 327.899,71.769 330.028,71.668 330.637 L 71.485 331.745 75.295 332.119 C 77.391 332.325,79.470 332.563,79.915 332.647 C 80.998 332.852,81.030 332.725,81.287 327.093 L 81.508 322.282 76.683 322.282 L 71.858 322.282 71.855 325.906 M379.847 334.785 C 374.729 336.011,375.250 335.499,375.935 338.635 C 376.250 340.073,376.663 342.024,376.854 342.971 L 377.201 344.694 381.702 343.830 C 384.178 343.354,386.246 342.924,386.296 342.874 C 386.459 342.710,384.493 333.692,384.302 333.727 C 384.200 333.746,382.196 334.222,379.847 334.785 M70.172 340.833 C 69.681 342.912,68.475 349.226,68.554 349.305 C 68.740 349.490,77.447 351.337,77.568 351.216 C 77.714 351.070,79.583 341.924,79.482 341.847 C 79.445 341.819,77.679 341.490,75.559 341.117 C 73.439 340.744,71.398 340.365,71.023 340.274 C 70.495 340.146,70.305 340.271,70.172 340.833 M383.192 352.103 C 380.817 352.528,378.838 352.909,378.793 352.952 C 378.708 353.031,379.916 361.034,380.103 361.637 C 380.201 361.953,389.013 360.864,389.309 360.500 C 389.366 360.428,389.097 358.427,388.711 356.052 C 388.324 353.678,388.000 351.631,387.990 351.503 C 387.969 351.225,388.431 351.167,383.192 352.103 M65.270 362.110 C 64.644 364.508,64.199 366.538,64.282 366.620 C 64.556 366.894,72.928 369.118,73.087 368.959 C 73.323 368.723,75.556 360.110,75.417 359.971 C 75.270 359.824,67.211 357.766,66.743 357.756 C 66.559 357.752,65.896 359.711,65.270 362.110 M385.221 369.740 C 383.077 370.044,381.650 370.389,381.573 370.622 C 381.437 371.033,382.399 379.094,382.610 379.315 C 382.730 379.440,387.954 378.907,390.556 378.505 L 391.751 378.320 391.555 376.439 C 391.447 375.404,391.203 373.342,391.013 371.858 L 390.667 369.160 389.705 369.200 C 389.176 369.222,387.158 369.465,385.221 369.740 M60.476 379.385 C 59.549 382.504,59.280 383.813,59.534 383.970 C 60.437 384.529,67.891 386.508,68.122 386.251 C 68.509 385.818,70.752 377.819,70.544 377.611 C 70.362 377.430,62.410 375.019,61.992 375.019 C 61.872 375.019,61.190 376.984,60.476 379.385 M386.584 387.521 C 384.888 387.737,383.497 387.927,383.493 387.943 C 383.386 388.351,384.498 396.947,384.661 396.975 C 384.791 396.997,386.906 396.837,389.362 396.618 L 393.827 396.220 393.674 395.103 C 393.454 393.486,392.907 388.080,392.907 387.522 C 392.907 386.940,391.143 386.940,386.584 387.521 M55.148 396.606 C 54.361 398.980,53.809 400.974,53.921 401.037 C 54.729 401.488,62.087 403.729,62.385 403.615 C 62.769 403.468,65.616 395.192,65.366 394.953 C 65.161 394.759,57.344 392.290,56.932 392.290 C 56.737 392.290,55.935 394.232,55.148 396.606 M389.395 405.120 C 384.609 405.617,385.150 404.905,385.611 410.102 C 386.078 415.378,385.447 414.830,390.600 414.431 C 395.855 414.024,395.420 414.472,395.043 409.862 C 394.643 404.982,394.563 404.616,393.903 404.667 C 393.610 404.689,391.581 404.893,389.395 405.120 M50.733 409.638 C 50.660 409.850,49.976 411.757,49.214 413.876 C 48.452 415.995,47.927 417.811,48.047 417.911 C 48.444 418.242,56.447 421.066,56.588 420.924 C 56.772 420.740,59.845 412.240,59.750 412.178 C 59.500 412.012,51.397 409.252,51.159 409.252 C 50.999 409.252,50.807 409.426,50.733 409.638 M390.483 422.906 L 386.672 423.203 386.868 425.865 C 386.976 427.329,387.149 429.415,387.251 430.499 L 387.437 432.471 390.682 432.273 C 392.467 432.163,394.549 432.074,395.307 432.074 L 396.687 432.074 396.477 428.296 C 396.173 422.831,396.095 422.503,395.108 422.561 C 394.661 422.587,392.579 422.742,390.483 422.906 M44.451 426.568 C 44.300 426.967,43.525 428.873,42.729 430.803 C 41.934 432.734,41.398 434.428,41.539 434.569 C 41.786 434.816,49.760 438.239,49.854 438.138 C 50.260 437.699,53.328 429.466,53.146 429.306 C 52.936 429.121,51.085 428.358,45.108 425.994 C 44.899 425.911,44.603 426.170,44.451 426.568 M391.569 440.730 C 387.486 441.022,387.891 440.423,388.152 445.784 L 388.372 450.305 392.413 450.116 C 398.400 449.835,397.905 450.132,397.692 446.945 C 397.593 445.466,397.436 443.389,397.343 442.328 L 397.175 440.401 396.043 440.446 C 395.421 440.470,393.407 440.598,391.569 440.730 M36.392 444.786 C 35.798 446.003,34.861 447.752,34.310 448.672 C 33.276 450.398,33.114 450.887,33.576 450.887 C 33.723 450.887,35.438 451.858,37.385 453.045 C 39.333 454.233,41.062 455.204,41.227 455.204 C 41.548 455.204,46.100 446.614,45.890 446.404 C 45.579 446.094,38.168 442.560,37.840 442.566 C 37.637 442.570,36.985 443.569,36.392 444.786 M27.520 458.288 C 25.382 461.712,23.473 465.998,24.087 465.998 C 24.275 465.998,26.128 466.762,28.206 467.695 C 32.757 469.738,32.175 469.745,33.141 467.635 C 33.583 466.669,34.357 465.210,34.860 464.392 C 36.057 462.447,36.270 462.786,32.132 460.062 C 28.133 457.429,28.071 457.405,27.520 458.288 M392.602 458.519 C 388.584 458.644,388.852 458.256,389.095 463.603 L 389.299 468.108 393.339 467.960 C 399.320 467.740,398.741 468.187,398.571 463.917 C 398.348 458.299,398.341 458.276,396.979 458.353 C 396.351 458.389,394.381 458.464,392.602 458.519 M19.004 477.744 C 18.220 479.964,17.579 481.945,17.579 482.148 C 17.579 482.428,24.620 485.007,26.001 485.233 C 26.213 485.268,29.365 477.063,29.201 476.902 C 29.096 476.798,20.774 473.709,20.600 473.709 C 20.506 473.709,19.788 475.525,19.004 477.744 M392.984 476.406 L 389.823 476.506 389.827 480.427 C 389.833 486.251,389.347 485.736,394.840 485.736 L 399.477 485.736 399.276 482.450 C 399.165 480.643,399.075 478.492,399.075 477.670 L 399.075 476.176 397.610 476.241 C 396.804 476.277,394.722 476.351,392.984 476.406 M14.801 490.715 C 14.800 490.775,14.253 492.764,13.585 495.135 C 12.918 497.506,12.445 499.517,12.533 499.606 C 12.706 499.778,21.380 502.104,21.441 501.994 C 21.508 501.872,23.514 494.535,23.656 493.890 C 23.784 493.314,23.407 493.141,19.686 492.066 C 17.424 491.412,15.401 490.816,15.189 490.741 C 14.977 490.666,14.802 490.654,14.801 490.715 M393.292 494.293 L 390.439 494.395 390.439 499.009 L 390.439 503.624 395.262 503.624 L 400.084 503.624 399.888 502.193 C 399.780 501.406,399.692 499.255,399.692 497.413 L 399.692 494.063 397.918 494.127 C 396.943 494.162,394.861 494.237,393.292 494.293 M9.431 511.409 C 8.983 513.337,8.535 515.414,8.436 516.025 L 8.256 517.135 10.065 517.502 C 11.060 517.704,13.042 518.138,14.470 518.466 C 17.574 519.179,17.271 519.472,18.329 514.740 C 18.802 512.628,19.252 510.734,19.330 510.531 C 19.425 510.283,18.080 509.837,15.210 509.164 C 12.866 508.615,10.790 508.106,10.598 508.034 C 10.375 507.950,9.949 509.181,9.431 511.409 M390.613 516.306 C 390.348 521.537,389.937 521.099,395.272 521.278 C 400.460 521.453,399.990 521.975,399.996 516.037 L 400.000 511.951 395.417 511.951 L 390.834 511.951 390.613 516.306 M6.375 526.034 C 6.004 527.351,4.841 534.474,4.975 534.608 C 5.136 534.769,13.961 536.355,14.027 536.235 C 14.050 536.194,14.381 534.409,14.763 532.269 C 15.144 530.129,15.525 528.117,15.608 527.797 C 15.743 527.277,15.351 527.142,11.811 526.494 C 9.641 526.096,7.565 525.703,7.199 525.620 C 6.736 525.514,6.486 525.640,6.375 526.034 M389.540 532.807 C 389.327 534.821,389.085 536.816,389.002 537.240 L 388.851 538.011 393.499 538.639 L 398.146 539.267 398.302 538.330 C 398.620 536.424,399.075 532.132,399.075 531.045 L 399.075 529.923 396.685 529.719 C 395.370 529.607,393.312 529.432,392.111 529.331 L 389.928 529.146 389.540 532.807 M3.392 543.319 C 3.392 543.462,3.120 545.512,2.787 547.875 C 2.455 550.237,2.248 552.236,2.329 552.316 C 2.608 552.596,11.236 553.575,11.428 553.349 C 11.637 553.102,12.750 544.631,12.589 544.505 C 12.535 544.462,10.686 544.188,8.481 543.895 C 6.276 543.602,4.229 543.294,3.932 543.210 C 3.635 543.127,3.392 543.175,3.392 543.319 M387.513 546.618 C 387.437 546.973,387.024 548.766,386.594 550.603 C 386.165 552.440,385.813 554.109,385.813 554.311 C 385.813 554.780,394.387 556.861,394.746 556.479 C 395.037 556.171,396.608 549.318,396.608 548.360 C 396.608 547.652,396.718 547.688,391.435 546.689 L 387.651 545.973 387.513 546.618 M1.124 562.760 C 1.021 563.736,0.845 565.802,0.735 567.352 L 0.534 570.170 2.040 570.348 C 2.869 570.446,4.950 570.614,6.665 570.721 L 9.782 570.916 9.972 569.113 C 10.637 562.787,10.621 561.955,9.833 561.794 C 9.150 561.655,2.373 560.987,1.641 560.987 C 1.461 560.987,1.228 561.785,1.124 562.760 M382.125 566.526 C 381.369 568.724,380.820 570.592,380.906 570.678 C 381.421 571.192,389.342 573.911,389.514 573.632 C 389.951 572.925,392.425 565.337,392.270 565.182 C 392.066 564.977,384.259 562.529,383.817 562.530 C 383.643 562.530,382.882 564.329,382.125 566.526 M375.616 581.998 C 374.585 584.055,373.855 585.843,373.995 585.971 C 374.350 586.296,381.893 590.301,381.975 590.208 C 382.203 589.948,386.141 581.882,386.063 581.834 C 385.632 581.567,377.897 578.245,377.720 578.251 C 377.594 578.254,376.648 579.941,375.616 581.998 M0.000 583.453 L 0.000 588.126 4.596 588.126 L 9.193 588.126 9.312 583.732 C 9.377 581.315,9.418 579.307,9.403 579.270 C 9.387 579.233,7.265 579.107,4.687 578.991 L 0.000 578.779 0.000 583.453 M367.227 596.588 L 364.874 600.116 368.578 602.763 C 370.615 604.219,372.410 605.331,372.567 605.234 C 372.975 604.982,377.489 598.155,377.473 597.816 C 377.458 597.515,370.323 593.061,369.856 593.061 C 369.704 593.061,368.521 594.648,367.227 596.588 M1.781 596.681 L 0.016 596.792 0.157 598.088 C 0.234 598.800,0.382 600.875,0.487 602.699 C 0.666 605.828,0.713 606.014,1.340 606.014 C 4.651 606.017,10.173 605.249,10.044 604.805 C 9.966 604.537,9.806 602.548,9.689 600.386 L 9.477 596.453 6.512 596.512 C 4.881 596.544,2.752 596.620,1.781 596.681 M357.036 609.905 L 354.318 613.130 356.573 615.227 C 357.813 616.381,359.367 617.794,360.026 618.368 L 361.224 619.412 362.030 618.472 C 362.474 617.955,363.774 616.446,364.919 615.118 C 367.502 612.123,367.597 612.540,363.600 609.329 C 359.560 606.083,360.312 606.017,357.036 609.905 M5.635 614.010 C 1.471 614.639,1.701 614.441,2.131 617.023 C 2.992 622.187,3.466 623.919,3.978 623.768 C 4.250 623.688,4.854 623.531,5.320 623.420 L 6.168 623.218 6.168 627.415 L 6.168 631.611 10.948 631.611 L 15.729 631.611 15.729 626.985 L 15.729 622.359 13.030 622.328 C 11.019 622.304,10.591 622.235,11.349 622.055 C 11.909 621.922,12.414 621.763,12.471 621.701 C 12.528 621.639,12.221 619.749,11.790 617.502 L 11.005 613.416 10.052 613.451 C 9.527 613.471,7.540 613.723,5.635 614.010 M345.285 621.897 C 342.504 624.533,342.266 624.846,342.659 625.351 C 342.896 625.656,343.960 626.893,345.022 628.100 C 346.106 629.330,346.955 630.583,346.955 630.952 C 346.955 632.419,348.419 631.749,351.747 628.759 C 355.614 625.284,355.608 625.911,351.807 622.122 C 348.043 618.372,348.969 618.404,345.285 621.897 M24.056 626.985 L 24.056 631.611 28.836 631.611 L 33.616 631.611 33.616 626.985 L 33.616 622.359 28.836 622.359 L 24.056 622.359 24.056 626.985 M42.251 626.985 L 42.251 631.611 46.877 631.611 L 51.503 631.611 51.503 626.985 L 51.503 622.359 46.877 622.359 L 42.251 622.359 42.251 626.985 M60.139 626.985 L 60.139 631.611 64.765 631.611 L 69.391 631.611 69.391 626.985 L 69.391 622.359 64.765 622.359 L 60.139 622.359 60.139 626.985 M78.026 626.985 L 78.026 631.611 82.652 631.611 L 87.278 631.611 87.278 626.985 L 87.278 622.359 82.652 622.359 L 78.026 622.359 78.026 626.985 M95.914 626.985 L 95.914 631.611 100.540 631.611 L 105.166 631.611 105.166 626.985 L 105.166 622.359 100.540 622.359 L 95.914 622.359 95.914 626.985 M113.801 626.985 L 113.801 631.611 118.427 631.611 L 123.053 631.611 123.053 626.985 L 123.053 622.359 118.427 622.359 L 113.801 622.359 113.801 626.985 M131.689 626.985 L 131.689 631.611 136.469 631.611 L 141.249 631.611 141.249 626.985 L 141.249 622.359 136.469 622.359 L 131.689 622.359 131.689 626.985 M149.576 626.985 L 149.576 631.611 154.356 631.611 L 159.136 631.611 159.136 626.985 L 159.136 622.359 154.356 622.359 L 149.576 622.359 149.576 626.985 M167.463 626.985 L 167.463 631.611 172.244 631.611 L 177.024 631.611 177.024 626.985 L 177.024 622.359 172.244 622.359 L 167.463 622.359 167.463 626.985 M185.351 626.985 L 185.351 631.611 190.131 631.611 L 194.911 631.611 194.911 626.985 L 194.911 622.359 190.131 622.359 L 185.351 622.359 185.351 626.985 M203.547 626.985 L 203.547 631.611 208.173 631.611 L 212.799 631.611 212.799 626.985 L 212.799 622.359 208.173 622.359 L 203.547 622.359 203.547 626.985 M221.434 626.985 L 221.434 631.611 226.060 631.611 L 230.686 631.611 230.686 626.985 L 230.686 622.359 226.060 622.359 L 221.434 622.359 221.434 626.985 M239.322 626.985 L 239.322 631.611 243.948 631.611 L 248.574 631.611 248.574 626.985 L 248.574 622.359 243.948 622.359 L 239.322 622.359 239.322 626.985 M257.209 626.985 L 257.209 631.611 261.835 631.611 L 266.461 631.611 266.461 626.985 L 266.461 622.359 261.835 622.359 L 257.209 622.359 257.209 626.985 M275.096 626.977 L 275.096 631.611 279.885 631.611 L 284.673 631.611 284.588 627.062 L 284.503 622.513 279.800 622.428 L 275.096 622.343 275.096 626.977 M292.984 626.985 L 292.984 631.611 297.764 631.611 L 302.544 631.611 302.544 626.985 L 302.544 622.359 297.764 622.359 L 292.984 622.359 292.984 626.985 M310.871 626.985 L 310.871 631.611 315.652 631.611 L 320.432 631.611 320.432 626.985 L 320.432 622.359 315.652 622.359 L 310.871 622.359 310.871 626.985 M328.759 626.985 L 328.759 631.611 333.539 631.611 L 338.319 631.611 338.319 626.985 L 338.319 622.359 333.539 622.359 L 328.759 622.359 328.759 626.985 " fill="none" stroke="none" stroke-width="1"></path></svg>
</div>

ОТВЕТЫ

Ответ 1

Обновленный ответ: для чего пытается достичь ОП. Все еще в чистом css.

Объяснение:

  1. Посмотрите "Предыдущий ответ" о том, как заставить его работать, как в gif.
  2. Теперь, как сделать каждую штриховую линию равной квадрату. В синей линии length каждой тире равна 10. Мы можем сделать stroke-width = 10 чтобы они выглядели как квадратные. Теперь каждый квадрат должен иметь outline и не fill. Мы создадим еще одну mask которая блокирует внутреннюю часть в каждом квадрате.

path {
  fill: none
}

.path {
  stroke-dasharray: 10;
  stroke: blue;
  stroke-width: 10;
}


/* Let the outline width of each square be 1 */

.maskSquare {
  stroke: black;
  /* To block or remove inner blue portion */
  stroke-width: 8;
  /* blue-dash-length minus 2*sqaure-length = 10 - 2 */
  stroke-dasharray: 8 12;
  /* 8+12 == 20 as in blue-dash-line 10+10 == 20 */
  stroke-dashoffset: -1;
  /* To sync */
}

.maskLineLength {
  stroke: white;
  stroke-width: 11;
  animation: array 3s linear infinite;
}

@keyframes array {
  from {
    stroke-dasharray: 0 2000;
  }
  to {
    stroke-dasharray: 1000 2000;
  }
}
<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" width="340px" height="333px" viewBox="0 0 340 333" enable-background="new 0 0 340 333" xml:space="preserve">
  <defs>
     <mask id="mask">
           <path  class='maskLineLength' d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
          s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
          C46.039,146.545,53.039,128.545,66.039,133.545z"/>
       <path  class='maskSquare' d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
          s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
          C46.039,146.545,53.039,128.545,66.039,133.545z"/>
        </mask>
  </defs>
  <path mask="url(#mask)" class="path" d="M66.039,133.545c0,0-21-57,18-67s49-4,65,8
    s30,41,53,27s66,4,58,32s-5,44,18,57s22,46,0,45s-54-40-68-16s-40,88-83,48s11-61-11-80s-79-7-70-41
    C46.039,146.545,53.039,128.545,66.039,133.545z"/>
</svg>

Ответ 2

К сожалению, способ, которым вы его устанавливаете, - с единственным элементом пути, содержащим все блоки, не будет работать. Библиотека анимации использует ширину штриховки для имитации блоков рисования. Наличие их всех, определенных в одном элементе пути, может привести только к тому, что все блоки будут анимированы одновременно.

Разбив их на отдельные элементы пути для каждого блока, другой проблемой является порядок их рисования - по умолчанию он будет пересекать элементы пути сверху вниз в том порядке, в котором они находятся в HTML. Тем не менее, элементы пути добавляются в левом и правом порядке сверху вниз, что означает, что анимация начнется в верхнем среднем блоке, а затем поочередно поочередно с левой стороны, с правой стороны, с левой стороны и т.д. Вместо этого, чтобы заставить их оживить в порядке округления по часовой стрелке я написал функцию, чтобы изначально пройти через все элементы, вычислить градусы (0-360) по отношению к центральной точке SVG (помните о вашей тригонометрии средней школы?), а затем сортировать элементы на основе этого степень.

Поскольку SO требует кода (но он слишком длинный, чтобы добавить все его в ответ), вот JavaScript, полный код в JSFiddle внизу:

// Sort paths via degrees (clockwise)
document.querySelectorAll("svg").forEach(function(svgE){
  var centerCoords = [ svgE.getBoundingClientRect().width / 2,
    svgE.getBoundingClientRect().height / 2
  ];
  var pathsByDeg = [];
  svgE.querySelectorAll("path").forEach(function(pE){
    var coords = (/^M([0-9\.]+)\s+([0-9\.]+)+/.exec(pE.getAttribute("d"))).splice(1,2).map(parseFloat);
    var rad = -Math.atan2(coords[1]-centerCoords[1], coords[0]-centerCoords[0]);
    var deg = ((rad / Math.PI * 180) + (rad > 0 ? 0 : 360)) - 90;
    deg = deg < 0 ? deg + 360 : deg;
    pathsByDeg.push([deg, pE]);
  });
  pathsByDeg.sort(function(a, b){
    return a[0] - b[0];
  });
  pathsByDeg.reduce(function(c,n){
    c[1].parentNode.insertBefore(n[1],c[1]);
    return n;
  }, pathsByDeg[0]);

});
// Setup path animation
var lineDrawing = anime({
  targets: 'svg path',
  easing: 'easeInOutCubic',
  strokeDashoffset: [anime.setDashoffset, 0],
  duration: 1000,
  delay: function(el, i) { return i * 20 },
  autoplay: false,
  begin: function(anim) {
    anim.animatables.forEach(function(elem){
      var t = elem.target;
      t.setAttribute("stroke", "#4a56f2");
      t.setAttribute("fill", "none");
    });
  }
});
document.querySelector('.play-drawing').onclick = lineDrawing.restart;

Полный результат доступен в JSFiddle: https://jsfiddle.net/jimbo2150/d8gc96em/