Анимированная иконка для уника (не актуально)

Делаем анимированную svg-иконку для вашего уника.
Пример:

Код иконки:

код 1

<svg x="0px" y="0px" width="150px" height="150px" viewBox="0 0 150 150" fill="rgb(153, 3, 2)" stroke="rgb(153, 3, 3)">
<g>
<path d="M102,89.43c0.3,0,0.6-0.01,0.9-0.03c-2.99,5.78-7.72,10.51-13.5,13.5c0.02-0.3,0.03-0.6,0.03-0.9 c0-7.97-6.46-14.43-14.43-14.43S60.57,94.03,60.57,102c0,0.3,0.01,0.6,0.03,0.9c-5.78-2.99-10.51-7.72-13.5-13.5 c0.3,0.02,0.6,0.03,0.9,0.03c7.97,0,14.43-6.46,14.43-14.43c0-7.97-6.46-14.43-14.43-14.43c-0.3,0-0.6,0.01-0.9,0.03 c2.99-5.78,7.72-10.51,13.5-13.5c-0.02,0.3-0.03,0.6-0.03,0.9c0,7.97,6.46,14.43,14.43,14.43S89.43,55.97,89.43,48 c0-0.3-0.01-0.6-0.03-0.9c5.78,2.99,10.51,7.72,13.5,13.5c-0.3-0.02-0.6-0.03-0.9-0.03c-7.97,0-14.43,6.46-14.43,14.43 C87.57,82.97,94.03,89.43,102,89.43z" stroke="rgb(0, 0, 0)"></path>
<path stroke-miterlimit="10" d="M89.4,47.1c-0.46-7.55-6.73-13.53-14.4-13.53 S61.06,39.55,60.6,47.1c-0.02,0.3-0.03,0.6-0.03,0.9c0,7.97,6.46,14.43,14.43,14.43S89.43,55.97,89.43,48 C89.43,47.7,89.42,47.4,89.4,47.1z" stroke="rgb(0, 0, 0)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1s" values="0,-20;0,0;0,-20;" repeatCount="indefinite"></animateTransform>
</path>
<path stroke-miterlimit="10" d="M48,60.57c-0.3,0-0.6,0.01-0.9,0.03 c-7.55,0.46-13.53,6.73-13.53,14.4c0,7.67,5.98,13.94,13.53,14.4c0.3,0.02,0.6,0.03,0.9,0.03c7.97,0,14.43-6.46,14.43-14.43 C62.43,67.03,55.97,60.57,48,60.57z" stroke="rgb(0, 0, 0)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1s" values="-20,0;0,0;-20,0;" repeatCount="indefinite"></animateTransform>
</path>
<path stroke-miterlimit="10" d="M75,87.57c-7.97,0-14.43,6.46-14.43,14.43c0,0.3,0.01,0.6,0.03,0.9 c0.46,7.55,6.73,13.53,14.4,13.53s13.94-5.98,14.4-13.53c0.02-0.3,0.03-0.6,0.03-0.9C89.43,94.03,82.97,87.57,75,87.57z" stroke="rgb(0, 0, 0)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1s" values="0,20;0,0;0,20;" repeatCount="indefinite"></animateTransform>
</path>
<path stroke-miterlimit="10" d="M102.9,60.6c-0.3-0.02-0.6-0.03-0.9-0.03 c-7.97,0-14.43,6.46-14.43,14.43c0,7.97,6.46,14.43,14.43,14.43c0.3,0,0.6-0.01,0.9-0.03c7.55-0.46,13.53-6.73,13.53-14.4 C116.43,67.33,110.45,61.06,102.9,60.6z" stroke="rgb(0, 0, 0)">
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1s" values="20,0;0,0;20,0;" repeatCount="indefinite"></animateTransform>
</path>
<animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" repeatCount="indefinite"></animateTransform>
</g>
</svg>

Код

