title: Moving Circles with Polyline's points concurrently in SVG
body: <p>I wish to make the circles move along the with polyline's points while the polyline is animating.</p>
  <p>This is my progress so far:
  <a href="https://jsfiddle.net/xgr6q4cy/" rel="nofollow noreferrer">https://jsfiddle.net/xgr6q4cy/</a></p>
  <p>Here is my codes:</p>
  <pre><code>&lt;svg id=&quot;svg&quot; viewBox=&quot;0 0 415 415&quot; xmlns=&quot;http://www.w3.org/2000/svg&quot;&gt;
     &lt;polyline 
              id=&quot;poly1&quot;
              fill=&quot;blue&quot; 
              stroke=&quot;red&quot; 
              stroke-linecap=&quot;round&quot;
              points=&quot;97,122 34,85 90,35 198,40 34,85&quot;
              &gt;
              &lt;animate 
                  id=&quot;one&quot;
                  attributeName=&quot;points&quot;
                  dur=&quot;5s&quot; 
                  begin=&quot;0s;two.end&quot;
              to=&quot;97,82 34,85 90,55 198,40 34,85&quot;
              fill=&quot;freeze&quot;
              /&gt;
              &lt;animate 
                  id=&quot;two&quot;
                  attributeName=&quot;points&quot; 
                  dur=&quot;5s&quot; 
                  begin=&quot;one.end&quot;
              to=&quot;97,122 34,85 90,35 198,40 34,85&quot;
              fill=&quot;freeze&quot;
              /&gt;
  
  
          &lt;/polyline&gt;
  
          &lt;circle cx=&quot;34&quot; cy=&quot;85&quot; r=&quot;3&quot; fill=&quot;red&quot;&gt;&lt;/circle&gt;
          &lt;circle cx=&quot;90&quot; cy=&quot;35&quot; r=&quot;3&quot; fill=&quot;red&quot;&gt;&lt;/circle&gt;
          
          &lt;circle cx=&quot;198&quot; cy=&quot;40&quot; r=&quot;3&quot; fill=&quot;red&quot;&gt;&lt;/circle&gt;
          &lt;circle cx=&quot;97&quot; cy=&quot;122&quot; r=&quot;3&quot; fill=&quot;red&quot;&gt;&lt;/circle&gt;
  &lt;/svg&gt;
  </code></pre>
  <p>Screenshots of my progress:</p>
  <p><a href="https://i.stack.imgur.com/QjpHb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QjpHb.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/A67j3.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/A67j3.png" alt="enter image description here" /></a></p>
  <p>I want to make sure the circles follow the polyline while the polyline is animating by using SVG SMIL</p>
  <p>Any help would be appreciated!</p>