CodePen Embed - The Dots III

<div class="dots-1"></div>
<div class="dots-2"></div>
<div class="dots-3"></div>
<div class="dots-4"></div>
<div class="dots-5"></div>
<div class="dots-6"></div>
<div class="dots-7"></div>
<div class="dots-8"></div>
<div class="dots-9"></div>
<div class="dots-10"></div>

.dots-1 {
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 19px 0 0 7px, 38px 0 0 3px, 57px 0 0 0;
  transform: translateX(-38px);
  animation: d1 .5s infinite alternate linear;
}

@keyframes d1 {
  50%  {box-shadow: 19px 0 0 3px, 38px 0 0 7px, 57px 0 0 3px}
  100% {box-shadow: 19px 0 0 0  , 38px 0 0 3px, 57px 0 0 7px}
}

.dots-2 {
  width: 17px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: #000;
  display: grid;
  animation: d2-0 2s infinite linear;
}

.dots-2:before,
.dots-2:after {
  content: "";
  grid-area: 1/1;
  margin: 15%;
  border-radius: 50%;
  background: inherit;
  transform: rotate(0deg) translate(150%);
  animation: d2 1s infinite;
}
.dots-2:after {
  animation-delay: -.5s
}

@keyframes d2-0 {
  100% {transform: rotate(1turn)}
}

@keyframes d2 {
  100% {transform: rotate(1turn) translate(150%)}
}

