requestAnimationFrame(frame);
function frame(t){
fill.setAttribute('stroke-dasharray', `${t/40} 1000`);
let p1 = fill.getPointAtLength(t/40);
let p2 = fill.getPointAtLength(t/40+2);
let dy = p2.y - p1.y;
let dx = p2.x - p1.x;
let a = dy - dx ? Math.atan2(dy, dx)*180/Math.PI+90+Math.sin(t/280)*20 : 90;
end.setAttribute('transform', `translate(${p1.x},${p1.y})rotate(${a})`);
requestAnimationFrame(frame);
}
<svg viewbox=0,0,100,100 height=100vh>
<defs>
<linearGradient id="Grad1" x2="100%" y2="0%" gradientUnits="userSpaceOnUse">
<stop offset="10%" stop-color="#D3D0FB" />
<stop offset="100%" stop-color="#FDE4E2" />
</linearGradient>
<mask id="mask">
<path stroke=white stroke-width=10 fill=none d='
m20,80
v-45
a11,11,0,0,1,20,-5
c5,5,5,35,10,40
a11,11,0,0,0,20,-5
v-45
'></path>
</mask>
</defs>
<rect width=100 height=100 mask=url(#mask) fill="url(#Grad1)"/>
<path mask=url(#mask) id=fill stroke=blue stroke-width=11 fill=none d='
m20,81
v-46
a11,11,0,0,1,20,-5
c5,5,5,35,10,40
a11,11,0,0,0,20,-5
v-46
'></path>
<g mask=url(#mask)>
<rect id=end fill=blue x=-10 y=-3 width=20 height=6></rect>
</g>
</svg>