Balls and Ring
Home
Snippets
Balls and Ring
HTML
CSS
JS
<div class="ring"></div>
:root { --t: 6; --l: 5; } body { min-height: 100vh; margin: 0; display: grid; place-content: center; } .ring { border: .5vmin double color-mix(in lab, currentcolor 40%, #0000); width: 30vmin; aspect-ratio: 1; border-radius: 100vmax; position: relative; } .dot { border: 1px solid; width: 4vmin; aspect-ratio: 1; border-radius: 100vmax; position: absolute; offset-path: border-box; --clr: hsl(calc(var(--i) * 360deg / var(--t)) 75% calc(var(--l) * 6% + 15%)); background-color: var(--clr); animation: followpath 8s ease-out infinite calc((8s / (-1 * 6)) * var(--i)); } @keyframes followpath { 100% { offset-distance: 100%; } }
document.addEventListener("DOMContentLoaded", () => { const t = 6; const ring = document.querySelector('.ring'); for (let i = 1; i <= t; i++) { const dot = document.createElement('div'); dot.className = 'dot'; dot.style.setProperty('--i', i); dot.style.setProperty('--t', t); ring.appendChild(dot); } });
Ad #1
Ad #2
Scroll to Top