Animate Dashed Svg Line

Animate dashed SVG line

One of the ways to do this is with Javascript. It duplicates a path by creating a polyline.
Try the example below:

<!DOCTYPE HTML><html><head><style>polyline{stroke-dasharray:8;stroke:black;fill:none;stroke-width:1;}
</style>

</head><body >This builds a smooth/dashed polylines that replicates your paths.<br><button onClick=animateDashPaths()>Animate Paths</button><br>
<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 830 500" enable-background="new 0 0 830 500" xml:space="preserve">
<path class="path" fill="none" stroke="#000000" stroke-miterlimit="10" d="M234.3,119c-31-0.7-95,9-128.7,50.8"/>
<!-- Vienna Dash  --><path id="pathVienna"  display="none"  stroke-miterlimit="10" d="M382.8,243.8c2.9-36.1,15.8-110.3,110.1-145.4"/>
<!-- Budapest Dash  --><path id="pathBudapest" display="none" stroke-miterlimit="10" d="M550.6,319.4c34-2.7,109-2.1,174.8,50.5"/>
<!-- Salzburg Dash  --><path id="pathSalzburg" display="none" stroke-miterlimit="10" d="M265,323c21.5,12.1,57.2,39.5,60.7,85.1"/>
<!-- Tyrol Dash  --><path id="pathTyrol" display="none" stroke-miterlimit="10" d="M147.8,319.5 c-27.1,7-79.7,31.3-92.8,74.2"/>
</svg>
<script>//---button---function animateDashPaths(){var NS="http://www.w3.org/2000/svg"
//----Vienna----------------var endLengthVienna=pathVienna.getTotalLength()var lengthDeltaVienna=endLengthVienna/200var polylineVienna=document.createElementNS(NS,"polyline")Layer_1.appendChild(polylineVienna)var pntListVienna=polylineVienna.pointsvar iTVienna=setInterval(drawPathVienna,5)var cntVienna=0function drawPathVienna(){   var len=lengthDeltaVienna*cntVienna++   if(len<endLengthVienna)   {        var pnt=pathVienna.getPointAtLength(len)        pntListVienna.appendItem(pnt)   }   else      clearInterval(iTVienna)}
//----Budapest----------------var endLengthBudapest=pathBudapest.getTotalLength()var lengthDeltaBudapest=endLengthBudapest/200var polylineBudapest=document.createElementNS(NS,"polyline")Layer_1.appendChild(polylineBudapest)var pntListBudapest=polylineBudapest.pointsvar iTBudapest=setInterval(drawPathBudapest,5)var cntBudapest=0function drawPathBudapest(){   var len=lengthDeltaBudapest*cntBudapest++   if(len<endLengthBudapest)   {        var pnt=pathBudapest.getPointAtLength(len)        pntListBudapest.appendItem(pnt)   }   else      clearInterval(iTBudapest)}
//----Salzburg----------------var endLengthSalzburg=pathSalzburg.getTotalLength()var lengthDeltaSalzburg=endLengthSalzburg/200var polylineSalzburg=document.createElementNS(NS,"polyline")Layer_1.appendChild(polylineSalzburg)var pntListSalzburg=polylineSalzburg.pointsvar iTSalzburg=setInterval(drawPathSalzburg,5)var cntSalzburg=0function drawPathSalzburg(){   var len=lengthDeltaSalzburg*cntSalzburg++   if(len<endLengthSalzburg)   {        var pnt=pathSalzburg.getPointAtLength(len)        pntListSalzburg.appendItem(pnt)   }   else      clearInterval(iTSalzburg)}
//----Tyrol----------------var endLengthTyrol=pathTyrol.getTotalLength()var lengthDeltaTyrol=endLengthTyrol/200var polylineTyrol=document.createElementNS(NS,"polyline")Layer_1.appendChild(polylineTyrol)var pntListTyrol=polylineTyrol.pointsvar iTTyrol=setInterval(drawPathTyrol,5)var cntTyrol=0function drawPathTyrol(){   var len=lengthDeltaTyrol*cntTyrol++   if(len<endLengthTyrol)   {        var pnt=pathTyrol.getPointAtLength(len)        pntListTyrol.appendItem(pnt)   }   else      clearInterval(iTTyrol)}
}</script>
</body>
</html>

