SVG Maker Project - Colorful Orb

This project makes a colorful orb in SVG using circle elements, then reusing and rotating them. This project does not use any Javascript as rotating the orb will not be as smooth. Instead, the project uses Synchronous Multimedia Integration Language (SMIL) for a much smoother rotation.

The image to the left is know as the Seed of Life. The project will start with this code and add to it to make the colorful orb.

The code for the Seed of Life is shown below. CSS styles are defined for the stroke-width, fill-opacity, and colors used by the SVG elements. The opacity is a value from 0 to 1 that defines how much the object underneath can be seen. A value of 1 blocks everything underneath. CSS allows setting the fill and stroke opacity separately or setting both at once. The image only uses fill-opacity so that the circle strokes do not show the white underneath which would make them appear lighter in color.

The image has a viewBox from (0,0) to (520,520). The image has an outer circle with center at (250,250) and a radius of 250, which requires 500 pixels of width and height. To center the image in the viewBox, the code uses the translate transformation in the first grouping to offset the entire image 10 pixels down and 10 pixels to the right. This grouping contains all of the SVG elements that define the image.

Next, the code defines the outer circle, then an inner circle with the same center (250,250), but a radius of 125 pixels, half the outer circle.

The next grouping is used to define the color and fill opacity of the grouping with id="circles". The "circles" grouping contains two <circle> elements that both have a radius of 125 pixels and x-coordinate of 250, but are placed vertically with the y-coordinate at 125 and 375 respectfully. The circles touch each other at (250,250) and touch the outer circle as well.

Next the "circles" grouping is reused with the <use> element by setting its xlink:href attribute to "orb" and preceding the attribute with a # sign to indicate the id is defined in this document. The 2 <use> elements have a rotate transformation applied to rotate the copy of the "circles" grouping 60 and 120 degrees about point (250,250). They also have different defined colors as set in their respective class attributes. Note that the color of the "circles" grouping is inherited from the grouping outside of it. Had the color been inserted inside the "circles" grouping or in its <g> element, that color would have overriden the color set in the <use> elements.

Code for the Seed of Life

A Colorful Orb

The image to the left just reuses elements from the Seed of Life, rotating the image elements every 15 degrees instead of every 60 degrees. It also removes the smaller inner circle of the Seed of Life image.

In the code shown below, changes from the Seed of Life code above are highlighted in yellow. The fill-opacity has changed to allow more of the objects underneath to show through, since there are more objects underneath. Also, a grouping with id="orb" is added, the inner circle is removed, and three <use> elements are added.

The "orb" grouping is reused with the <use> element by setting its xlink:href attribute to "circles" and preceding the attribute with a # sign to indicate the id is defined in this document. The 3 <use> elements have a rotate transformation applied which rotates the copy of the "orb" grouping 15, 30 and 45 degrees respectfully about point (250,250).

Adding Animation

To add animation, the code needs another grouping around the elements to animate. Animation can be done with javascript but rotating the orb will not be as smooth. Instead, the code uses Synchronous Multimedia Integration Language (SMIL) for a much smoother rotation.

In the code below, changes from the colorful orb above are highlighted in yellow. The added grouping has the class definition from the outer grouping, not necessary, but makes it easier to read.

Within that grouping, an <animateTransform> element is added with attributes that tell the browser what to animate. First, the attributeName is set to "transform", the type attribute is set to "rotate" and the from and to attributes set the rotation from 0 to 360 degrees about point (250,250). The dur attribute sets the time of the rotation to 10 seconds and the repeatCount attribute is set to indefinite, which repeats the 0 to 360 rotation forever. Since 0 and 360 degrees are the same angle, this animation has no snap back effect and is very smooth when the animation starts over.

Copy and paste the code above into your text editor, save the file with a .svg extension, and open it in a browser. Try changing the stroke-width in the sw class to remove the stroke on the circles.