SVG of the Week: Planetary Animation

Animating complex sets of objects with SVG animation can be simple.  Chris shares how to create a model of a planetary systems motion.  For this example Chris used SMIL and some filter effects to whip together a terrific animation, as demonstrated below.

Creating the “SunGradient” is as easy as defining a basic linear gradient.

<defs>
<linearGradient id="SunGradient" x1="1" y1="0" x2="0" y2="0"
gradientUnits="objectBoundingBox">
<stop offset="0" style="stop-color:red"/>
<stop offset="1" style="stop-color:yellow"/>
</linearGradient>
</defs>

And animating a gradient-filled “planet” is as easy as using the animateTransform element and the style attribute tag:

<g id="planet1">
<animateTransform attributeName="transform" type="rotate" dur="3s"
values="0;360" repeatCount="indefinite" fill="freeze"/>
<g transform="translate(-43,0)">
<circle cx="0" cy="0" r="5" style="fill:black"/>
<circle cx="0" cy="0" r="4" style="fill:url(#Planet1Gradient)"/>
</g>
</g>

To see the solar system in action, just click on this image: