<div class="circle-spin-2"></div>
<div class="circle-spin-6"></div>
<div class="square-move-2"></div>
<div class="arrow-1-down"></div>
<div class="typing-1"></div>
<div class="circle-pulse-1"></div>
<div class="circle-packman-1"></div>
<div class="square-rotate-1-horizontal"></div>

.circle-spin-2 {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --accent-opacity: 0.25;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.circle-spin-2::before,
.circle-spin-2::after {
  content: "";
  position: absolute;
  inset: 0;
  border-width: var(--stroke-width);
  border-style: solid;
  border-radius: 50%;
  transform: rotate(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite
    circle-spin-2-animation;
}

.circle-spin-2::before {
  border-color: var(--color) var(--color) var(--color) transparent;
  opacity: var(--accent-opacity);
}

.circle-spin-2::after {
  border-color: transparent transparent transparent var(--color);
}

@keyframes circle-spin-2-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.circle-spin-6 {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --accent-opacity: 0.25;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  position: relative;
  width: var(--size);
  height: var(--size);
  animation: var(--animation-timing-function) var(--animation-duration) infinite
    circle-spin-6-animation;
}

.circle-spin-6::before,
.circle-spin-6::after {
  content: "";
  position: absolute;
  background-color: var(--color);
  border-radius: 50%;
}

.circle-spin-6::before {
  inset: 0;
  opacity: var(--accent-opacity);
}

.circle-spin-6::after {
  top: var(--stroke-width);
  left: 50%;
  width: var(--stroke-width);
  height: var(--stroke-width);
  transform: translateX(-50%);
}

@keyframes circle-spin-6-animation {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}
.square-move-2 {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.square-move-2::before,
.square-move-2::after {
  content: "";
  position: absolute;
  width: 50%;
  height: 50%;
  background-color: var(--color);
}

.square-move-2::before {
  top: 0;
  left: 0;
  transform: translate(0%, 0%);
  animation: var(--animation-timing-function) var(--animation-duration) infinite
    square-move-2-animation-before;
}

.square-move-2::after {
  right: 0;
  bottom: 0;
  transform: translate(0%, 0%);
  animation: var(--animation-timing-function) var(--animation-duration) infinite
    square-move-2-animation-after;
}

@keyframes square-move-2-animation-before {
  0% {
    transform: translate(0%, 0%);
  }

  25% {
    transform: translate(100%, 0%);
  }

  50% {
    transform: translate(100%, 100%);
  }

  75% {
    transform: translate(0%, 100%);
  }

  100% {
    transform: translate(0%, 0%);
  }
}

@keyframes square-move-2-animation-after {
  0% {
    transform: translate(0%, 0%);
  }

  25% {
    transform: translate(-100%, 0%);
  }

  50% {
    transform: translate(-100%, -100%);
  }

  75% {
    transform: translate(0%, -100%);
  }

  100% {
    transform: translate(0%, 0%);
  }
}
.arrow-1-down {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: cubic-bezier(0.85, 0, 0.15, 1);
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
  overflow-y: hidden;
}

.arrow-1-down::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color);
  clip-path: polygon(
    0% 50%,
    50% 100%,
    100% 50%,
    75% 50%,
    75% 0%,
    25% 0%,
    25% 50%,
    0% 50%
  );
  transform: translateY(-100%);
  animation: var(--animation-timing-function) var(--animation-duration) infinite
    arrow-1-down-animation;
}

@keyframes arrow-1-down-animation {
  0% {
    transform: translateY(-100%);
  }

  45% {
    transform: translateY(0%);
  }

  55% {
    transform: translateY(0%);
  }

  100% {
    transform: translateY(100%);
  }
}
.typing-1 {
  --size: 24px;
  --stroke-width: calc(var(--size) / 6);
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  position: relative;
  width: var(--size);
  height: var(--size);
  border-bottom: var(--stroke-width) solid var(--color);
}

.typing-1::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: calc(var(--stroke-width) / 2);
  left: 0;
  width: calc(var(--stroke-width) * 1.25);
  background-color: var(--color);
  clip-path: polygon(0% 0%, 100% 0%, 100% 80%, 50% 100%, 0% 80%);
  transform: translateX(0) rotate(10deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite
    typing-1-animation;
}

@keyframes typing-1-animation {
  0% {
    transform: translateX(0) rotate(10deg);
  }

  85% {
    transform: translateX(var(--size)) rotate(10deg);
  }

  100% {
    transform: translateX(0) rotate(10deg);
  }
}
.circle-pulse-1 {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 2s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.circle-pulse-1::before,
.circle-pulse-1::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--color);
  border-radius: 50%;
  opacity: 1;
  transform: scale(0);
  animation: var(--animation-timing-function) var(--animation-duration) infinite
    circle-pulse-1-animation;
}

.circle-pulse-1::after {
  animation-delay: calc(var(--animation-duration) / 2);
}

@keyframes circle-pulse-1-animation {
  0% {
    opacity: 1;
    transform: scale(0);
  }

  100% {
    opacity: 0;
    transform: scale(1);
  }
}
.circle-packman-1 {
  --size: 24px;
  --stroke-width: calc(var(--size) / 2);
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  position: relative;
  width: var(--size);
  height: var(--size);
}

.circle-packman-1::before,
.circle-packman-1::after {
  content: "";
  position: absolute;
  inset: 0;
  border-width: var(--stroke-width);
  border-style: solid;
  border-radius: 50%;
}

.circle-packman-1::before {
  border-color: var(--color) transparent transparent var(--color);
  animation: var(--animation-timing-function) var(--animation-duration) infinite
    circle-packman-1-animation-before;
}

.circle-packman-1::after {
  border-color: transparent transparent var(--color) var(--color);
  animation: var(--animation-timing-function) var(--animation-duration) infinite
    circle-packman-1-animation-after;
}

@keyframes circle-packman-1-animation-before {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(45deg);
  }

  100% {
    transform: rotate(0deg);
  }
}

@keyframes circle-packman-1-animation-after {
  0% {
    transform: rotate(0deg);
  }

  50% {
    transform: rotate(-45deg);
  }

  100% {
    transform: rotate(0deg);
  }
}
.square-rotate-1-horizontal {
  --size: 24px;
  --color: currentColor;
  --animation-timing-function: linear;
  --animation-duration: 1s;
  width: var(--size);
  height: var(--size);
  background-color: var(--color);
  transform: rotateY(0deg);
  animation: var(--animation-timing-function) var(--animation-duration) infinite
    square-rotate-1-horizontal-animation;
}

@keyframes square-rotate-1-horizontal-animation {
  from {
    transform: rotateY(0deg);
  }

  to {
    transform: rotateY(180deg);
  }
}

div {
  margin: auto;
  margin-bottom: 3rem;
}