How to do an animated dashed svg line?

The standard "line drawing" technique uses a changing dash length to simulate the drawing effect. So obviously, if your line already has a dash pattern, that technique won't work. Not directly at least.

The best solution to this is to apply a <mask> to the dashed line. The mask consists of a line that covers your original one (the dashed one). We then use the standard line drawing dash technique to animate the version of the line in the mask. Thus slowly unmasking/revealing the original dashed line.

// Get a reference to the <path>var path = document.querySelector('#pathRecrut');
// Get length of path... ~577px in this casevar pathLength = path.getTotalLength();
// Make very long dashes (the length of the path itself)path.style.strokeDasharray = pathLength + ' ' + pathLength;
// Offset the dashes so the it appears hidden entirelypath.style.strokeDashoffset = pathLength;
// When the page scrolls...window.addEventListener("scroll", function(e) {   // What % down is it?   // https://stackoverflow.com/questions/2387136/cross-browser-method-to-determine-vertical-scroll-percentage-in-javascript/2387222#2387222  // Had to try three or four differnet methods here. Kind of a cross-browser nightmare.  var scrollPercentage = (document.documentElement.scrollTop + document.body.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);      // Length to offset the dashes  var drawLength = pathLength * scrollPercentage;    // Draw in reverse  path.style.strokeDashoffset = pathLength - drawLength;  });

