CSS Circle Animation Collection

1,671 matheusbulhoes0

<h1>CIRCLE ANIMATIONS COLLECTION</h1>
<div class="container">
  
  <div class="animation-container">
    <div class="animation-title">Pulsating Circles</div>
    <div id="anim1" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Rotating Orbits</div>
    <div id="anim2" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Sequential Rings</div>
    <div id="anim3" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Concentric Rotations</div>
    <div id="anim4" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Circular Waves</div>
    <div id="anim5" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Expanding Lines</div>
    <div id="anim6" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Breathing Grid</div>
    <div id="anim7" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Ripple Effect</div>
    <div id="anim8" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Fibonacci Spiral</div>
    <div id="anim9" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Halftone Gradient</div>
    <div id="anim10" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Silver Spiral</div>
    <div id="anim11" class="circle-container"></div>
  </div>
  
  <div class="animation-container">
    <div class="animation-title">Sunflower Spiral</div>
    <div id="anim12" class="circle-container"></div>
  </div>
</div>

CSS

@import url("https://fonts.cdnfonts.com/css/thegoodmonolith");

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background: #000;
  color: #f0f0f0;
  font-family: "TheGoodMonolith", monospace;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

h1 {
  margin-bottom: 30px;
  font-size: 24px;
  letter-spacing: 1px;
  text-align: center;
}

.container {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 30px;
  max-width: 1000px;
  margin: 0 auto;
}

@media (max-width: 768px) {
  .container {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 500px) {
  .container {
    grid-template-columns: 1fr;
  }
}

.animation-container {
  position: relative;
  width: 220px;
  height: 220px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(0, 0, 0, 0.5);
  padding: 10px;
  display: flex;
  flex-direction: column;
  align-items: center;
  overflow: visible;
  transition: border-color 0.3s ease;
}

.animation-container:hover {
  border-color: rgba(255, 255, 255, 0.3);
}

.animation-title {
  margin-bottom: 10px;
  font-size: 12px;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  text-align: center;
}

.circle-container {
  position: relative;
  width: 180px;
  height: 180px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
}

/* Corner decorations for all animation containers */
.corner {
  position: absolute;
  width: 16px;
  height: 16px;
  color: white;
  opacity: 0;
  z-index: 10;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.animation-container:hover .corner {
  opacity: 1;
}

.top-left {
  top: -8px;
  left: -8px;
  transition-delay: 0s;
}

.top-right {
  top: -8px;
  right: -8px;
  transform: rotate(90deg);
  transition-delay: 0.1s;
}

.bottom-left {
  bottom: -8px;
  left: -8px;
  transform: rotate(-90deg);
  transition-delay: 0.2s;
}

.bottom-right {
  bottom: -8px;
  right: -8px;
  transform: rotate(180deg);
  transition-delay: 0.3s;
}

/* 1. Pulsating Circles */
.pulse-dot {
  opacity: 0;
  transform-origin: center;
  animation: pulseFadeIn 3s infinite ease-in-out;
}
@keyframes pulseFadeIn {
  0% {
    opacity: 0;
    transform: scale(0.2);
  }
  40%,
  60% {
    opacity: 1;
    transform: scale(1);
  }
  100% {
    opacity: 0;
    transform: scale(0.2);
  }
}

/* 2. Rotating Orbits */
.orbit-container {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: rotate 8s infinite linear;
}
@keyframes rotate {
  to {
    transform: rotateZ(360deg);
  }
}

/* 3. Sequential Rings */
@keyframes expandRing {
  0% {
    transform: scale(0);
    opacity: 0;
  }
  20% {
    transform: scale(1);
    opacity: 1;
  }
  40%,
  100% {
    transform: scale(1.1);
    opacity: 0;
  }
}

/* 4. Concentric Rotations */
.concentric-container {
  position: absolute;
  width: 100%;
  height: 100%;
  transform-style: preserve-3d;
}
.concentric-ring {
  position: absolute;
  width: 100%;
  height: 100%;
  border-radius: 50%;
  transform-style: preserve-3d;
  animation: rotateRing linear infinite;
}
@keyframes rotateRing {
  to {
    transform: rotate(360deg);
  }
}

/* 5. Circular Waves */
.circular-wave-dot {
  animation: circularWave 3s infinite ease-in-out;
  transform-origin: center;
}
@keyframes circularWave {
  0% {
    transform: scale(0.7);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.2);
    opacity: 1;
  }
  100% {
    transform: scale(0.7);
    opacity: 0.3;
  }
}

/* 6. Expanding Lines */
.line-container {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotateLines 8s infinite linear;
  transform-origin: center;
}
@keyframes rotateLines {
  to {
    transform: rotate(360deg);
  }
}
.expanding-line {
  position: absolute;
  height: 1px;
  left: 50%;
  top: 50%;
  transform-origin: left center;
  background: rgba(255, 255, 255, 0.3);
  animation: expandLine 4s infinite ease-in-out;
}
@keyframes expandLine {
  0% {
    width: 0;
    opacity: 0;
  }
  20%,
  80% {
    width: 70px;
    opacity: 1;
  }
  100% {
    width: 0;
    opacity: 0;
  }
}

/* 7. Breathing Grid */
.breathing-dot {
  animation: breathe 4s infinite cubic-bezier(0.4, 0, 0.2, 1);
  transform-origin: center;
}
@keyframes breathe {
  0% {
    transform: scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.3);
    opacity: 1;
  }
  100% {
    transform: scale(0.8);
    opacity: 0.3;
  }
}

