Using animateMotion in SVG

By DesertDawg

You can create your own universe with SVG. No, really. At least if you'll settle for a little sun, a little earth, and a little moon. We can even throw in a comet – Comet SVG! First off, let's see what this SVG will do. Then, we'll make some changes to the source code and note the effects.

View SVG.

Now right-click the SVG and view the source code. Each second represents a day in this solar system. To move the Moon, the Earth, and the comet, animateMotion has been used three times in this SVG.

The Moon's motions follow the path2 ellipsis around the Earth path1 ellipsis around the Sun. You can modify the path through the d attribute. Just for fun, let's reverse the direction of the moon by changing the path code from

d='M390,80 h 0 a50,19 0 1,0 1,1 z'
     ^location   ^orbit     ^direction

d='M300,90 h 0 a50,15 0 1,1 1,1 z'

View the new SVG.

But the universe doesn't look right without stars, so let's add some. Replace the black rectangle background with a PNG image.

<image xlink:href='Stars.png' x='0' y='0' width='1000' height='800' />

Now view the new SVG.

You have your universe. Now you can make it better.

This article is licensed under a Creative Commons Attribution, Non Commercial - Share Alike 2.5 license.