<svg x="0px" y="0px" width="150px" height="150px" viewBox="0 0 150 150" fill="rgb(153, 3, 2)" stroke="rgb(153, 3, 3)">

  <g>

    <path d="M102,89.43c0.3,0,0.6-0.01,0.9-0.03c-2.99,5.78-7.72,10.51-13.5,13.5c0.02-0.3,0.03-0.6,0.03-0.9  c0-7.97-6.46-14.43-14.43-14.43S60.57,94.03,60.57,102c0,0.3,0.01,0.6,0.03,0.9c-5.78-2.99-10.51-7.72-13.5-13.5  c0.3,0.02,0.6,0.03,0.9,0.03c7.97,0,14.43-6.46,14.43-14.43c0-7.97-6.46-14.43-14.43-14.43c-0.3,0-0.6,0.01-0.9,0.03  c2.99-5.78,7.72-10.51,13.5-13.5c-0.02,0.3-0.03,0.6-0.03,0.9c0,7.97,6.46,14.43,14.43,14.43S89.43,55.97,89.43,48  c0-0.3-0.01-0.6-0.03-0.9c5.78,2.99,10.51,7.72,13.5,13.5c-0.3-0.02-0.6-0.03-0.9-0.03c-7.97,0-14.43,6.46-14.43,14.43  C87.57,82.97,94.03,89.43,102,89.43z" stroke="rgb(0, 0, 0)"></path>

    <path stroke-miterlimit="10" d="M89.4,47.1c-0.46-7.55-6.73-13.53-14.4-13.53  S61.06,39.55,60.6,47.1c-0.02,0.3-0.03,0.6-0.03,0.9c0,7.97,6.46,14.43,14.43,14.43S89.43,55.97,89.43,48  C89.43,47.7,89.42,47.4,89.4,47.1z" stroke="rgb(0, 0, 0)">

      <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1s" values="0,-20;0,0;0,-20;" repeatCount="indefinite"></animateTransform>

    </path>

    <path stroke-miterlimit="10" d="M48,60.57c-0.3,0-0.6,0.01-0.9,0.03  c-7.55,0.46-13.53,6.73-13.53,14.4c0,7.67,5.98,13.94,13.53,14.4c0.3,0.02,0.6,0.03,0.9,0.03c7.97,0,14.43-6.46,14.43-14.43  C62.43,67.03,55.97,60.57,48,60.57z" stroke="rgb(0, 0, 0)">

      <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1s" values="-20,0;0,0;-20,0;" repeatCount="indefinite"></animateTransform>

    </path>

    <path stroke-miterlimit="10" d="M75,87.57c-7.97,0-14.43,6.46-14.43,14.43c0,0.3,0.01,0.6,0.03,0.9  c0.46,7.55,6.73,13.53,14.4,13.53s13.94-5.98,14.4-13.53c0.02-0.3,0.03-0.6,0.03-0.9C89.43,94.03,82.97,87.57,75,87.57z" stroke="rgb(0, 0, 0)">

      <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1s" values="0,20;0,0;0,20;" repeatCount="indefinite"></animateTransform>

    </path>

    <path stroke-miterlimit="10" d="M102.9,60.6c-0.3-0.02-0.6-0.03-0.9-0.03  c-7.97,0-14.43,6.46-14.43,14.43c0,7.97,6.46,14.43,14.43,14.43c0.3,0,0.6-0.01,0.9-0.03c7.55-0.46,13.53-6.73,13.53-14.4  C116.43,67.33,110.45,61.06,102.9,60.6z" stroke="rgb(0, 0, 0)">

      <animateTransform attributeName="transform" attributeType="XML" type="translate" dur="1s" values="20,0;0,0;20,0;" repeatCount="indefinite"></animateTransform>

    </path>

    <animateTransform attributeName="transform" attributeType="XML" type="rotate" dur="1s" repeatCount="indefinite"></animateTransform>

  </g>

</svg>

Пример второй иконки

код 2

<svg viewBox="0 0 64 64" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)">
<defs>
<linearGradient gradientUnits="userSpaceOnUse" y2="47.2" x2="40.78" y1="16.8" x1="23.22">
<stop stop-color="#fcd966" offset="0"></stop>
<stop stop-color="#fcd966" offset="0.45"></stop>
<stop stop-color="#fccd34" offset="1"></stop>
<animateTransform repeatCount="indefinite" dur="18s" values="0 32 32; 360 32 32" type="rotate" attributeName="gradientTransform"></animateTransform>
</linearGradient>
</defs>
<path stroke-width="0.5" stroke-linejoin="round" stroke-linecap="round" stroke="rgb(235, 235, 255)" d="M33,23l9.06-4.25a2.39,2.39,0,0,1,3.18,3.18L41,31a2.42,2.42,0,0,0,0,2l4.25,9.06a2.39,2.39,0,0,1-3.18,3.18L33,41a2.42,2.42,0,0,0-2,0l-9.06,4.25a2.39,2.39,0,0,1-3.18-3.18L23,33a2.42,2.42,0,0,0,0-2l-4.25-9.06a2.39,2.39,0,0,1,3.18-3.18L31,23A2.42,2.42,0,0,0,33,23Z">
<animateTransform repeatCount="indefinite" dur="1s" values="360 32 32; 0 32 32" type="rotate" attributeName="transform"></animateTransform>
</path>
</svg>

