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 latitude/longitude wireframe sphere drawn entirely in SVG ellipses, turning gently.
<!--
No dots - just the wireframe: perspective parallels (rx wide, ry thin) and
meridians (rx narrowing, ry full). The rx/ry pairs *are* the illusion; change
them and the sphere flattens into a target. aria-hidden decoration.
-->
<style>
@keyframes gws-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:240px;height:240px;max-width:100%" aria-hidden="true">
<svg viewBox="0 0 200 200" class="h-full w-full text-indigo-600/70 [animation:gws-spin_40s_linear_infinite] motion-reduce:[animation:none] dark:text-indigo-400/70">
<circle cx="100" cy="100" r="92" fill="none" stroke="currentColor" stroke-opacity="0.6" />
<ellipse cx="100" cy="100" rx="92" ry="22" fill="none" stroke="currentColor" stroke-opacity="0.45" />
<ellipse cx="100" cy="66" rx="66" ry="12" fill="none" stroke="currentColor" stroke-opacity="0.35" />
<ellipse cx="100" cy="134" rx="66" ry="12" fill="none" stroke="currentColor" stroke-opacity="0.35" />
<ellipse cx="100" cy="42" rx="36" ry="7" fill="none" stroke="currentColor" stroke-opacity="0.28" />
<ellipse cx="100" cy="158" rx="36" ry="7" fill="none" stroke="currentColor" stroke-opacity="0.28" />
<ellipse cx="100" cy="100" rx="30" ry="92" fill="none" stroke="currentColor" stroke-opacity="0.35" />
<ellipse cx="100" cy="100" rx="62" ry="92" fill="none" stroke="currentColor" stroke-opacity="0.3" />
<line x1="100" y1="8" x2="100" y2="192" stroke="currentColor" stroke-opacity="0.4" />
</svg>
<div class="pointer-events-none absolute inset-0 rounded-full bg-[radial-gradient(circle_at_36%_30%,rgba(129,140,248,0.28),transparent_60%)]"></div>
</div>
<div class="max-w-md">
<h3 class="text-xl font-bold tracking-tight text-gray-900 sm:text-2xl dark:text-gray-100">Mapped end to end</h3>
<p class="mt-2 text-sm leading-relaxed text-gray-600 dark:text-gray-400">A clean latitude and longitude grid, drawn entirely in SVG.</p>
</div>
</div>| Prop | Type | Default | Description |
|---|---|---|---|
heading | ReactNode | - | Heading |
copy | string | - | Body text shown under the title. |
size | number | 240 | Size |
className | string | - | Additional classes merged onto the root element. |
Each parallel and meridian is an `<ellipse>` whose `rx`/`ry` encode the perspective - the numbers are the illusion, not decoration, so tune them together or the sphere flattens. Retint via the `text-indigo-*` class and resize with `size`; `motion-reduce` stops the rotation.