<div class="shapes-1"></div>
<div class="shapes-2"></div>
<div class="shapes-3"></div>
<div class="shapes-4"></div>
<div class="shapes-5"></div>
<div class="shapes-6"></div>
<div class="shapes-7"></div>
<div class="shapes-8"></div>
<div class="shapes-9"></div>
<div class="shapes-10"></div>
.shapes-1 {
  --c:linear-gradient(orange 0 0);
  background: 
    var(--c) 0 0,
    var(--c) 0 50%,
    var(--c) 0 100%,
    var(--c) 50% 0,
    var(--c) 50% 50%,
    var(--c) 50% 100%,
    var(--c) 100% 0,
    var(--c) 100% 50%,
    var(--c) 100% 100%;
  background-size: 16px 16px;
  background-repeat: no-repeat;
  animation: sh1 .5s infinite alternate;
}

@keyframes sh1 {
  0%,20%  {width:45px;height: 45px}
  90%,100%{width:65px;height: 65px}
}

.shapes-2 {
  --c:linear-gradient(orange 0 0);
  background: 
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c),
    var(--c);
  background-size: 16px 16px;
  background-repeat: no-repeat;
  animation: 
    sh2-1 1s infinite,
    sh2-2 1s infinite;
}

@keyframes sh2-1 {
  0%,100% {width:45px;height: 45px}
  35%,65% {width:65px;height: 65px}
}

@keyframes sh2-2 {
  0%,40%  {background-position: 0 0,0 50%, 0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,  50% 50% }
  60%,100%{background-position: 0 50%, 0 100%,50% 100%,100% 100%,100% 50%,100% 0,50% 0,0 0,  50% 50% }
}


