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

.square-circle-1 {
  width:35px;
  aspect-ratio:1;
  border:3px solid #fff;
  animation:sc1 2s infinite;
}
@keyframes sc1 {
  0%   {border-radius:50% 50% 0   0  }
  25%  {border-radius:0   50% 50% 0  }
  50%  {border-radius:0   0   50% 50%}
  75%  {border-radius:50% 0   0   50%}
  100% {border-radius:50% 50% 0   0  }
}

.square-circle-2 {
  display:flex;
  gap:5px;
  animation:sc2-0 1s infinite linear;
}
.square-circle-2:before,
.square-circle-2:after {
  content:"";
  width:35px;
  aspect-ratio:1;
  box-shadow:0 0 0 3px inset #fff;
  animation:sc2-1 1s infinite linear both;
}
.square-circle-2:after {
  animation-direction:reverse;
}
@keyframes sc2-0{
  0% {transform:rotate(0deg)}
  80%,
  100%{transform:rotate(180deg)}
}
@keyframes sc2-1{
  0%,
  20%  {border-radius:0}
  80%,
  100% {border-radius:50%}
}

.square-circle-3 {
  display:flex;
  gap:5px;
}
.square-circle-3:before,
.square-circle-3:after {
  content:"";
  width:35px;
  aspect-ratio:1;
  box-shadow:0 0 0 3px inset #fff;
  animation:2s infinite linear;
  animation-name:sc3-1,sc3-2;
  animation-delay:-1s,0s
}
.square-circle-3:after {
  --s: -1;
}
@keyframes sc3-1 {
  0%   {border-radius:50% 0   0   50%}
  25%  {border-radius:50% 50% 0   0  }
  50%  {border-radius:0   50% 50% 0  }
  75%  {border-radius:0   0   50% 50%}
  100% {border-radius:50% 0   0   50%}
}
@keyframes sc3-2{
  0%   {transform:scaleX(var(--s,1)) rotate(0deg)}
  100% {transform:scaleX(var(--s,1)) rotate(-360deg)}
}

.square-circle-4 {
  height:35px;
  aspect-ratio:1;
  border:3px solid #fff;
  animation:sc4 2s infinite;
}
@keyframes sc4 {
  0%  {aspect-ratio:1;border-radius:50px}
  25% {aspect-ratio:2;border-radius:50px} 
  50% {aspect-ratio:2;border-radius:0}  
  75% {aspect-ratio:1;border-radius:0} 
  100%{aspect-ratio:1;border-radius:50px}
}

.square-circle-5 {
  width:65px;
  aspect-ratio:1;
  position:relative;
}
.square-circle-5:before,
.square-circle-5:after {
  content:"";
  position:absolute;
  border-radius:50px;
  box-shadow:0 0 0 3px inset #fff;
  animation:sc5 2.5s infinite;
}
.square-circle-5:after {
  animation-delay:-1.25s;
  border-radius:0;
}
@keyframes sc5{
  0%    {inset:0    35px 35px 0   }
  12.5% {inset:0    35px 0    0   }
  25%   {inset:35px 35px 0    0   }
  37.5% {inset:35px 0    0    0   }
  50%   {inset:35px 0    0    35px}
  62.5% {inset:0    0    0    35px}
  75%   {inset:0    0    35px 35px}
  87.5% {inset:0    0    35px 0   }
  100%  {inset:0    35px 35px 0   }
}

.square-circle-6,
.square-circle-6:before,
.square-circle-6:after{
  width:35px;
  aspect-ratio:1;
  box-shadow:0 0 0 3px inset #fff;
  position:relative;
  animation:sc6 1.5s infinite 0.5s;
}
.square-circle-6:before,
.square-circle-6:after{
  content:"";
  position:absolute;
  left:calc(100% + 5px);
  animation-delay:1s;
}
.square-circle-6:after{
  left:-40px;
  animation-delay:0s;
}
@keyframes sc6 {
  0%,55%,100%  {border-radius:0  }
  20%,30%      {border-radius:50%}
}

.square-circle-7,
.square-circle-7:before,
.square-circle-7:after{
  width:35px;
  aspect-ratio:1;
  box-shadow:0 0 0 3px inset #fff;
  position:relative;
  animation:1.5s infinite 0.5s;
  animation-name:sc7-1,sc7-2;
}
.square-circle-7:before,
.square-circle-7:after{
  content:"";
  position:absolute;
  left:calc(100% + 5px);
  animation-delay:1s,0s;
}
.square-circle-7:after{
  left:-40px;
  animation-delay:0s,1s;
}
@keyframes sc7-1 {
  0%,55%,100%  {border-top-left-radius:0;  border-bottom-right-radius:0}
  20%,30%      {border-top-left-radius:50%;border-bottom-right-radius:50%}
}
@keyframes sc7-2 {
  0%,55%,100%  {border-bottom-left-radius:0;  border-top-right-radius:0}
  20%,30%      {border-bottom-left-radius:50%;border-top-right-radius:50%}
}

.square-circle-8 {
  width:75px;
  aspect-ratio:1; 
  display:grid;
}
.square-circle-8:before,
.square-circle-8:after {
  content:"";
  grid-area:1/1;
  width:35px;
  aspect-ratio:1;
  box-shadow:0 0 0 3px #fff inset;
  filter: drop-shadow(40px 40px 0 #fff);
  animation:sc8 2s infinite alternate;
}
.square-circle-8:after {
  margin:0 0 0 auto; 
  filter: drop-shadow(-40px 40px 0 #fff);
  animation-delay:-1s;
}
@keyframes sc8 {
  0%,10%   {border-radius:0}
  30%,40%  {border-radius:50% 0}
  60%,70%  {border-radius:50%}
  90%,100% {border-radius:0 50%}
}
.square-circle-9 {
  width:75px;
  aspect-ratio:1;
  --g1:conic-gradient(from  90deg at 2px  2px ,#0000 90deg,#fff 0);
  --g2:conic-gradient(from -90deg at 13px 13px,#0000 90deg,#fff 0);
  background:
    var(--g1),var(--g1),var(--g1),var(--g1),var(--g1),var(--g1),var(--g1),var(--g1),
    var(--g2),var(--g2),var(--g2),var(--g2),var(--g2),var(--g2),var(--g2),var(--g2);
  background-size:15px 15px;
  background-repeat:no-repeat;
  animation:sc9 1s infinite alternate linear;
}
@keyframes sc9 {
  0%,30% {background-position:0 0,50% 0,100% 0,0 50%,100% 50%,0 100%,50% 100%,100% 100%}
  70%,100% {background-position:15% 15%,50% 0,85% 15%,0 50%,100% 50%,15% 85%,50% 100%,85% 85%}
}

.square-circle-10 {
  width:75px;
  aspect-ratio:1;
  --g:radial-gradient(farthest-side ,#0000 calc(95% - 2px),#fff calc(100% - 2px) 98%,#0000 101%);
  background:var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g),var(--g);
  background-size:15px 15px;
  background-repeat:no-repeat;
  animation:sc10 1s infinite alternate linear;
}
@keyframes sc10 {
  0%,30% {background-position:0 0,50% 0,100% 0,0 50%,100% 50%,0 100%,50% 100%,100% 100%}
  70%,100% {background-position:15% 15%,50% 0,85% 15%,0 50%,100% 50%,15% 85%,50% 100%,85% 85%}
}
/**/
body {
  display: grid;
  grid-template-columns: repeat(auto-fit,minmax(250px,1fr));
  grid-auto-rows: 130px;
  place-items:center;
  background:#000;
}

* {
  box-sizing: border-box;
}