SOURCE

animation();
function animation(){
    let path = d3.select("path").node(),container = d3.select("g");
    let totalL = path.getTotalLength();
    // let startPoint = path.getPointAtLength(100);
    // let endPoint = path.getPointAtLength(50);
    // let pathD = "M"+ (startPoint.x-1.5) + " " + (startPoint.y-1.5) 
    // + "A 2 2 0 0 1"  + (startPoint.x+1.5) + " "+ (startPoint.y+1.5) 
    // + "L" +  endPoint.x + " " + endPoint.y + "z";
    let mc = container.append('path')
    .classed("raindrop",true)
    // .attr('d',pathD)
    .style("fill","url(#white_effect)")
    .attr("filter","url(#lalala)")
    .attr("stroke","red")
    .attr("fill-opacity",1)
    .attr("stroke-width",0)
    .attr("stroke-linejoin","round");
    mc
        .transition()
        // .delay(d => Math.round(500 - d.r * 40))
        .duration(10000)
        .ease(d3.easeLinear)
        .attrTween("d", function() {
          return function(t) {
            let startPoint = path.getPointAtLength(t * totalL);
            let endPoint = path.getPointAtLength(t * totalL-50);
            let pathD = "M"+ (startPoint.x-1.5) + " " + (startPoint.y-1.5) 
            + "A 2 2 0 0 1"  + (startPoint.x+1.5) + " "+ (startPoint.y+1.5) 
            + "L" +  endPoint.x + " " + endPoint.y + "z";
                    return pathD;
                };
        })
        .on("end", function(d, i) {
          d3.select(this).remove();
          animation();
        })
}

<svg  width="800" height="800" style="background:#000;" >
<defs>
    <linearGradient id="white_effect" x1="100%" y1="0%" x2="0%" y2="0%" >
        <stop offset="0%" style="stop-color:#ffffff;stop-opacity:1;" />
        <stop offset="100%" style="stop-color:#ffffff;stop-opacity:1;" />
    </linearGradient>
    <filter id="lalala"  x="-150%" y="-150%" width="300%" height="300%">
         <feGaussianBlur  stdDeviation="100" result="blur"/> 
       <feMerge>
         <feMergeNode in="blur" /> 
        <feMergeNode in="SourceGraphic" /> 
      </feMerge>
     </filter>
</defs>
  <g>
     <path d="M10 800 C100 500 400 100 700 20" fill="none" stroke="#f0f"  />
     <rect x="0" y="0" width="80" height="80" style="fill:url(#white_effect);" filter="url(#lalala)"></rect>
   </g>
</svg>