JSFiddle - React, Tailwind, and code Playground

by mars0i

HTML

<svg width="400" height="400">
		<g transform="translate(200,200) scale(1.3)">
		<circle class="sun" r="10"></circle>

		<g class="cycle"speed="0.01">
		<circle id="deferent" class="cycle" r="60"></circle> 

		<g class="epicycleCenter" transform="translate(60,0)">
		<circle id="pointD" class="movingPointOnCycle" r="2"></circle>

		<g class="shift" speed="-0.01" displacement="-25">
		<circle id="pointB" class="movingPointOnCycle" r="2"></circle>

		<line x1="0" y1="0" x2="0" y2="25" stroke-dasharray="1,2"></line>
		<g class="cycle"speed="0.01">
		<circle id="epicycle2" class="cycle" r="75"></circle>
		</g>
		</g>
		</g>
		</g>
		</g>
		</svg>

CSS

.cycle {
								stroke : #000000;
								fill : none;
						}
						.movingPointOnCycle {
								stroke : #000000;
								fill : #000000;
						}
						#pointB {
								stroke : #0000FF;
								fill : #0000FF;
						}
						#epicycle2 {
								stroke : #0000FF;
						}
						.centerOfUniverse {
								stroke : #000000;
								fill : #000000;
						}
						.sun {
								stroke : #000000;
								fill : #F0F000;
						}
						.mars {
								stroke : #000000;
								fill : #A00000;
						}
						.earth {
								stroke : #000000;
								fill : #00A000;
						}

JavaScript

var t0 = Date.now();
			var svg = d3.select("svg");
			d3.timer(function() {
				var delta = (Date.now() - t0);
				svg.selectAll(".cycle").attr("transform", function(d) {
					return "rotate(" + delta * d3.select(this).attr("speed") + ")";
				});
				svg.selectAll(".shift").attr("transform", function(d) {
					return "rotate(" + delta * d3.select(this).attr("speed") + ")" 
					+ 
						"translate(0," + d3.select(this).attr("displacement") + ")"
					;
				});
			});