New
GlobesDotted Rotating Globe
A dotted-sphere globe that turns slowly under a fixed highlight - pure CSS and inline SVG, no WebGL.
#globe#dotted#rotating
3 frameworksBeginner
Loading…
A small globe circled by three tilted orbit rings, each with a satellite sweeping its own speed.
<!--
Three tilted orbit rings around a small globe, each spinning at its own speed.
A ring is one rotated <g> of an ellipse plus a satellite dot; spinning the <g>
sweeps the dot around the tilted ring. All aria-hidden decoration.
-->
<style>
@keyframes gor-core { to { transform: rotate(1turn); } }
@keyframes gor-spin { to { transform: rotate(1turn); } }
</style>
<div class="flex w-full flex-col items-center gap-6 px-4 py-8 text-center">
<div class="relative shrink-0" style="width:250px;height:250px;max-width:100%" aria-hidden="true">
<svg viewBox="0 0 200 200" class="h-full w-full">
<g class="text-amber-600/70 dark:text-amber-400/70">
<g class="[animation:gor-core_30s_linear_infinite] motion-reduce:[animation:none]" style="transform-origin:100px 100px">
<circle cx="100" cy="100" r="34" fill="none" stroke="currentColor" stroke-opacity="0.5" />
<ellipse cx="100" cy="100" rx="34" ry="10" fill="none" stroke="currentColor" stroke-opacity="0.35" />
<ellipse cx="100" cy="100" rx="12" ry="34" fill="none" stroke="currentColor" stroke-opacity="0.35" />
</g>
</g>
<g class="text-sky-500/70" style="transform-origin:100px 100px;transform:rotate(0deg)">
<g class="[animation:gor-spin_7s_linear_infinite] motion-reduce:[animation:none]" style="transform-origin:100px 100px">
<ellipse cx="100" cy="100" rx="80" ry="30" fill="none" stroke="currentColor" stroke-opacity="0.6" />
<circle cx="180" cy="100" r="4" fill="currentColor" />
</g>
</g>
<g class="text-violet-500/70" style="transform-origin:100px 100px;transform:rotate(60deg)">
<g class="[animation:gor-spin_11s_linear_infinite_reverse] motion-reduce:[animation:none]" style="transform-origin:100px 100px">
<ellipse cx="100" cy="100" rx="90" ry="34" fill="none" stroke="currentColor" stroke-opacity="0.55" />
<circle cx="10" cy="100" r="4" fill="currentColor" />
</g>
</g>
<g class="text-emerald-500/70" style="transform-origin:100px 100px;transform:rotate(120deg)">
<g class="[animation:gor-spin_15s_linear_infinite] motion-reduce:[animation:none]" style="transform-origin:100px 100px">
<ellipse cx="100" cy="100" rx="72" ry="26" fill="none" stroke="currentColor" stroke-opacity="0.5" />
<circle cx="172" cy="100" r="3.5" fill="currentColor" />
</g>
</g>
</svg>
</div>
<div class="max-w-md">
<h3 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl dark:text-gray-100">In constant orbit</h3>
<p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">Three rings, three speeds - satellites sweeping a tilted plane.</p>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
heading | ReactNode | - | Heading |
copy | string | - | Body text shown under the title. |
className | string | - | Additional classes merged onto the root element. |
Each ring is an outer `<g>` that holds the tilt and an inner `<g>` that spins, so the satellite dot sweeps around a tilted plane rather than a flat circle. Change the tilt `rotate()` and the duration per ring to recompose the system; `motion-reduce` stops every ring at once.