svg要素を使って、曲線のパスに沿ったアニメーション
無限大の形の曲線pathに沿って、移動するcircle形状のアニメーションです。HTML5では、インラインsvgがサポートされ、html内に直接svgを記述できるようになりますが、今のところ、ブラウザの対応が分かれます。このサンプルでは、従来のsvg（xmlで記述）を利用しているため、xhtmlを使っています。
<path d="M 10,40 c 0,-100 480,100 480,0 s -480,100 -480,0" id="svg-ani01" fill="none" stroke="mediumorchid" />
<circle cx="0" cy="0" r="12" fill="#44f">
<animateMotion dur="8s" repeatCount="indefinite">
<mpath xlink:href="#svg-ani01" />
</animateMotion>
</circle>
<circle cx="0" cy="0" r="15" fill="mediumorchid">
<animateMotion dur="8s" repeatCount="indefinite" path="M 30,50 c 0,-75 400,75 400,0 s -400,75 -400,0" />
</circle>
