Animated icons for unique

Видел похожие темы решил тоже закинуть пару штук
Может, пригодятся кому-то :D
(Не ругайте за оформления и качество примера )

Иконка #1​

Пример:

Код:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<circle cx="50" cy="50" r="41" stroke-width="16" stroke="#ff0011" stroke-dasharray="64.40264939859075 64.40264939859075" fill="none" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" dur="0.6097560975609756s" repeatCount="indefinite" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform>
</circle>
<circle cx="50" cy="50" r="24" stroke-width="16" stroke="#ff1b00" stroke-dasharray="37.69911184307752 37.69911184307752" stroke-dashoffset="37.69911184307752" fill="none" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" dur="0.6097560975609756s" repeatCount="indefinite" keyTimes="0;1" values="0 50 50;-360 50 50"></animateTransform>
</circle>
</svg>

HTML

<?xml version="1.0" encoding="utf-8"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">

<circle cx="50" cy="50" r="41" stroke-width="16" stroke="#ff0011" stroke-dasharray="64.40264939859075 64.40264939859075" fill="none" stroke-linecap="round">

  <animateTransform attributeName="transform" type="rotate" dur="0.6097560975609756s" repeatCount="indefinite" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform>

</circle>

<circle cx="50" cy="50" r="24" stroke-width="16" stroke="#ff1b00" stroke-dasharray="37.69911184307752 37.69911184307752" stroke-dashoffset="37.69911184307752" fill="none" stroke-linecap="round">

  <animateTransform attributeName="transform" type="rotate" dur="0.6097560975609756s" repeatCount="indefinite" keyTimes="0;1" values="0 50 50;-360 50 50"></animateTransform>

</circle>

</svg>

Иконка #2​

Пример:

Код:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="207px" height="207px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="translate(50 42)">
<g transform="scale(0.8)">
<g transform="translate(-50 -50)">
<polygon fill="#ff0011" points="72.5 50 50 11 27.5 50 50 50">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 38.5;360 50 38.5" keyTimes="0;1"></animateTransform>
</polygon>
<polygon fill="#ff0000" points="5 89 50 89 27.5 50">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 27.5 77.5;360 27.5 77.5" keyTimes="0;1"></animateTransform>
</polygon>
<polygon fill="#ff0000" points="72.5 50 50 89 95 89">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 72.5 77.5;360 72 77.5" keyTimes="0;1"></animateTransform>
</polygon>
</g>
</g>
</g>
</svg>

HTML

<?xml version="1.0" encoding="utf-8"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="207px" height="207px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">

<g transform="translate(50 42)">

  <g transform="scale(0.8)">

    <g transform="translate(-50 -50)">

      <polygon fill="#ff0011" points="72.5 50 50 11 27.5 50 50 50">

        <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 50 38.5;360 50 38.5" keyTimes="0;1"></animateTransform>

      </polygon>

      <polygon fill="#ff0000" points="5 89 50 89 27.5 50">

        <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 27.5 77.5;360 27.5 77.5" keyTimes="0;1"></animateTransform>

      </polygon>

      <polygon fill="#ff0000" points="72.5 50 50 89 95 89">

        <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" values="0 72.5 77.5;360 72 77.5" keyTimes="0;1"></animateTransform>

      </polygon>

    </g>

  </g>

</g>

</svg>

Иконка #3​

Пример:

Код:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="234px" height="234px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<g transform="translate(50 50)">
<path fill="#ff0000" transform="scale(1)" d="M40.7-34.3c-9.8-9.8-25.6-9.8-35.4,0L0-29l-5.3-5.3c-9.8-9.8-25.6-9.8-35.4,0l0,0c-9.8,9.8-9.8,25.6,0,35.4l5.3,5.3L-23,18.7l23,23l23-23L35.4,6.3L40.7,1C50.4-8.8,50.4-24.6,40.7-34.3z">
<animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="0.9900990099009901s" keyTimes="0;0.05;0.39;0.45;0.6;1" values="0.85;1;0.75;0.9;0.85;0.8" calcMode="spline" keySplines="0.215 0.61,0.355 1;0.215 0.61,0.355 1;0.215 0.61,0.355 1;0.215 0.61,0.355 1;0.215 0.61,0.355 1"></animateTransform>
</path>
</g>
</svg>

HTML

<?xml version="1.0" encoding="utf-8"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="234px" height="234px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">

<g transform="translate(50 50)">

  <path fill="#ff0000" transform="scale(1)" d="M40.7-34.3c-9.8-9.8-25.6-9.8-35.4,0L0-29l-5.3-5.3c-9.8-9.8-25.6-9.8-35.4,0l0,0c-9.8,9.8-9.8,25.6,0,35.4l5.3,5.3L-23,18.7l23,23l23-23L35.4,6.3L40.7,1C50.4-8.8,50.4-24.6,40.7-34.3z">

    <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="0.9900990099009901s" keyTimes="0;0.05;0.39;0.45;0.6;1" values="0.85;1;0.75;0.9;0.85;0.8" calcMode="spline" keySplines="0.215 0.61,0.355 1;0.215 0.61,0.355 1;0.215 0.61,0.355 1;0.215 0.61,0.355 1;0.215 0.61,0.355 1"></animateTransform>

  </path>

</g>

</svg>

Иконка #4​

Пример:

Код:

<?xml version="1.0" encoding="utf-8"?>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">
<path d="M91.6 50A41.6 41.6 0 1 1 15.593448110178215 26.617331481351382 L13.230447378299523 13.23044737829953 L26.617331481351354 15.593448110178237 A41.6 41.6 0 0 1 91.6 50" stroke-width="12" stroke="#ff0000" fill="none"></path>
<circle cx="50" cy="50" r="26" stroke-width="12" stroke="#ff0000" stroke-dasharray="40.840704496667314 40.840704496667314" fill="none" stroke-linecap="round">
<animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform>
</circle>
</svg>

HTML

<?xml version="1.0" encoding="utf-8"?>

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="margin: auto; background: none; display: block; shape-rendering: auto;" width="200px" height="200px" viewBox="0 0 100 100" preserveAspectRatio="xMidYMid">

<path d="M91.6 50A41.6 41.6 0 1 1 15.593448110178215 26.617331481351382 L13.230447378299523 13.23044737829953 L26.617331481351354 15.593448110178237 A41.6 41.6 0 0 1 91.6 50" stroke-width="12" stroke="#ff0000" fill="none"></path>

<circle cx="50" cy="50" r="26" stroke-width="12" stroke="#ff0000" stroke-dasharray="40.840704496667314 40.840704496667314" fill="none" stroke-linecap="round">

  <animateTransform attributeName="transform" type="rotate" repeatCount="indefinite" dur="1s" keyTimes="0;1" values="0 50 50;360 50 50"></animateTransform>

</circle>

</svg>

В дальнейшем буду пополнять иконки ​