Yummy Animation
Home
Snippets
Yummy Animation
HTML
CSS
JS
<div class="assembly"> <div class="rotY" id="rotY"></div> </div>
:root{ --n-dots: 18; --n-rings: 36; --dot-d: 0.75em; --ring-r: 5em; --torus-r: 8em; --t: 2s; } body{ overflow:hidden; margin:0; height:100vh; perspective:20em; perspective-origin:50% calc(50% - 10em); background:#000; color:#fff; } div{ position:absolute; top:50%; left:50%; transform-style:preserve-3d; } .assembly{ transform: translateZ(-8em) rotateX(-30deg) scaleX(1.25); } .rotY{ animation: ry 2s linear infinite; } @keyframes ry{ to{ transform: rotateY(20deg); } } .rotX{ animation: rx 2s ease-in-out infinite; } @keyframes rx{ 0%,75%{ transform:none; } 100%{ transform: rotateX(-20deg); } } .ring{ position:absolute; transform-style:preserve-3d; } .dot{ position:absolute; margin:-0.375em; width:0.75em; height:0.75em; border-radius:50%; backface-visibility:hidden; background:white; }
const nRings = 36; const nDots = 18; const torusR = 8; const ringR = 5; const ringA = 360 / nRings; const dotA = 360 / nDots; const rotY = document.getElementById("rotY"); for(let i=0;i<nRings;i++){ const ring = document.createElement("div"); ring.className = "ring"; ring.style.transform = ` rotateY(${i * ringA}deg) translateZ(${torusR}em) `; const rotX = document.createElement("div"); rotX.className = "rotX"; rotX.style.animationDelay = `-${i * 2 / nRings}s`; for(let j=0;j<nDots;j++){ const dot = document.createElement("div"); dot.className = "dot"; dot.style.transform = ` rotateX(${j * dotA}deg) translateZ(${ringR}em) `; rotX.appendChild(dot); } ring.appendChild(rotX); rotY.appendChild(ring); }
Ad #1
Ad #2
Scroll to Top