Green Arcs
Home
Snippets
Green Arcs
HTML
CSS
JS
<body></body>
html { overflow: hidden; } body { margin: 0; background: #000; } .ring { position: absolute; top: 50%; left: 50%; border: solid 0.375em; border-color: lime transparent transparent transparent; border-radius: 50%; animation: spin linear infinite; } @keyframes spin { to { transform: rotate(1turn); } }
const totalRings = 9; let baseDiameter = 2; for (let i = 0; i < totalRings; i++) { const d = baseDiameter + i * 3; const ring = document.createElement("div"); ring.className = "ring"; ring.style.width = `${d}em`; ring.style.height = `${d}em`; ring.style.margin = `-${d / 2}em 0 0 -${d / 2}em`; const duration = 6.3 / (totalRings - i); ring.style.animationDuration = `${duration}s`; document.body.appendChild(ring); }
Ad #1
Ad #2
Scroll to Top