.dots-3 {
  width: 50px;
  height: 28px;
  --_g: no-repeat radial-gradient(farthest-side,currentColor 94%,#0000);
  background:
    var(--_g) 50%  0,
    var(--_g) 100% 0;
  background-size: 12px 12px;
  position: relative;
  animation: d3-0 1.5s linear infinite;
}
.dots-3:before {
  content: "";
  position: absolute;
  height: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  left:0;
  top:0;
  animation: 
    d3-1 1.5s linear infinite,
    d3-2 0.5s cubic-bezier(0,200,.8,200) infinite;
}

@keyframes d3-0 {
  0%,31%  {background-position: 50% 0   ,100% 0}
  33%     {background-position: 50% 100%,100% 0}
  43%,64% {background-position: 50% 0   ,100% 0}
  66%     {background-position: 50% 0   ,100% 100%}
  79%     {background-position: 50% 0   ,100% 0}
  100%    {transform:translateX(calc(-100%/3))}
}

@keyframes d3-1 {
  100% {left:calc(100% + 7px)}
}

@keyframes d3-2 {
  100% {top:-0.1px}
}

.dots-4 {
  width: 88px;
  height: 12px;
  --_g: no-repeat radial-gradient(farthest-side,currentColor 94%,#0000);
  background:
    var(--_g) 25% 0,
    var(--_g) 75% 0;
  background-size: 12px 12px;
  position: relative;
  animation: d4-0 1s linear infinite;
}

.dots-4:before {
  content: "";
  position: absolute;
  height: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  inset: 0;
  margin: auto;
  animation: d4-1 1s cubic-bezier(0.5,300,0.5,-300) infinite;
}

@keyframes d4-0 {
  0%,24%  {background-position: 25% 0,75% 0}
  40%     {background-position: 25% 0,85% 0}
  50%,72% {background-position: 25% 0,75% 0}
  90%     {background-position: 15% 0,75% 0}
  100%    {background-position: 25% 0,75% 0}
}

@keyframes d4-1 {
  100% {transform:translate(0.1px)}
}

.dots-5 {
  width: 50px;
  height: 12px;
  --_g: no-repeat radial-gradient(farthest-side,currentColor 94%,#0000);
  background:
    var(--_g) left,
    var(--_g) right;
  background-size: 12px 12px;
  position: relative;
}

.dots-5:before {
  content: "";
  position: absolute;
  height: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background:currentColor;
  inset:0;
  margin:auto;
  animation: d5-1 1s, d5-2 0.5s;
  animation-timing-function:cubic-bezier(.5,-900,.5,900);
  animation-iteration-count:infinite;
}

@keyframes d5-1 {
  100% {transform:translate(0.12px)}
}

@keyframes d5-2 {
  100% {inset:-0.15px 0 0;}
}


.dots-6 {
  width: 4px;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: 
    19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 0px,
    19px 0     0 5px, 38px 0     0 5px, 57px 0     0 5px,
    19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 0px;
  transform: translateX(-38px);
  animation: d6 2s infinite linear;
}

@keyframes d6 {
  12.5% {box-shadow: 
    19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 5px,
    19px 0     0 5px, 38px 0     0 0px, 57px 0     0 5px,
    19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 0px}
  25%   {box-shadow: 
    19px -19px 0 5px, 38px -19px 0 0px, 57px -19px 0 5px,
    19px 0     0 0px, 38px 0     0 0px, 57px 0     0 0px,
    19px 19px  0 0px, 38px 19px  0 5px, 57px 19px  0 0px}
  50%   {box-shadow: 
    19px -19px 0 5px, 38px -19px 0 5px, 57px -19px 0 0px,
    19px 0     0 0px, 38px 0     0 0px, 57px 0     0 0px,
    19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 5px}
  62.5% {box-shadow: 
    19px -19px 0 0px, 38px -19px 0 0px, 57px -19px 0 0px,
    19px 0     0 5px, 38px 0     0 0px, 57px 0     0 0px,
    19px 19px  0 0px, 38px 19px  0 5px, 57px 19px  0 5px}
  75%   {box-shadow: 
    19px -19px 0 0px, 38px -19px 0 5px, 57px -19px 0 0px,
    19px 0     0 0px, 38px 0     0 0px, 57px 0     0 5px,
    19px 19px  0 0px, 38px 19px  0 0px, 57px 19px  0 5px}
  87.5% {box-shadow: 
    19px -19px 0 0px, 38px -19px 0 5px, 57px -19px 0 0px,
    19px 0     0 0px, 38px 0     0 5px, 57px 0     0 0px,
    19px 19px  0 5px, 38px 19px  0 0px, 57px 19px  0 0px}
}


.dots-7 {
  height: 15px;
  aspect-ratio: 4;
  --_g: no-repeat radial-gradient(farthest-side,currentColor 94%,#0000); 
  background:
    var(--_g) left,
    var(--_g) right;
  background-size: 25% 100%;
  display: grid;
}

.dots-7:before,
.dots-7:after {
  content: "";
  grid-area: 1/1;
  margin: auto;
  height: 100%;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  clip-path: inset(0 0 49%);
  transform-origin: -100% 50%;
  animation: d7 .5s infinite alternate;
}
.dots-7:after {
  --s:-1;
  transform-origin: 200% 50%;
}

@keyframes d7 {
  0%,40% {transform:scaleY(var(--s,1)) rotate(0)}
  100%   {transform:scaleY(var(--s,1)) rotate(calc(var(--s,1)*-90deg))}
}


.dots-8 {
  width: 12px;
  aspect-ratio: 1;
  border-radius: 50%;
  background: currentColor;
  clip-path: inset(-220%);
  animation: d8 2s infinite linear;
}

@keyframes d8 {
  0%  {box-shadow:0 0 0 0   , 40px 0,-40px 0,0 40px,0 -40px}
  10% {box-shadow:0 0 0 0   , 12px 0,-40px 0,0 40px,0 -40px}
  20% {box-shadow:0 0 0 4px , 0px  0,-40px 0,0 40px,0 -40px}
  30% {box-shadow:0 0 0 4px , 0px  0,-12px 0,0 40px,0 -40px}
  40% {box-shadow:0 0 0 8px , 0px  0,  0px 0,0 40px,0 -40px}
  50% {box-shadow:0 0 0 8px , 0px  0,  0px 0,0 12px,0 -40px}
  60% {box-shadow:0 0 0 12px, 0px  0,  0px 0,0  0px,0 -40px}
  70% {box-shadow:0 0 0 12px, 0px  0,  0px 0,0  0px,0 -12px}
  80% {box-shadow:0 0 0 16px, 0px  0,  0px 0,0  0px,0  0px }
  90%,
  100%{box-shadow:0 0 0 0   , 40px 0,-40px 0,0 40px,0 -40px}
}

.dots-9 {
  --s: 15px;
  width: calc(var(--s)*2.33);
  aspect-ratio: 1;
  display: flex;
  justify-content: space-between;
  animation: d9-0 1s infinite;
}
.dots-9::before,
.dots-9::after {
  content: "";
  width: var(--s);
  --_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000);
  background:
    var(--_g) top,
    var(--_g) bottom;
  background-size: 100% var(--s);
  transform-origin: 50% calc(100% - var(--s)/2);
  animation: inherit;
  animation-name: d9-1;
}
.dots-9::after {
  --_s:-1;
}

@keyframes d9-0 {
    100% {transform:translateY(calc(var(--s) - 100%))}
}

@keyframes d9-1 {
    100% {transform:rotate(calc(var(--_s,1)*-180deg))}
}

.dots-10 {
  --s: 15px;
  width: calc(var(--s)*2.33);
  aspect-ratio: 1;
  display: flex;
  justify-content: space-between;
}
.dots-10::before,
.dots-10::after {
  content: "";
  width: var(--s);
  --_g: no-repeat radial-gradient(farthest-side,#000 94%,#0000);
  background:
    var(--_g) top,
    var(--_g) bottom;
  background-size: 100% var(--s);
  transform-origin: 50% calc(100% - var(--s)/2);
  animation: d10 1s infinite;
}
.dots-10::after {
  transform-origin: 50% calc(var(--s)/2);
}

@keyframes d10 {
   70%,100% {transform:rotate(-270deg)}
}

/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
}


* {
  box-sizing: border-box;
}

Run Pen

This Pen is owned by Temani Afif on CodePen.

See more by @t_afif on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.