<ul>
  <li>
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32" fill="#6C43E8" class="nc-loop-squares">
      <rect height="15" width="15" x="16" y="1"></rect>
      <rect height="15" width="15" x="16" y="16"></rect>
      <rect height="15" width="15" x="1" y="1"></rect>
      <rect height="15" width="15" x="1" y="16"></rect>
    </svg>
  </li>
  <li>
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32" fill="#6C43E8"  class="nc-loop-dots">
      <circle cx="16" cy="6" r="5"></circle>
      <circle cx="26" cy="16" r="5"></circle>
      <circle cx="16" cy="26" r="5"></circle>
      <circle cx="6" cy="16" r="5"></circle>
    </svg>
  </li>
  
  <li>
    <svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32" class="nc-loop-gooey">
      <defs>
        <filter id="nc-loop-gooey-32-filter">
          <feGaussianBlur in="SourceGraphic" result="blur" stdDeviation="1"></feGaussianBlur>
          <feColorMatrix in="blur" mode="matrix" result="goo" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9"></feColorMatrix>
          <feComposite in="SourceGraphic" in2="goo" operator="atop"></feComposite>
        </filter>
      </defs>
      <g class="nc-loop-gooey-32-icon-f" filter="url(#nc-loop-gooey-32-filter)">
        <circle cx="5" cy="16" fill="#6C43E8" r="4"></circle>
        <circle cx="5" cy="16" fill="#6C43E8" r="4"></circle>
        <circle cx="16" cy="16" fill="#6C43E8" r="4"></circle>
        <circle cx="27" cy="16" fill="#6C43E8" r="4"></circle>
      </g>
    </svg>
  </li>

/* squares animation */
.nc-loop-squares > * {
  transform-origin:50% 50%;
  animation: nc-loop-squares-anim 1.3s infinite;
}
.nc-loop-squares > :nth-child(2) {
  animation-delay:.1s
}
.nc-loop-squares > :nth-child(3) {
  animation-delay:.2s
}
.nc-loop-squares > :nth-child(4) {
  animation-delay:.3s
}

@keyframes nc-loop-squares-anim {
  0%, 80%, 100% {
    opacity:1;
    transform:scale(1)
  }
  50% { 
    opacity:0;
    transform:scale(0)
  }
}

/* dots animation */
.nc-loop-dots * {
  animation: nc-loop-dots-anim 1s infinite
}
.nc-loop-dots :nth-child(1) {
  transform-origin: 16px 6px
}
.nc-loop-dots :nth-child(2) {
  transform-origin: 26px 16px;
  animation-delay:.1s;
}
.nc-loop-dots :nth-child(3) {
  transform-origin:16px 26px;
  animation-delay:.2s;
}
.nc-loop-dots :nth-child(4) {
  transform-origin:6px 16px;
  animation-delay:.3s;
}

@keyframes nc-loop-dots-anim{
  0%, 100% {
    opacity:1;
    transform:scale(1);
  }
  50% {
    opacity:.4;
    transform:scale(.7);
  }
}

/* gooey animation */
.nc-loop-gooey :first-child {
  transform-origin:5px 16px;
  animation: nc-loop-gooey-anim 1s infinite;
}

@keyframes nc-loop-gooey-anim {
  from {transform:translateX(0)}
  to {transform:translateX(22px)}
}

ul {
  display: flex;
  justify-content: center;
  gap: 80px;
  list-style: none;
  padding: 0;
  margin-top: 50px;
}