2021-01-01: SVG Animate Technology. Design with reference from W3School and Inkscape.
12 Eclipse with 5 rotating effects
<svg
xmlns:dc=”http://purl.org/dc/elements/1.1/”
xmlns:cc=”http://creativecommons.org/ns#”
xmlns:rdf=”http://www.w3.org/1999/02/22-rdf-syntax-ns#”
xmlns:svg=”http://www.w3.org/2000/svg”
xmlns=”http://www.w3.org/2000/svg”
xmlns:xlink=”http://www.w3.org/1999/xlink”
xmlns:sodipodi=”http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd”
xmlns:inkscape=”http://www.inkscape.org/namespaces/inkscape”
width=”600″
height=”600″
version=”1.1″
id=”svg32″
sodipodi:docname=”rotatingeclips5.svg”
inkscape:version=”1.0.1 (3bc2e813f5, 2020-09-07)”>
<linearGradient id=”rygb”>
<stop id=”ro0″ offset=”0″ stop-color=”red”/>
<stop id=”ro1″ offset=”.25″ stop-color=”yellow”/>
<stop id=”ro3″ offset=”.75″ stop-color=”green”/>
<stop id=”ro4″ offset=”1″ stop-color=”blue”/>
</linearGradient>
<g id=”R1″ transform=”translate(250 250)”>
<ellipse rx=”100″ ry=”50″ opacity=”0.5″ fill=”url(#rygb)”>
<animateTransform attributeName=”transform” type=”rotate” dur=”7s” from=”0″ to=”360″ repeatCount=”indefinite” />
<animate repeatCount=”indefinite” attributeName=”cx” dur=”6s” values=”-10; 100; -10″ />
<animate repeatCount=”indefinite” attributeName=”cy” dur=”5s” values=”-100; 10; -100″ />
<animate repeatCount=”indefinite” attributeName=”rx” dur=”4s” values=”10; 100; 10″ />
<animate repeatCount=”indefinite” attributeName=”ry” dur=”3s” values=”10; 60; 10″ />
</ellipse>
</g>
<use xlink:href=”#R1″ transform=”rotate(30 300 250)”/>
<use xlink:href=”#R1″ transform=”rotate(60 300 250)”/>
<use xlink:href=”#R1″ transform=”rotate(90 300 250)”/>
<use xlink:href=”#R1″ transform=”rotate(120 300 250)”/>
<use xlink:href=”#R1″ transform=”rotate(150 300 250)”/>
<use xlink:href=”#R1″ transform=”rotate(180 300 250)”/>
<use xlink:href=”#R1″ transform=”rotate(210 300 250)”/>
<use xlink:href=”#R1″ transform=”rotate(240 300 250)”/>
<use xlink:href=”#R1″ transform=”rotate(270 300 250)”/>
<use xlink:href=”#R1″ transform=”rotate(300 300 250)”/>
<use xlink:href=”#R1″ transform=”rotate(330 300 250)”/>
</svg>