Код

<svg viewBox="0 0 64 64" fill="rgb(0, 0, 0)" stroke="rgb(0, 0, 0)">

  <defs>

    <linearGradient gradientUnits="userSpaceOnUse" y2="47.2" x2="40.78" y1="16.8" x1="23.22">

      <stop stop-color="#fcd966" offset="0"></stop>

      <stop stop-color="#fcd966" offset="0.45"></stop>

      <stop stop-color="#fccd34" offset="1"></stop>

      <animateTransform repeatCount="indefinite" dur="18s" values="0 32 32; 360 32 32" type="rotate" attributeName="gradientTransform"></animateTransform>

    </linearGradient>

  </defs>

  <path stroke-width="0.5" stroke-linejoin="round" stroke-linecap="round" stroke="rgb(235, 235, 255)" d="M33,23l9.06-4.25a2.39,2.39,0,0,1,3.18,3.18L41,31a2.42,2.42,0,0,0,0,2l4.25,9.06a2.39,2.39,0,0,1-3.18,3.18L33,41a2.42,2.42,0,0,0-2,0l-9.06,4.25a2.39,2.39,0,0,1-3.18-3.18L23,33a2.42,2.42,0,0,0,0-2l-4.25-9.06a2.39,2.39,0,0,1,3.18-3.18L31,23A2.42,2.42,0,0,0,33,23Z">

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

  </path>

</svg>

Пример третьей иконки

код

<svg viewBox="0 0 55.1 60" y="0px" x="0px" fill="rgb(52, 195, 242)">
<g>
<g>
<path d="M20.7,46.4c0,1.7-1.4,3.1-3.1,3.1s-3.1-1.4-3.1-3.1c0-1.7,3.1-7.8,3.1-7.8 S20.7,44.7,20.7,46.4z"></path>
<path d="M31.4,46.4c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,3.1-7.8,3.1-7.8 S31.4,44.7,31.4,46.4z"></path>
<path d="M41.3,46.4c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,3.1-7.8,3.1-7.8 S41.3,44.7,41.3,46.4z"></path>
<animateTransform values="0 0;0 10" type="translate" repeatCount="indefinite" keyTimes="0;1" dur="0.5s" attributeType="XML" attributeName="transform">
</animateTransform>
</g>
<g>
<path d="M47.2,34.5H7.9c-4.3,0-7.9-3.5-7.9-7.9l0,0c0-4.3,3.5-7.9,7.9-7.9h39.4c4.3,0,7.9,3.5,7.9,7.9 v0C55.1,30.9,51.6,34.5,47.2,34.5z"></path>
<circle r="9.3" cy="17.3" cx="17.4"></circle>
<circle r="15.6" cy="15.6" cx="34.5"></circle>
</g>
</g>
</svg>

Код

<svg viewBox="0 0 55.1 60" y="0px" x="0px" fill="rgb(52, 195, 242)">

  <g>

    <g>

      <path d="M20.7,46.4c0,1.7-1.4,3.1-3.1,3.1s-3.1-1.4-3.1-3.1c0-1.7,3.1-7.8,3.1-7.8 S20.7,44.7,20.7,46.4z"></path>

      <path d="M31.4,46.4c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,3.1-7.8,3.1-7.8 S31.4,44.7,31.4,46.4z"></path>

      <path d="M41.3,46.4c0,1.7-1.4,3.1-3.1,3.1c-1.7,0-3.1-1.4-3.1-3.1c0-1.7,3.1-7.8,3.1-7.8 S41.3,44.7,41.3,46.4z"></path>

      <animateTransform values="0 0;0 10" type="translate" repeatCount="indefinite" keyTimes="0;1" dur="0.5s" attributeType="XML" attributeName="transform">

                </animateTransform>

    </g>

    <g>

      <path d="M47.2,34.5H7.9c-4.3,0-7.9-3.5-7.9-7.9l0,0c0-4.3,3.5-7.9,7.9-7.9h39.4c4.3,0,7.9,3.5,7.9,7.9 v0C55.1,30.9,51.6,34.5,47.2,34.5z"></path>

      <circle r="9.3" cy="17.3" cx="17.4"></circle>

      <circle r="15.6" cy="15.6" cx="34.5"></circle>

    </g>

  </g>

</svg>

Проверить можно тут https://zelenka.guru/account/uniq/test