Spinning Dots
Home
Snippets
Spinning Dots
HTML
CSS
JS
<div class="globe" id="globe"></div>
body { height: 100vh; margin: 0; background: radial-gradient(circle at center, #000, #111); display: flex; justify-content: center; align-items: center; } .dot { width: 5px; height: 5px; background: #00f0ff; border-radius: 50%; position: absolute; top: 50%; left: 50%; } .globe { transform-style: preserve-3d; animation: spin 20s linear infinite; } @keyframes spin { from { transform: rotateY(0deg); } to { transform: rotateY(360deg); } }
const globe = document.getElementById('globe'); const dots = 300; const radius = 90; for (let i = 0; i < dots; i++) { const dot = document.createElement('div'); dot.className = 'dot'; const theta = Math.acos(1 - 2 * (i + 0.5) / dots); const phi = Math.PI * (1 + Math.sqrt(12)) * (i + 0.5); const x = radius * Math.sin(theta) * Math.cos(phi); const y = radius * Math.sin(theta) * Math.sin(phi); const z = radius * Math.cos(theta); dot.style.transform = `translate3d(${x}px, ${y}px, ${z}px)`; globe.appendChild(dot); }
Ad #1
Ad #2
Scroll to Top