Анимация иконок (SVG + CSS keyframes)

Про создание иконок напишу в другой раз, а сейчас — про их анимацию. Быстро заанимировать иконки можно прямо в Фигме. С этим отлично помогает smart animate. Я просто отрисовал промежуточные состояния и настроил переходы между ними с минимальной задержкой:

Далее легче всего для меня было перенести анимации в код вручную. Сначала я закинул SVG-файл в редактор кода и прописал классы (clock_orange для svg, clock_orange_01 для одной стрелки часов и clock_orange_02 для другой):

<svg class="clock_orange" width="100%" height="100%" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
  <path  fill-rule="evenodd" clip-rule="evenodd" d="M1 12C1 5.92487 5.92487 1 12 1C18.0751 1 23 5.92487 23 12C23 18.0751 18.0751 23 12 23C5.92487 23 1 18.0751 1 12Z" fill="url(#paint0_linear_3585_14212)"/>
  <g style="mix-blend-mode:soft-light">
  <path class="clock_orange_01" fill-rule="evenodd" clip-rule="evenodd" d="M12 5C12.5523 5 13 5.44772 13 6V12C13 12.5523 12.5523 13 12 13C11.4477 13 11 12.5523 11 12V6C11 5.44772 11.4477 5 12 5Z" fill="white"/>
  </g>
  <g style="mix-blend-mode:soft-light">
  <path class="clock_orange_02" fill-rule="evenodd" clip-rule="evenodd" d="M11.1058 11.5528C11.3528 11.0588 11.9535 10.8586 12.4474 11.1055L16.4474 13.1055C16.9414 13.3525 17.1416 13.9532 16.8946 14.4472C16.6477 14.9412 16.047 15.1414 15.553 14.8944L11.553 12.8944C11.059 12.6474 10.8588 12.0467 11.1058 11.5528Z" fill="white"/>
  </g>
  <defs>
  <linearGradient id="paint0_linear_3585_14212" x1="1" y1="1" x2="20.7313" y2="24.8749" gradientUnits="userSpaceOnUse">
  <stop stop-color="#FFEEE7"/>
  <stop offset="1" stop-color="#FF4E0F"/>
  </linearGradient>
  </defs>
  </svg>

Далее в CSS с помощью keyframes задал поведение для первой стрелки:

.clock_orange:hover .clock_orange_01 {
  animation: 0.9s linear 0s 1 normal forwards running clock_orange_01;
  transform-origin: 1px 7px;
  transform-box: fill-box;
}
@keyframes clock_orange_01 {
  0% {
    transform: rotate(0deg);
  }
  33.33% {
    transform: rotate(120deg);
  }
  66.67% {
    transform: rotate(240deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

И для второй:

.clock_orange:hover .clock_orange_02 {
  animation: 0.9s linear 0s 1 normal forwards running clock_orange_02;
  transform-origin: 1px 1px;
  transform-box: fill-box;
}
@keyframes clock_orange_02 {
  0% {
    transform: rotate(0deg);
  }
  33.33% {
    transform: rotate(10deg);
  }
  66.67% {
    transform: rotate(20deg);
  }
  100% {
    transform: rotate(0deg);
  }
}

Анимации всех 26 иконок можно посмотреть здесь: https://codepen.io/designsergeich/full/OJxPQmR