SVG анимация графика

222

07 сентября 2017, 19:57

Добрый день, подскажите как сделать так что бы "ползунок" не "дрифтовал" по графику, а плавно перетекал, как капля, и повторял изгибы графика?

<svg width="1068" height="519" viewBox="0 0 1068 519" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<title>Process</title> 
<desc>Created using Figma</desc> 
 
 
<path id="motionPath" fill="#333" stroke="#000000" stroke-miterlimit="10" d="M1053.33,192.78V308.55a150.46,150.46,0,1,1-300.91,0V192.78a108,108,0,1,0-216,0v106a160.24,160.24,0,1,1-320.48,0V108A108,108,0,1,0,0,108H4a104,104,0,1,1,208,0V298.76a164.24,164.24,0,1,0,328.48,0v-106a104,104,0,1,1,208,0V308.55a154.46,154.46,0,1,0,308.91,0V192.78Z"/> 
 <circle cx="1	" cy="110" r="7" fill="#333"  /> 
 <circle cx="1055" cy="190" r="7" fill="#333"  /> 
 
<rect id="worm" x="50" y="20" rx="5" ry="5" width="65" height="10" style="fill:#333;" /> 
<animateTransform begin="worm.end" id="pause" dur="3s" type="translate" attributeType="XML" attributeName="transform"/> 
<animateMotion  
    xlink:href="#worm" 
    dur="10s" 
    begin="0; pause.end" 
    fill="freeze" 
    repeatCount="indefinite"  
    rotate="auto-reverse" 
> 
    <mpath xlink:href="#motionPath" /> 
  </animateMotion> 
</svg>

Answer 1

если использовать rect, то как вариант решения, можно так

<svg width="1068" height="519" viewBox="0 0 1068 519" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"> 
<title>Process</title> 
<desc>Created using Figma</desc> 
 
 
<path id="motionPath" fill="#333" stroke="#000000" stroke-miterlimit="10" d="M1053.33,192.78V308.55a150.46,150.46,0,1,1-300.91,0V192.78a108,108,0,1,0-216,0v106a160.24,160.24,0,1,1-320.48,0V108A108,108,0,1,0,0,108H4a104,104,0,1,1,208,0V298.76a164.24,164.24,0,1,0,328.48,0v-106a104,104,0,1,1,208,0V308.55a154.46,154.46,0,1,0,308.91,0V192.78Z"/> 
 <circle cx="1	" cy="110" r="7" fill="#333"  /> 
 <circle cx="1055" cy="190" r="7" fill="#333"  /> 
 
<rect id="worm" x="0" y="0" rx="5" ry="5" width="15" height="10" style="fill:#333;" /> 
<rect id="worm1" x="0" y="0" rx="5" ry="5" width="15" height="10" style="fill:#333;" /> 
<rect id="worm2" x="0" y="0" rx="5" ry="5" width="15" height="10" style="fill:#333;" /> 
<rect id="worm3" x="0" y="0" rx="5" ry="5" width="15" height="10" style="fill:#333;" /> 
<animateTransform begin="worm.end" id="pause" dur="3s" type="translate" attributeType="XML" attributeName="transform"/> 
<animateMotion  
    xlink:href="#worm" 
    dur="10s" 
    begin="0; pause.end" 
    fill="freeze" 
    repeatCount="indefinite"  
    rotate="auto-reverse" 
> 
    <mpath xlink:href="#motionPath" /> 
  </animateMotion> 
  <animateMotion  
    xlink:href="#worm1" 
    dur="10s" 
    begin="0.02; pause.end" 
    fill="freeze" 
    repeatCount="indefinite"  
    rotate="auto-reverse" 
> 
    <mpath xlink:href="#motionPath" /> 
  </animateMotion> 
  <animateMotion  
    xlink:href="#worm2" 
    dur="10s" 
    begin="0.04; pause.end" 
    fill="freeze" 
    repeatCount="indefinite"  
    rotate="auto-reverse" 
> 
    <mpath xlink:href="#motionPath" /> 
  </animateMotion> 
  <animateMotion  
    xlink:href="#worm3" 
    dur="10s" 
    begin="0.06; pause.end" 
    fill="freeze" 
    repeatCount="indefinite"  
    rotate="auto-reverse" 
> 
    <mpath xlink:href="#motionPath" /> 
  </animateMotion> 
</svg>