title: Move object every few seconds using svg
body: <p>Draw(one time) and move objects every five seconds as shown in figures left to right. I searched but not able to find a way to draw outer lines and move objects near to it.</p>
  
  <pre><code>&lt;animate xlink:href="#blue-rectangle"
           attributeName="x" 
           from="50"
           to="425" 
           dur="5s"
           begin="circ-anim.repeat(2)"
           fill="freeze" 
           id="rect-anim" /&gt;
  </code></pre>
  
  <p>ref : <a href="https://css-tricks.com/guide-svg-animations-smil/" rel="nofollow noreferrer">https://css-tricks.com/guide-svg-animations-smil/</a></p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Basic_Shapes</a></p>
  
  <p><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion" rel="nofollow noreferrer">https://developer.mozilla.org/en-US/docs/Web/SVG/Element/animateMotion</a></p>
  
  <p><a href="https://i.stack.imgur.com/JyqOu.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/JyqOu.png" alt="enter image description here"></a>
  <a href="https://i.stack.imgur.com/89Wsb.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/89Wsb.png" alt="enter image description here"></a><a href="https://i.stack.imgur.com/vXNmd.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/vXNmd.png" alt="enter image description here"></a></p>