<svg width="500" height="30">
    <rect width="20" height="20" fill="orange">
      <animate attributeName="x" from="0" to="300" dur="10s" fill="freeze" repeatCount="indefinite"/>
    </rect>
    <circle cx="0" cy="15" r="5" fill="green" stroke="yellow">
        <animate attributeName="cx" from="0" to="300" dur="5s" fill="freeze" repeatCount="indefinite"/>
    </circle>
</svg>

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.