<svg id="bf7de8ba-cf75-48ab-a36c-06f8d86635d5" data-name="Calque 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 690.814 824.302">  <defs>    <style>      .a00cb6af-c716-4d00-9962-797e598003da,      .a6fde9f6-9a2f-4715-ac34-678948a4d015,      .b963f74d-80cb-4571-80bd-9cf5cd28cce2 {        fill:none;        stroke-miterlimit:10;        stroke-width:6px;      }      .a6fde9f6-9a2f-4715-ac34-678948a4d015 {        stroke:url(#bef7cd12-3404-46dc-ac0f-c9d91ddd83d0);      }      .b963f74d-80cb-4571-80bd-9cf5cd28cce2 {        stroke-dasharray:30.322 50.536;        stroke:url(#a958eb71-8928-4250-a898-e2a9df336375);      }      .a00cb6af-c716-4d00-9962-797e598003da {        stroke:url(#a8cb66bd-35fa-45ad-b9b6-1af210f764d2);      }    </style>    <linearGradient id="bef7cd12-3404-46dc-ac0f-c9d91ddd83d0" x1="60.835" y1="123.864" x2="751.668" y2="123.864" gradientUnits="userSpaceOnUse">      <stop offset="0" stop-color="#ec6608"/>      <stop offset="0.494" stop-color="#c33089"/>      <stop offset="1" stop-color="#662483"/>    </linearGradient>    <linearGradient id="a958eb71-8928-4250-a898-e2a9df336375" x1="60.835" y1="541.828" x2="751.668" y2="541.828" xlink:href="#bef7cd12-3404-46dc-ac0f-c9d91ddd83d0"/>    <linearGradient id="a8cb66bd-35fa-45ad-b9b6-1af210f764d2" x1="60.835" y1="932.54" x2="751.668" y2="932.54" xlink:href="#bef7cd12-3404-46dc-ac0f-c9d91ddd83d0"/>        <mask id="linemask">      <path id="pathRecrut" fill="none" stroke="white" stroke-width="10" d="M745.947,181.853c-3.573,34.83-7.4,65.457-20.713,85.466-36.276,54.511-150.309,41.2-247.4,29.872-73.484-8.575-74.824-17.343-139.4-21.446-87.16-5.538-141.016-8.96-191.49,24.51-48.083,31.886-87.4,93.472-82.723,159.319.847,11.934,4.189,59.01,39.83,91.915,35.144,32.448,81.33,32.315,131.744,32.171,53.366-.154,56.932-10.359,130.213-18.383,52.244-5.721,100.335-10.606,160.085,1.532,36.964,7.508,74.081,20.657,109.532,43.659,26.491,17.189,49.773,32.776,59.745,62.809,1.48,4.457,13.436,42.337-6.894,72.766-14.348,21.475-39.623,31.524-81.957,36.766-67.779,8.391-105.681-4.654-182.3-16.086-41.6-6.206-132.521-17.593-227.49-.766-22.971,4.071-60.931,12.4-91.149,42.894-7.9,7.968-23.347,23.951-29.872,49.787a99.225,99.225,0,0,0-1.1,42.916"/>    </mask>  </defs>  <path class="a6fde9f6-9a2f-4715-ac34-678948a4d015" d="M748.213,116.426c.215,4.461.381,9.478.436,14.992" transform="translate(-60.835 -116.281)"/>  <path class="b963f74d-80cb-4571-80bd-9cf5cd28cce2" d="M745.947,181.853c-3.573,34.83-7.4,65.457-20.713,85.466-36.276,54.511-150.309,41.2-247.4,29.872-73.484-8.575-74.824-17.343-139.4-21.446-87.16-5.538-141.016-8.96-191.49,24.51-48.083,31.886-87.4,93.472-82.723,159.319.847,11.934,4.189,59.01,39.83,91.915,35.144,32.448,81.33,32.315,131.744,32.171,53.366-.154,56.932-10.359,130.213-18.383,52.244-5.721,100.335-10.606,160.085,1.532,36.964,7.508,74.081,20.657,109.532,43.659,26.491,17.189,49.773,32.776,59.745,62.809,1.48,4.457,13.436,42.337-6.894,72.766-14.348,21.475-39.623,31.524-81.957,36.766-67.779,8.391-105.681-4.654-182.3-16.086-41.6-6.206-132.521-17.593-227.49-.766-22.971,4.071-60.931,12.4-91.149,42.894-7.9,7.968-23.347,23.951-29.872,49.787a99.225,99.225,0,0,0-1.1,42.916" transform="translate(-60.835 -116.281)" mask="url(#linemask)"/>  <path class="a00cb6af-c716-4d00-9962-797e598003da" d="M81.983,925.674a117,117,0,0,0,6.74,13.39" transform="translate(-60.835 -116.281)"/></svg>

How to get dashed line svg animation on accordingly scroll?

This can be done by adding an SVG mask and then drawing it over the path:

var path = document.getElementById("thePath");
var mask = document.getElementById("maskPath");

var pathLength = path.getTotalLength();
var maskLength = 1050;

mask.style.strokeDashoffset = maskLength;

window.addEventListener("scroll", myFunction);

function myFunction() {
  var scrollpercent = (document.body.scrollTop + document.documentElement.scrollTop) / (document.documentElement.scrollHeight - document.documentElement.clientHeight);

  var draw = pathLength * scrollpercent;

  mask.style.strokeDashoffset = maskLength - draw;
}

<h1>Scroll down</h1>
<svg width="198px" height="1458px" viewBox="0 0 198 1458">
  <defs>
    <linearGradient x1="50%" y1="7.06935325%" x2="50%" y2="100%" id="linearGradient-1">
    <stop stop-color="#DE1652" offset="0%"></stop>
    <stop stop-color="#F37121" offset="50.2239948%"></stop>
    <stop stop-color="#FBAB26" offset="100%"></stop>
    </linearGradient>
    <mask id="theMask" maskUnits="userSpaceOnUse">
      <path id="maskPath"
      d="M702,266 C682,424 795.064639,474.307498 716,600 C599,786 769,821 688,988 C548.560405,1275.48657 822.815807,1223 840.843207,1373 C858.870608,1523 605.485477,1528 687.610302,1728"
      fill="none"
      fill-rule="evenodd"
      stroke-dasharray="1637"
      stroke-dashoffset="1050"
      transform="translate(-646.000000, -825.000000)"
      stroke-width="4"
      stroke="#fff"/>
    </mask>
  </defs>
  <g id="content" mask="url(#theMask)">
    <path id="thePath"
      d="M702,266 C682,424 795.064639,474.307498 716,600 C599,786 769,821 688,988 C548.560405,1275.48657 822.815807,1223 840.843207,1373 C858.870608,1523 605.485477,1528 687.610302,1728"
      fill="none"
      fill-rule="evenodd"
      stroke-dasharray="12,16"
      transform="translate(-646.000000, -825.000000)"
      stroke-width="4"
      stroke="url(#linearGradient-1)"
    ></path>
  </g>
</svg>

Animate Dashed Svg Line