I have a SVG I am trying to animate with animejs.
Basically its a selection path drawing.
I managed to animate but the result is wrong.
I want this:
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>
Updated Answer: For what OP is trying to achieve. Still in pure css.
Explanation:
length
of each dashes is 10
. We can make the stroke-width = 10
so they look like square. Now each square should only have outline
and no fill
. We will create another mask
which blocks out the inner portion in each square.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>
Previous Answer: for the gif you provided
It can be done in pure css.
First, Blue dash path.
.path {
stroke-dasharray: 10;
stroke: blue;
}
<svg width="340px" height="333px">
<path class="path" fill="none" stroke-width="3" stroke-miterlimit="10" 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>
Next a Masking path, using same path 1px greater stroke width.
.maskPath {
animation: array 3s linear infinite;
}
@keyframes array {
from {
stroke-dasharray: 0 2000;
}
to {
stroke-dasharray: 1000 2000;
}
}
<svg width="340px" height="333px">
<path fill='none' class='maskPath' stroke="darkGray" stroke-width='4' 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>
When mask is applied on blue dash line result follows.
.path {
stroke-dasharray: 10;
stroke: blue;
}
.maskPath {
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 fill='none' class='maskPath' stroke="white" stroke-width='4' 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" fill="none" stroke="#000000" stroke-width="3" 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>
(I may not be able help further as I am beginner in svg)
Unfortunately, the way you have it setup - with a single path element containing all the blocks will not work. The animation library uses stroke dash width to simulate drawing blocks. Having them all defined in a single path element can only lead to all blocks being animated at the same time.
After breaking them into separate path elements for each block, the other issue is the order to draw them in - by default it will traverse the path elements from top to bottom in the order they are in the HTML. However, the path elements are added in right-left order from top to bottom meaning the animation will start at the top middle block then alternate each one on the left side, right side, left side, etc. Instead, to get them to animate in a clockwise wrap-around order I wrote a function to initially loop through all the elements, calculate the degrees (0-360) in relation to the SVG's center point (remember your high school trigonometry?), then sort the elements based on that degree value.
Since SO requires code (but it is too long to add all of it in an answer), here is the JavaScript, the complete code in in the JSFiddle at the bottom:
// 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;
The full result is available in the JSFiddle: https://jsfiddle.net/jimbo2150/d8gc96em/
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With