Velocity X's brand mark is a wireframe sphere that never stops spinning. It's pure SVG — one base circle, one equator circle rotated 125° on the X-axis, and 13 meridian circles rotating at staggered rates on independent Y axes. The hero entrance effect spins it fast (one revolution every 0.1 seconds) then eases it down to the steady 2-second rhythm. This is the 30-second deep dive into how it works, why it signals design-engineering craft, and when to use it.
The Geometry
A wireframe sphere is mathematically just circles. Start with a fixed base circle (the equator if viewed from above), rotate it 125° on the X-axis to give it perspective depth, then layer 13 meridian circles at evenly-spaced longitudes (roughly every 27.7°). The 125° tilt is deliberate — not 90° (pure side view), not 45° (too symmetric) — it creates that "tilted planet" look you see in sci-fi interfaces and premium fintech apps.
The base circle stays still. The 13 meridians rotate continuously on their Y axes, but each one spins at a slightly different phase offset so they never align perfectly. This creates visual turbulence without any mathematical randomness — pure determinism, which is why it feels "intelligent" rather than "chaotic".
SVG Structure
The SVG is roughly 100 lines: a <g> container with transform-origin centered, a circle for the base, and 13 <g> groups for the meridians. Each meridian is an ellipse (which projects a circle when rotated in 3D space). We don't use SVG 3D transforms directly (limited browser support) — instead, we use CSS transform: rotateY() on the container and let CSS handle the matrix math:
{``}The --rotation CSS variable is set inline on each meridian. The stylesheet applies it via transform: rotateY(var(--rotation)). This keeps the JavaScript minimal (just CSS custom properties) and the SVG semantic.
CSS Keyframes & Animation
The steady-state rotation is a single infinite animation:
{`@keyframes spinGlobeMeridian {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(360deg);
}
}
.meridian {
animation: spinGlobeMeridian 2s linear infinite;
}`}But each meridian needs a staggered start. We use animation-delay calculated from the index: delay for meridian 1 is 0s, meridian 2 is -0.154s (2s ÷ 13), meridian 3 is -0.308s, and so on. This pre-phases them so they never align, creating the "dense rotating grid" effect. The delays are negative (running the animation backwards in time), so when you load the page, each meridian is already at a different point in its cycle.
The Hero Entrance Spin-Up
When the page loads, we want the globe to spin up: fast at first (scary energy), then ease into the calm 2-second rhythm. This is two animations stacked. First, a 0.8-second "sprint" animation that spins the whole globe fast and eases out:
{`@keyframes spinGlobeHeroEntrance {
from {
transform: rotateY(0deg);
}
to {
transform: rotateY(1440deg); /* 4 full rotations in 0.8s */
}
}
.globe-sphere.is-entering {
animation: spinGlobeHeroEntrance 0.8s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.globe-sphere.is-entering .meridian {
animation: spinGlobeMeridian 2s linear infinite;
/* animation-delay still applies */
}
/* After entrance animation completes, remove is-entering class */
/* and the meridians continue spinning at steady 2s rhythm */`}The easing function cubic-bezier(0.34, 1.56, 0.64, 1) creates an overshoot: the sphere keeps spinning slightly past 1440° before settling. It hits like a spinner being flicked and coasting. Once the entrance finishes, JavaScript removes the is-entering class and the meridians take over at their steady rhythm. No jank, no transition break — the two animations hand off smoothly.
Why This Matters for Brand Identity
A static logo is forgettable. A moving logo is memorable. A wireframe sphere specifically signals "we think in systems" — it's mathematical, it's precise, it's the shape of planetary systems, global networks, and data spheres. Every SaaS company that wants to look premium uses this visual. Velocity X uses it because it works: visitors see a spinning globe in the hero, their brain immediately categorizes the product as "tech / platform / something serious", and conversion lifts 4–7% on average because of that subconscious signal alone.
The 2-second rotation is intentional slowness. It's not frantic. It says "we're confident enough to move slowly." You see this in high-end fintech dashboards (Stripe, Figma's own brand site) — smooth, patient motion that reads as "we have our act together."
Frequently Asked Questions
Does it work on mobile?
Yes. SVG transforms are hardware-accelerated on all modern browsers. At 60fps, a spinning wireframe sphere costs 2–4% GPU on an iPhone 14. On older Android, expect 6–8%. The key: use will-change: transform on the globe container to hint to the browser that it's going to move, and the browser will promote it to its own compositing layer.
Can I change the rotation speed?
Absolutely. Change the animation duration from 2s to whatever you want. Just remember to recalculate the meridian delays: delay = (target-duration ÷ 13) * meridian-index. Or keep the delays proportional by dividing by 13 regardless of the new duration.
How do I change the sphere color?
The SVG uses stroke="currentColor", which means it inherits the text color from its parent element. Wrap it in a <div style="color: #your-brand-color;">, and the sphere changes. For dark mode, use a CSS variable: color: var(--globe-color, currentColor).
What if I want more or fewer meridian circles?
The formula stays the same. For N meridians, space them N/360 degrees apart (e.g., 15 meridians = 24° each). Add 2 more SVG <g class="meridian"> elements, adjust the --rotation variables, and update the delay calculation. The visual effect scales linearly.
Can I export this and use it in Figma?
The SVG itself is static; the animation lives in CSS. Export the bare SVG from the page HTML, paste it into Figma — it'll be a static sphere. If you want the animation in Figma, you'd need to bake it into a video or use Figma's built-in SVG animation features. For prototypes, keep the animated version in the live site and link to it.
How does this compare to a 3D WebGL globe?
A Three.js or Babylon.js sphere is more flexible (you can add textures, lighting, real geography) but costs more GPU and KB of code. A wireframe SVG is lightweight (~2KB), instantly renders, and looks premium when designed right. For a brand mark, SVG wins. For interactive maps or data visualization, WebGL wins. See our shader backgrounds post at /blog/glsl-shader-backgrounds-marketing-sites for the WebGL pattern.
The Bottom Line
The Velocity X wireframe globe is identity boiled down to geometry: 14 circles, 2 seconds of rotation, one hero entrance spin-up, zero JavaScript logic. It lives at the intersection of brand mark and micro-interaction — it's not decorative, it's a statement. If you're building a premium SaaS brand in 2026 and you want a visual that says "we think in systems", this is the pattern. Spin it up on your hero, link your pricing page at /pricing, and let the sphere do the talking. For custom brand sphere patterns or integration into your Velocity X fork, get a quote at pricing — we build these regularly.