In a typical diamond chart, all physical planets move anticlockwise whereas the shadow planets Rahu/Ketu move clockwise. Here is an animation illustrating this. The SVG source code for the animation is provided at the bottom.
SVG Source Code
<svg xmlns=”http://www.w3.org/2000/svg”
viewBox=”0 0 1000 1000″
width=”100%”
max-width=”1000px”>
<defs>
<!– Background –>
<radialGradient id=”bg” cx=”50%” cy=”48%” r=”70%”>
<stop offset=”0%” stop-color=”#18243a”/>
<stop offset=”50%” stop-color=”#0a101d”/>
<stop offset=”100%” stop-color=”#020409″/>
</radialGradient>
<!– Earth –>
<radialGradient id=”earth” cx=”35%” cy=”30%”>
<stop offset=”0%” stop-color=”#a9edff”/>
<stop offset=”35%” stop-color=”#3196d8″/>
<stop offset=”75%” stop-color=”#15528c”/>
<stop offset=”100%” stop-color=”#06162c”/>
</radialGradient>
<!– Sun –>
<radialGradient id=”sun” cx=”35%” cy=”30%”>
<stop offset=”0%” stop-color=”#fffde0″/>
<stop offset=”35%” stop-color=”#ffe36b”/>
<stop offset=”70%” stop-color=”#ffad27″/>
<stop offset=”100%” stop-color=”#d45b0b”/>
</radialGradient>
<!– Moon –>
<radialGradient id=”moon” cx=”35%” cy=”30%”>
<stop offset=”0%” stop-color=”#ffffff”/>
<stop offset=”60%” stop-color=”#d8dee7″/>
<stop offset=”100%” stop-color=”#7c8795″/>
</radialGradient>
<!– Glow –>
<filter id=”glow”
x=”-100%” y=”-100%”
width=”300%” height=”300%”>
<feGaussianBlur stdDeviation=”4″ result=”blur”/>
<feMerge>
<feMergeNode in=”blur”/>
<feMergeNode in=”SourceGraphic”/>
</feMerge>
</filter>
<filter id=”earthGlow”
x=”-150%” y=”-150%”
width=”400%” height=”400%”>
<feGaussianBlur stdDeviation=”8″ result=”blur”/>
<feMerge>
<feMergeNode in=”blur”/>
<feMergeNode in=”SourceGraphic”/>
</feMerge>
</filter>
<style>
.orbit {
fill:none;
stroke:#60718b;
stroke-width:1.5;
opacity:.30;
}
.mercuryOrbit {
fill:none;
stroke:#9aaac0;
stroke-width:1.5;
opacity:.40;
}
.nodeOrbit {
fill:none;
stroke:#9276c7;
stroke-width:1.5;
stroke-dasharray:6 9;
opacity:.45;
}
.planetLabel {
font-family:Arial,sans-serif;
font-size:18px;
font-weight:600;
fill:#eef3fc;
text-anchor:middle;
dominant-baseline:middle;
pointer-events:none;
}
.nodeLabel {
fill:#c8a8ff;
}
.earthLabel {
font-family:Arial,sans-serif;
font-size:15px;
fill:#b9c9dd;
text-anchor:middle;
}
.title {
font-family:Arial,sans-serif;
font-size:22px;
font-weight:500;
letter-spacing:5px;
fill:#edf3ff;
text-anchor:middle;
}
.subtitle {
font-family:Arial,sans-serif;
font-size:11px;
letter-spacing:3px;
fill:#8493aa;
text-anchor:middle;
}
</style>
</defs>
<!– ===================================================== –>
<!– BACKGROUND –>
<!– ===================================================== –>
<rect width=”1000″ height=”1000″ fill=”url(#bg)”/>
<!– Stars –>
<g fill=”#ffffff” opacity=”.45″>
<circle cx=”80″ cy=”120″ r=”1.2″/>
<circle cx=”155″ cy=”75″ r=”.8″/>
<circle cx=”235″ cy=”150″ r=”1″/>
<circle cx=”330″ cy=”85″ r=”.7″/>
<circle cx=”410″ cy=”140″ r=”1″/>
<circle cx=”575″ cy=”80″ r=”.8″/>
<circle cx=”670″ cy=”145″ r=”1″/>
<circle cx=”755″ cy=”85″ r=”.7″/>
<circle cx=”850″ cy=”135″ r=”1″/>
<circle cx=”930″ cy=”90″ r=”.8″/>
<circle cx=”55″ cy=”350″ r=”.8″/>
<circle cx=”120″ cy=”620″ r=”1″/>
<circle cx=”70″ cy=”820″ r=”.7″/>
<circle cx=”180″ cy=”910″ r=”1″/>
<circle cx=”305″ cy=”850″ r=”.7″/>
<circle cx=”420″ cy=”930″ r=”1″/>
<circle cx=”590″ cy=”875″ r=”.8″/>
<circle cx=”700″ cy=”925″ r=”1″/>
<circle cx=”835″ cy=”840″ r=”.7″/>
<circle cx=”930″ cy=”760″ r=”1″/>
</g>
<!– ===================================================== –>
<!– TITLE –>
<!– ===================================================== –>
<text x=”500″ y=”50″ class=”title”>
VEDIC PLANETARY MOTION
</text>
<text x=”500″ y=”74″ class=”subtitle”>
GEOCENTRIC • ILLUSTRATIVE MODEL
</text>
<!– ===================================================== –>
<!– ORBITS –>
<!– ===================================================== –>
<!– Moon –>
<circle cx=”500″ cy=”500″
r=”65″
class=”orbit”/>
<!– Mercury ellipse –>
<ellipse cx=”500″ cy=”500″
rx=”105″
ry=”75″
class=”mercuryOrbit”/>
<!– Venus –>
<circle cx=”500″ cy=”500″
r=”145″
class=”orbit”/>
<!– Sun –>
<circle cx=”500″ cy=”500″
r=”185″
class=”orbit”/>
<!– Mars –>
<circle cx=”500″ cy=”500″
r=”230″
class=”orbit”/>
<!– Jupiter –>
<circle cx=”500″ cy=”500″
r=”290″
class=”orbit”/>
<!– Rahu/Ketu –>
<circle cx=”500″ cy=”500″
r=”330″
class=”nodeOrbit”/>
<!– Saturn –>
<circle cx=”500″ cy=”500″
r=”375″
class=”orbit”/>
<!– ===================================================== –>
<!– EARTH –>
<!– ===================================================== –>
<circle cx=”500″ cy=”500″
r=”28″
fill=”#328bd0″
opacity=”.18″
filter=”url(#earthGlow)”/>
<circle cx=”500″ cy=”500″
r=”18″
fill=”url(#earth)”
filter=”url(#earthGlow)”/>
<circle cx=”495″ cy=”494″
r=”5″
fill=”#c4f2ff”
opacity=”.30″/>
<text x=”500″
y=”540″
class=”earthLabel”>
Earth
</text>
<!– ===================================================== –>
<!– MOON –>
<!– ===================================================== –>
<g>
<circle cx=”500″
cy=”435″
r=”10″
fill=”url(#moon)”
filter=”url(#glow)”/>
<text x=”500″
y=”413″
class=”planetLabel”>
Mo
</text>
<animateTransform
attributeName=”transform”
attributeType=”XML”
type=”rotate”
from=”0 500 500″
to=”-360 500 500″
dur=”10s”
repeatCount=”indefinite”/>
</g>
<!– ===================================================== –>
<!– MERCURY –>
<!– ===================================================== –>
<!–
The whole group is scaled vertically around Earth.
A circular rotation therefore becomes an ellipse.
–>
<g transform=”translate(500 500) scale(1 .7142857) translate(-500 -500)”>
<g>
<circle cx=”605″
cy=”500″
r=”10″
fill=”#aaa18e”
filter=”url(#glow)”/>
<text x=”605″
y=”477″
class=”planetLabel”>
Me
</text>
<animateTransform
attributeName=”transform”
attributeType=”XML”
type=”rotate”
from=”0 500 500″
to=”-360 500 500″
dur=”38s”
repeatCount=”indefinite”/>
</g>
</g>
<!– ===================================================== –>
<!– VENUS –>
<!– ===================================================== –>
<g>
<circle cx=”645″
cy=”500″
r=”11″
fill=”#d9b86c”
filter=”url(#glow)”/>
<text x=”645″
y=”476″
class=”planetLabel”>
Ve
</text>
<animateTransform
attributeName=”transform”
attributeType=”XML”
type=”rotate”
from=”0 500 500″
to=”-360 500 500″
dur=”60s”
repeatCount=”indefinite”/>
</g>
<!– ===================================================== –>
<!– SUN –>
<!– ===================================================== –>
<g>
<circle cx=”685″
cy=”500″
r=”14″
fill=”url(#sun)”
filter=”url(#glow)”/>
<text x=”685″
y=”470″
class=”planetLabel”>
Su
</text>
<animateTransform
attributeName=”transform”
attributeType=”XML”
type=”rotate”
from=”0 500 500″
to=”-360 500 500″
dur=”85s”
repeatCount=”indefinite”/>
</g>
<!– ===================================================== –>
<!– MARS –>
<!– ===================================================== –>
<g>
<circle cx=”730″
cy=”500″
r=”11″
fill=”#c95b48″
filter=”url(#glow)”/>
<text x=”730″
y=”472″
class=”planetLabel”>
Ma
</text>
<animateTransform
attributeName=”transform”
attributeType=”XML”
type=”rotate”
from=”0 500 500″
to=”-360 500 500″
dur=”135s”
repeatCount=”indefinite”/>
</g>
<!– ===================================================== –>
<!– JUPITER –>
<!– ===================================================== –>
<g>
<circle cx=”790″
cy=”500″
r=”14″
fill=”#c69a6a”
filter=”url(#glow)”/>
<text x=”790″
y=”467″
class=”planetLabel”>
Ju
</text>
<animateTransform
attributeName=”transform”
attributeType=”XML”
type=”rotate”
from=”0 500 500″
to=”-360 500 500″
dur=”230s”
repeatCount=”indefinite”/>
</g>
<!– ===================================================== –>
<!– RAHU –>
<!– ===================================================== –>
<g>
<circle cx=”830″
cy=”500″
r=”11″
fill=”#a77aff”
filter=”url(#glow)”/>
<text x=”830″
y=”472″
class=”planetLabel nodeLabel”>
Ra
</text>
<animateTransform
attributeName=”transform”
attributeType=”XML”
type=”rotate”
from=”0 500 500″
to=”360 500 500″
dur=”175s”
repeatCount=”indefinite”/>
</g>
<!– ===================================================== –>
<!– KETU –>
<!– ===================================================== –>
<g>
<circle cx=”170″
cy=”500″
r=”11″
fill=”#a77aff”
filter=”url(#glow)”/>
<text x=”170″
y=”472″
class=”planetLabel nodeLabel”>
Ke
</text>
<animateTransform
attributeName=”transform”
attributeType=”XML”
type=”rotate”
from=”0 500 500″
to=”360 500 500″
dur=”175s”
repeatCount=”indefinite”/>
</g>
<!– ===================================================== –>
<!– SATURN –>
<!– ===================================================== –>
<g>
<ellipse cx=”875″
cy=”500″
rx=”21″
ry=”7″
fill=”none”
stroke=”#d2bc8d”
stroke-width=”3″
opacity=”.85″/>
<circle cx=”875″
cy=”500″
r=”12″
fill=”#c5a96f”
filter=”url(#glow)”/>
<text x=”875″
y=”467″
class=”planetLabel”>
Sa
</text>
<animateTransform
attributeName=”transform”
attributeType=”XML”
type=”rotate”
from=”0 500 500″
to=”-360 500 500″
dur=”300s”
repeatCount=”indefinite”/>
</g>
<!– ===================================================== –>
<!– FOOTER –>
<!– ===================================================== –>
<text x=”500″
y=”955″
class=”subtitle”>
Mo • Me • Ve • Su • Ma • Ju • Ra • Ke • Sa
</text>
</svg>