/* 8. Ripple Effect */
.ripple-container {
  position: absolute;
  width: 100%;
  height: 100%;
}
.ripple-ring {
  position: absolute;
  border: 1px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  animation: ripple 4s infinite cubic-bezier(0, 0.5, 0.5, 1);
}
@keyframes ripple {
  0% {
    width: 0;
    height: 0;
    opacity: 1;
  }
  100% {
    width: 180px;
    height: 180px;
    opacity: 0;
  }
}

/* New ripple wave dot animation */
.ripple-wave-dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  transform-origin: center;
}

@keyframes rippleWave {
  0%,
  100% {
    transform: scale(0.8);
    opacity: 0.3;
  }
  50% {
    transform: scale(1.8);
    opacity: 1;
  }
}

/* 9. Fibonacci Spiral (div version) */
.fibonacci-container {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotateSlow 30s infinite linear;
  transform-origin: center;
}
@keyframes rotateSlow {
  to {
    transform: rotate(360deg);
  }
}
.fibonacci-dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: fibPulse 3s infinite ease-in-out;
}
@keyframes fibPulse {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* 10. Halftone Gradient */
.halftone-container {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotateSlow 20s infinite linear;
  transform-origin: center;
}
.halftone-dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: halftoneFade 4s infinite ease-in-out;
}
@keyframes halftoneFade {
  0%,
  100% {
    opacity: 0.3;
    transform: scale(0.5);
  }
  50% {
    opacity: 1;
    transform: scale(1);
  }
}

/* 11. Silver Spiral */
.silver-container {
  position: absolute;
  width: 100%;
  height: 100%;
  animation: rotateSlow 25s infinite reverse linear;
  transform-origin: center;
}
.silver-dot {
  position: absolute;
  border-radius: 50%;
  background: #fff;
  animation: silverPulse 3s infinite ease-in-out;
}
@keyframes silverPulse {
  0%,
  100% {
    opacity: 0.2;
    transform: scale(0.7);
  }
  50% {
    opacity: 1;
    transform: scale(1.3);
  }
}

