Code Example

SVG Image

<?xml version="1.0" standalone="no"?>

Right-click on the image to open the SVG viewer pop-up menu. Click 'view SVG' to display the image in a new, full window to zoom & pan the image.  (SVG Viewer Tips)

<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">

<svg width="500" height="650" >

<!-- Draw a curve -->
<path d="M20 100 C20 0 180 0 180 100" style="fill: none; stroke:hotpink;stroke-width:2;" />

<!-- A square animates along a curved path -->
<rect x="-5" y="-5" width="10" height="10" fill="blue">
<animateMotion path="M20 100 C20 0 180 0 180 100" dur="10s" rotate="auto" repeatCount="3" fill="freeze"/>
</rect>

<!-- Draw a path -->
<path d="M50,200 150,200 150,300 50,300 z" style="fill: none; stroke:purple;stroke-width:2;" />

<!-- Text animates along a square -->
<text style="font-family:serif; stroke:green; fill:green;font-size:18;">svg
<animateMotion path="M50,200 150,200 150,300 50,300 z" dur="8s" rotate="auto" repeatCount="indefinite"/>
</text>

<!-- Draw a complex path -->
<path d="M 5 420 c 0 -40 120 -80 120 -40 c
0 40 120 80 120 40 c 0 -60 -120 -100 -120 -40 c 0 60 -120 100 -120 40" style="fill: none; stroke:brown;
stroke-width:2;" />

<!-- An arrow animates along a complex path -->
<path d="M0 0 v -2.5 h10 v-5 l5 7.5 l-5 7.5 v-5 h-10 v-2.5" style="fill:red">
<animateMotion dur="10s" repeatCount="indefinite" path="M 5 420 c 0 -40 120 -80 120 -40 c
0 40 120 80 120 40 c 0 -60 -120 -100 -120 -40 c 0 60 -120 100 -120 40" rotate="auto" />
</path>

<path d="M0 0 v -2.5 h10 v-5 l5 7.5 l-5 7.5 v-5 h-10 v-2.5" style="fill:purple">
<animateMotion dur="10s" repeatCount="indefinite" path="M 5 540 c 0 -40 120 -80 120 -40 c
0 40 120 80 120 40 c 0 -60 -120 -100 -120 -40 c 0 60 -120 100 -120 40" rotate="auto-reverse" />

</svg>

The first example is a blue square traveling along a semicircular path over a period of 10 seconds.The <path> element creates a visible pink path that is drawn onscreen. The path attribute of the
<animateMotion> element has the same values; therefore, the square appears to travel along the curving pink line. This animation will repeat 3 times (repeatCount="3"). At the end of the <animateMotion> element is the fill="freeze" property; this property is available to all animate elements and instructs the SVG viewer that when the animation has finished, the element is to be frozen in its final position.

The second example creates an animation where a text string traces the shape of a square.

The last example create an arrow to animate along a complex path defined by the cubic beziers and starting on the left side. The rotate attribute defines the orientation of the arrow as it proceeds along the path. The value auto keeps the orientation of the arrow so that it always points along the path. The value auto-reverse positions the arrow so that it always points away from the direction of motion.