CSS Tip

An infinite logos animation

Another classic logos animation?! No! This one is THE real infinite ∞ logos animation.

CSS-only infinite logos animation

<div class="container">
  <img src=""><img src=""><img src=""><img src=""><img src=""><img src="">
  <svg viewBox='-152 -75 304 150'><path id="path" d='M-150 0 C-130 -150 130 150 150 0 C130 -150 -130 150 -150 0 Z'/></svg>
</div>
@property --_w {
  syntax: '<length>';
  inherits: true;
  initial-value: min(100vw,200vh);
}
.container {
  display: grid;
  width: 300px;
  aspect-ratio: 2;
  scale: min(tan(atan2(var(--_w),350px)),3); /* for the responsive part */
}
.container > img {
  grid-area: 1/1;
  width: 35px;
  aspect-ratio: 1;
  translate: 150px 75px;
  offset: url(#path) 0% 0deg;
  animation: x 13s linear infinite;
}
@keyframes x { 
  to {offset-distance: 100%}
}
.container > :nth-of-type(2) {animation-delay:-1s}
.container > :nth-of-type(3) {animation-delay:-2s}
.container > :nth-of-type(4) {animation-delay:-3s}
.container > :nth-of-type(5) {animation-delay:-4s}
.container > :nth-of-type(6) {animation-delay:-5s}

See the Pen Infinite ∞ logos animation by Temani Afif (@t_afif) on CodePen.

More CSS Tips