(function initCircleAnimations2025() {
  function setupPulsatingCircles() {
    const c = document.getElementById("anim1");
    if (!c) return;
    c.innerHTML = "";
    const center = document.createElement("div");
    center.className = "dot pulse-dot";
    center.style.width = center.style.height = "8px";
    center.style.left = "calc(50% - 4px)";
    center.style.top = "calc(50% - 4px)";
    c.appendChild(center);
    for (let r = 0; r < 4; r++) {
      const radius = 15 + r * 15,
        count = 6 + r * 3;
      for (let i = 0; i < count; i++) {
        const d = document.createElement("div");
        d.className = "dot pulse-dot";
        const angle = (i / count) * 2 * Math.PI;
        const x = Math.cos(angle) * radius,
          y = Math.sin(angle) * radius;
        const sz = 3 + r * 0.3;
        d.style.width = d.style.height = `${sz}px`;
        d.style.left = `calc(50% + ${x}px - ${sz / 2}px)`;
        d.style.top = `calc(50% + ${y}px - ${sz / 2}px)`;
        d.style.animationDelay = `${r * 0.2 + i * 0.1}s`;
        d.style.background = `rgba(255,255,255,${(90 - r * 10) / 100})`;
        c.appendChild(d);
      }
    }
  }

function setupRippleEffect() {
    const c = document.getElementById("anim8");
    if (!c) return;
    c.innerHTML = "";

// Center dot
    const cd = document.createElement("div");
    cd.className = "dot";
    cd.style.width = cd.style.height = "8px";
    cd.style.left = "calc(50% - 4px)";
    cd.style.top = "calc(50% - 4px)";
    cd.style.background = "rgba(255,255,255,0.9)";
    cd.style.zIndex = "10";
    c.appendChild(cd);

// Ripple container
    const rc = document.createElement("div");
    rc.className = "ripple-container";
    c.appendChild(rc);

// Create ripple rings
    const numRipples = 4;
    const rippleDuration = 4; // seconds

for (let i = 0; i < numRipples; i++) {
      const r = document.createElement("div");
      r.className = "ripple-ring";
      r.style.animationDelay = `${i * (rippleDuration / numRipples)}s`;
      rc.appendChild(r);
    }

// Create dots that will react to the ripple
    const numRings = 6;
    const maxRadius = 80;

for (let ring = 0; ring < numRings; ring++) {
      const radius = 15 + (ring * (maxRadius - 15)) / (numRings - 1);
      const numDots = 6 + ring * 3;

for (let i = 0; i < numDots; i++) {
        const angle = (i / numDots) * 2 * Math.PI;
        const x = Math.cos(angle) * radius;
        const y = Math.sin(angle) * radius;

// Calculate distance from center (normalized to 0-1)
        const distanceFromCenter = Math.sqrt(x * x + y * y) / maxRadius;

// Create the dot
        const d = document.createElement("div");
        d.className = "ripple-wave-dot";

// Size decreases as we move outward
        const size = 5 - ring * 0.5;
        d.style.width = d.style.height = `${size}px`;
        d.style.left = `calc(50% + ${x}px - ${size / 2}px)`;
        d.style.top = `calc(50% + ${y}px - ${size / 2}px)`;

// Set animation
        d.style.animation = "rippleWave 1s infinite ease-in-out";

// Delay based on distance from center - this creates the wave effect
        // Multiply by rippleDuration to match the ripple timing
        d.style.animationDelay = `${
          distanceFromCenter * (rippleDuration / 1.2)
        }s`;

// Opacity and color based on ring
        d.style.background = `rgba(255,255,255,${(90 - ring * 10) / 100})`;

c.appendChild(d);
      }
    }
  }

// 12. Sunflower Spiral (perfect SVG + SMIL)
  function setupFibonacciConcentric() {
    const c = document.getElementById("anim12");
    if (!c) return;
    c.innerHTML = "";
    const N = 200;
    const SIZE = 180;
    const DOT_RADIUS = 2;
    const MARGIN = 4;
    const CENTER = SIZE / 2;
    const MAX_RADIUS = CENTER - MARGIN - DOT_RADIUS;
    const GOLDEN_ANGLE = Math.PI * (3 - Math.sqrt(5));
    const DURATION = 3;
    const svgNS = "http://www.w3.org/2000/svg";

const svg = document.createElementNS(svgNS, "svg");
    svg.setAttribute("width", SIZE);
    svg.setAttribute("height", SIZE);
    svg.setAttribute("viewBox", `0 0 ${SIZE} ${SIZE}`);
    c.appendChild(svg);

for (let i = 0; i < N; i++) {
      const idx = i + 0.5;
      const frac = idx / N;
      const r = Math.sqrt(frac) * MAX_RADIUS;
      const theta = idx * GOLDEN_ANGLE;
      const x = CENTER + r * Math.cos(theta);
      const y = CENTER + r * Math.sin(theta);

const circle = document.createElementNS(svgNS, "circle");
      circle.setAttribute("cx", x);
      circle.setAttribute("cy", y);
      circle.setAttribute("r", DOT_RADIUS);
      circle.setAttribute("fill", "#fff");
      circle.setAttribute("opacity", "0.6");
      svg.appendChild(circle);

// radius pulse
      const animR = document.createElementNS(svgNS, "animate");
      animR.setAttribute("attributeName", "r");
      animR.setAttribute(
        "values",
        `${DOT_RADIUS * 0.5};${DOT_RADIUS * 1.5};${DOT_RADIUS * 0.5}`
      );
      animR.setAttribute("dur", `${DURATION}s`);
      animR.setAttribute("begin", `${frac * DURATION}s`);
      animR.setAttribute("repeatCount", "indefinite");
      animR.setAttribute("calcMode", "spline");
      animR.setAttribute("keySplines", "0.4 0 0.6 1;0.4 0 0.6 1");
      circle.appendChild(animR);

// opacity pulse
      const animO = document.createElementNS(svgNS, "animate");
      animO.setAttribute("attributeName", "opacity");
      animO.setAttribute("values", "0.3;1;0.3");
      animO.setAttribute("dur", `${DURATION}s`);
      animO.setAttribute("begin", `${frac * DURATION}s`);
      animO.setAttribute("repeatCount", "indefinite");
      animO.setAttribute("calcMode", "spline");
      animO.setAttribute("keySplines", "0.4 0 0.6 1;0.4 0 0.6 1");
      circle.appendChild(animO);
    }
  }

// Add corner decorations to all animation containers
  function addCornerDecorations() {
    document.querySelectorAll(".animation-container").forEach((container) => {
      // Create corner SVG elements
      const corners = ["top-left", "top-right", "bottom-left", "bottom-right"];

corners.forEach((position) => {
        const corner = document.createElement("div");
        corner.className = `corner ${position}`;

// Use the plus symbol SVG
        const svg = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "svg"
        );
        svg.setAttribute("width", "16");
        svg.setAttribute("height", "16");
        svg.setAttribute("viewBox", "0 0 512 512");
        svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");

// Create plus symbol polygon
        const polygon = document.createElementNS(
          "http://www.w3.org/2000/svg",
          "polygon"
        );
        polygon.setAttribute(
          "points",
          "448,224 288,224 288,64 224,64 224,224 64,224 64,288 224,288 224,448 288,448 288,288 448,288"
        );
        polygon.setAttribute("fill", "currentColor");

svg.appendChild(polygon);
        corner.appendChild(svg);
        container.appendChild(corner);
      });
    });
  }

window.addEventListener("load", () => {
    setupPulsatingCircles();
    setupRotatingCircles();
    setupSequentialRings();
    setupConcentricRotations();
    setupCircularWaves();
    setupExpandingLines();
    setupBreathingGrid();
    setupRippleEffect();
    setupFibonacciSpiral();
    setupHalftoneGradient();
    setupSilverSpiral();
    setupFibonacciConcentric();
    addCornerDecorations(); // Add the corner decorations
  });
})();

CSS Circle Animation Collection

Recommended