.shapes-3 {
  height: 45px;
  --c:linear-gradient(#514b82 0 0);
  background: 
    var(--c) left,
    var(--c) center,
    var(--c) right;
  background-size: 16px 100%;
  background-repeat: no-repeat;
  animation: 
    sh3-1 1.5s infinite,
    sh3-2 1.5s infinite;
}

@keyframes sh3-1 {
  0%,100% {width:45px}
  35%,65% {width:65px}
}

@keyframes sh3-2 {
  0%,40%  {transform: rotate(0) }
  60%,100%{transform: rotate(90deg) }
}


.shapes-4 {
  height: 60px;
  width: 60px;
  --c:linear-gradient(#514b82 0 0);
  background: 
    var(--c),var(--c),
    var(--c),var(--c),
    var(--c),var(--c);
  background-repeat: no-repeat;
  animation: 
    sh4-1 2s infinite alternate,
    sh4-2 2s infinite alternate;
}

@keyframes sh4-1 {
  0%,20%   {background-size:20px 20px}
  40%,60%  {background-size:100% 20px}
  80%,100% {background-size:20px 20px}
}

@keyframes sh4-2 {
  0%,40%  {background-position: 0   0,100% 0, 50% 50%, 50% 50%, 0   100%,100% 100%}
  60%,100%{background-position: 50% 0,50%  0, 0   50%,100% 50%, 50% 100%,50%  100%}
}


.shapes-5 {
  width:50px;
  height: 50px;
  display: grid;
}
.shapes-5:before,
.shapes-5:after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: #f03355;
  -webkit-mask:repeating-linear-gradient(#000 0 5px,#0000 0 10px);
  animation: sh5 1.5s infinite;
}
.shapes-5:after {
  -webkit-mask:repeating-linear-gradient(#0000 0 5px,#000 0 10px);
  --s:-1;
}

@keyframes sh5 {
  0%,
  10% {transform: translate(0) rotate(0)}
  35% {transform: translate(calc(var(--s,1)*50%)) rotate(0)}
  66% {transform: translate(calc(var(--s,1)*50%)) rotate(calc(var(--s,1)*180deg))}
  90%,
  100% {transform: translate(0) rotate(calc(var(--s,1)*180deg))}
}

.shapes-6 {
  width:50px;
  height: 50px;
  display: grid;
}
.shapes-6:before,
.shapes-6:after {
  content: "";
  grid-area: 1/1;
  border-radius: 50%;
  background: #f03355;
  -webkit-mask:repeating-linear-gradient(#000 0 10px,#0000 0 20px);
}
.shapes-6:after {
  -webkit-mask:repeating-linear-gradient(#0000 0 10px,#000 0 20px);
  animation: sh6 1.5s infinite;
}

@keyframes sh6 {
  0%,
  10%  {transform: rotate(0)      translate(0)}
  35%  {transform: rotate(0)      translate(100%)}
  66%  {transform: rotate(180deg) translate(100%)}
  90%,
  100% {transform: rotate(180deg) translate(0) }
}

.shapes-7 {
  width:60px;
  aspect-ratio: 1.154;
  color: #25b09b;
  --c1:conic-gradient(from 149deg at top   ,#0000 ,currentColor 2deg 59deg,#0000 61deg);
  --c2:conic-gradient(from -31deg at bottom,#0000 ,currentColor 1deg 61deg,#0000 63deg);
  background:
    var(--c1) top,
    var(--c1) bottom right,
    var(--c2) bottom,
    var(--c1) bottom left;
  background-size: 50% 50%;
  background-repeat: no-repeat;
  animation: sh7 1s infinite;
}

@keyframes sh7 {
  80%,100%{background-position: bottom right,bottom left,bottom,top}
}


.shapes-8 {
  width: 60px;
  aspect-ratio: 1.154;
  color:#25b09b;
  display: grid;
  animation: sp8-0 6s infinite linear;
}

.shapes-8:before,
.shapes-8:after {
  content: "";
  grid-area: 1/1;
}
.shapes-8:before {
  clip-path: polygon(25% 0,75% 0,100% 50%,75% 100%,25% 100%,0 50%);
  background: conic-gradient(from -30deg,#0000 60deg,currentColor 0);
}
.shapes-8:after {
  background: conic-gradient(from -30deg,currentColor 60deg,#0000 0);
  animation: sp8 0.5s infinite alternate;
}

@keyframes sp8-0 {
  0%,16.66%     {transform: rotate(0deg)}
  16.67%,33.33% {transform: rotate(60deg)}
  33.34%,50%    {transform: rotate(120deg)}
  50.1%,66.66%  {transform: rotate(180deg)}
  66.67%,83.33% {transform: rotate(240deg)}
  83.34%,100%   {transform: rotate(300deg)}
}

@keyframes sp8 {
  100%  {transform: translateY(-20px)}
}

.shapes-9 {
  width:50px;
  height: 50px;
  color: #398EB6;
  background: currentColor;
  border-radius: 50%;
  position: relative;
}
.shapes-9:before {
  content: "";
  position: absolute;
  background:
    radial-gradient(farthest-side at bottom right,#0000 94%,currentColor 96%) 0    0   ,
    radial-gradient(farthest-side at bottom left ,#0000 94%,currentColor 96%) 100% 0   ,
    radial-gradient(farthest-side at top    left ,#0000 94%,currentColor 96%) 100% 100%,
    radial-gradient(farthest-side at top    right,#0000 94%,currentColor 96%) 0    100%;
  background-size: 25px 25px;
  background-repeat: no-repeat;
  animation: 
    sh9-1 1s infinite,
    sh9-2 1s infinite;
}

@keyframes sh9-1 {
  0%,10%,90%,100% {inset:0}
  40%,60% {inset:-10px}
}

@keyframes sh9-2 {
  0%,40%  {transform: rotate(0)}
  60%,100%{transform: rotate(90deg)}
}



.shapes-10 {
  width:50px;
  height: 50px;
  color: #398EB6;
  position: relative;
  animation: sh10 .5s infinite alternate;
}
.shapes-10:before,
.shapes-10:after {
  content: "";
  position: absolute;
  inset:0;
  background-size: 25px 25px;
  background-position: 0 0,100% 0,100% 100%,0 100%;
  background-repeat: no-repeat;
}
.shapes-10:before {
  background-image:
    radial-gradient(farthest-side at top    left ,currentColor 96%,#0000),
    radial-gradient(farthest-side at top    right,currentColor 96%,#0000),
    radial-gradient(farthest-side at bottom right,currentColor 96%,#0000),
    radial-gradient(farthest-side at bottom left ,currentColor 96%,#0000);
  animation: sh10-1 1s infinite;
}

.shapes-10:after {
  background-image: 
    radial-gradient(farthest-side at top    left ,#0000 94%,currentColor 96%),
    radial-gradient(farthest-side at top    right,#0000 94%,currentColor 96%),
    radial-gradient(farthest-side at bottom right,#0000 94%,currentColor 96%),
    radial-gradient(farthest-side at bottom left ,#0000 94%,currentColor 96%);
  animation: sh10-2 1s infinite;
}

@keyframes sh10-1 {
  0%,10%,90%,100% {inset:0}
  40%,60% {inset:-10px}
}

@keyframes sh10-2 {
  0%,40%  {transform: rotate(0)}
  60%,100%{transform: rotate(90deg)}
}


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

* {
  box-sizing: border-box;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.