Home :: Tutorials :: SVG :: Animation

Horizontal Animation

<rect y="45" width="10" height="10" fill="red">
    <animate attributeName="x" from="0" to="90" dur="10s" repeatCount="indefinite"/>
</rect>

Vertical Animation

<rect x="45" width="10" height="10" fill="red">
    <animate attributeName="y" from="0" to="90" dur="10s" repeatCount="indefinite"/>
</rect>

Diagonal Animation

<rect width="10" height="10" fill="red">
    <animate attributeName="x" from="0" to="90" dur="10s" repeatCount="indefinite"/>
    <animate attributeName="y" from="0" to="90" dur="10s" repeatCount="indefinite"/>
</rect>

Rotation Animation

<rect x="45" width="10" height="10" fill="red">
    <animateTransform attributeName="transform" type="rotate"
                      from="0" to="90" dur="10s" repeatCount="indefinite"/>
</rect>

Animation on a Path

<rect x="-5" y="-5" width="10" height="10" fill="red">
    <animateMotion path="M10 50 C10 0 90 0 90 50" dur="10s"
                   rotate="auto" repeatCount="indefinite"/>
</rect>