Загрузка...

[Unique] Icon next to nickname - full customization

Thread in Forum Guides created by AnimeHeHe Nov 7, 2025. 347 views

  1. AnimeHeHe
    AnimeHeHe Topic starter Nov 7, 2025 https://lolz.live/threads/7680775/
    Who's liked this post (6)
    Предисловие

    Всем привет, это Шамико, поздоровайтесь. Сегодня она будет использоваться в качестве примера для манипуляций с иконками

    [IMG]    ​
    Code
    <!-- AnimeHeHe Edition -->
    
<svg>
    
  <defs>
    
    <radialGradient id="gradientLayer3" cx="50%" cy="10%" r="50%">
    
      <stop offset="50%" stop-color="#d074cd"/>
    
      <stop offset="100%" stop-color="#D1615B"/>
    
    </radialGradient>
    
  </defs>
    

    
<g id="Слой_2">
    
    <path fill="#D55F5B" d="M1.8,5.5c-0.3,0.3-0.9,3.7-0.6,4.7s1,2.7,1,3.4s-0.1,1.5-0.6,2.2s4.5,2.8,7.3,2.8s3.9-1,4.1-1.4
    
        s0.2-1.4,0.1-1.6c-0.1-0.3,0.8-0.1,1.1-0.3s-0.3,0-0.7-0.3C13.1,14.7,3.6,4.1,1.8,5.5z"/>
    
    <path fill="#FFF3D6" d="M5.1,14.4c0.3,0.2,1.9,1.3,3.8,1.3c1.9,0,2.3,0.1,3.3-0.4s1.4-1,1.5-1.3c0.1-0.3,0.3-5.2,0.4-5.6
    
        c0.1-0.4-0.6-5.9-6.1-3.9S4,13.8,5.1,14.4z"/>
    
    <path fill="#F4A39F" d="M9.5,14.9c0.7,0,1.3-0.1,1.3-0.4c0.1-0.3,0.1-0.8-0.2-1c-0.2-0.2-0.8-0.2-1.2-0.2c-0.4,0-1,0.1-1,0.3
    
        c-0.1,0.2,0.1,1.1,0.5,1.2C9.2,14.9,9.3,14.9,9.5,14.9z"/>
    
    <ellipse fill="#F7BDBB" cx="6.4" cy="13" rx="0.7" ry="0.5"/>
    
    <ellipse fill="#F7BDBB" cx="13.1" cy="12.9" rx="0.7" ry="0.4"/>
    
    <path fill="#602231" d="M7.6,10.8c0,0.9-0.3,1.6-0.8,1.6s-0.9-0.7-0.9-1.6c0-0.9,0.3-1.5,0.8-1.5S7.6,10,7.6,10.8z"/>
    
    <path fill="#602231" d="M12.8,10.9c0,0.8-0.5,1.5-0.8,1.5c-0.4,0-0.7-0.6-0.7-1.5s0.6-1.5,0.9-1.5S12.8,10.1,12.8,10.9z"/>
    
    <path fill="#D25F25" d="M7.4,11.7c0,0.4,0.2-0.8,0.1-0.9c-0.1,0-0.4-0.2-0.7-0.2s-0.9,0.4-0.9,0.5S6.1,12,6.2,12
    
        c0.1,0,0.4-0.4,0.6-0.4C7.1,11.6,7.4,11.6,7.4,11.7z"/>
    
    <path fill="#D25F25" d="M12,10.6c0.2,0,0.7,0.2,0.8,0.3c0,0.1-0.1,0.9-0.1,0.9c0,0-0.3-0.5-0.5-0.5s-0.6,0.6-0.7,0.6
    
        s-0.2-1-0.1-1.1C11.4,10.8,11.7,10.6,12,10.6z"/>
    
    <path fill="#FDF9F5" d="M6.8,12.4c0.3,0,0.6-0.6,0.7-0.7s-0.4-0.3-0.7-0.3S6.1,11.9,6.1,12C6.2,12,6.4,12.4,6.8,12.4z"/>
    
    <path fill="#FDF9F5" d="M11.9,12.4c0.5,0.1,0.7-0.4,0.8-0.6s-0.3-0.5-0.5-0.5c-0.2,0-0.8,0.4-0.8,0.6S11.6,12.3,11.9,12.4z"/>
    
    <path fill="#572C25" d="M5.5,11.3c0.1,0.1,0-0.8,0.3-1.1C6,9.9,6.4,9.5,6.9,9.5c0.5,0,0.7,0.4,0.9,0.4s0.4-0.3,0.2-0.5
    
        C8,9.3,7.6,9,7.1,9.1s-1.5,0.6-1.7,1C5.2,10.4,5.1,11,5.5,11.3z"/>
    
    <path fill="#572C25" d="M11.2,10c0,0.1,0.3,0.2,0.5,0c0.2-0.2,0.5-0.5,0.8-0.4c0.3,0.1,0.5,0.1,0.6,0.5c0.2,0.4,0.2,0.6,0.2,0.7
    
        c0,0,0.3-0.3,0.2-0.6S13,9.2,12.7,9.1C12.4,9.1,11.2,9.1,11.2,10z"/>
    
</g>
    

    
<g id="Слой_3">
    
    <path fill="url(#gradientLayer3)" d="M5.7,12.2c0.2,0-1-1.6-1-1.9s0.1-0.5,0.3-0.8c0.2-0.3,0.6-1,0.6-1.2c0-0.2-0.1,1.1-0.3,1.4S6.3,9,6.5,8.3
    
      c0.2-0.7,0.9-1.9,1-2S8,7.6,8.1,7.9s0,1.3,0,1.5s0.5-0.3,0.6-0.6S9,9.7,8.9,10c-0.1,0.3-0.2,0.5-0.3,0.6c-0.1,0.1,0.7-0.1,0.8-0.2
    
      c0.1-0.1,0,0.2,0,0.3c-0.1,0.1,0.8-0.2,1.2-0.9c0.3-0.7,0.7-1.2,0.7-1.4c0-0.2,0.2,0.3,0.2,0.6c-0.1,0.3,0.1-0.1,0.3-0.9
    
      c0.1-0.7,0.2-1.6,0.2-1.8c0-0.1,0.5,0.4,0.9,1.2s1,1.7,1,2.1s-0.2,2.3-0.6,2.6c-0.4,0.3,0.8,0,1.3-0.3c0.5-0.3,0.9-0.9,0.9-1.1
    
      c0-0.1,0.2,0.5,0.1,0.7s0.4-1,0.5-1.5c0.1-0.4,0.1-2.2,0-2.6c-0.1-0.4-1.1-2.4-1.5-2.9c-0.4-0.5-1.5-1.6-2.2-1.9
    
      c-0.7-0.3-2-0.4-2.1-0.4c-0.1,0,0.1-0.3,0.1-0.6S9.5,0.6,8.9,0.4S7.4,0.2,7.2,0.2C7,0.3,7.7,0.7,7.9,1.1s0.3,0.7,0.3,0.7
    
      c-0.1,0-0.6-0.4-0.9-0.5S6.7,1.9,6.5,2c-0.2,0.1-1.6,0.4-2,0.7C4.2,3,2.6,4.3,2.4,4.6C2.3,4.9,2.2,8.7,2.3,9.4
    
      C2.5,10,3,11.1,3.8,11.6C4.6,12.1,5,12.3,5.7,12.2z"/>
    
  </g>
    

    
<g id="Слой_4">
    
    <path fill="#D6B9AF" d="M2.3,4.1C2.5,4.1,3,4.2,3.2,4.9s0.1,2.8-0.1,3.3C2.9,8.6,2.2,9.9,2,10c-0.2,0.1-0.8,0.2-1.1-0.1
    
        S0.1,9.1,0.1,8.3s0-1.7,0.3-2.1c0.3-0.4,0.8-1.2,1.1-1.3s0.4,0.1,0.5,0C2.1,4.7,2,4.2,2.3,4.1z"/>
    
    <path fill="#D6B9AF" d="M14.5,4c0.2-0.1,1,0.4,1.3,1.2c0.3,0.8,0.2,2.3,0.2,2.5c0,0.2-0.1-0.3-0.5-1.1s-1-1.7-1-1.9
    
        C14.3,4.5,14.3,4.1,14.5,4z"/>
    
    <path fill="#6A413D" d="M1.3,5c0,0,0.1-0.1,0.4,0S1.7,5.4,2,5.4c0.1,0,0.4-0.1,0.6-0.1c0.2,0,0.6,0.4,0.6,0.5
    
        c0,0.1-0.3-0.2-0.5-0.2C2.5,5.5,2.2,5.6,2,5.6s0-0.1-0.2-0.3C1.6,5.2,1.2,5.1,1.3,5z"/>
    
    <path fill="#6A413D" d="M0.3,6.5c0,0,1.1,0,1.1,0.1c0.1,0.1,0.1,0.2-0.3,0.1s-0.8-0.1-0.9,0C0.2,6.8,0.2,6.6,0.3,6.5z"/>
    
    <path fill="#6A413D" d="M1.4,7c0-0.1-0.6,0.4-0.7,0.6S0.2,8.5,0.2,8.6c0,0.2,0,0.3,0.1,0.1c0.1-0.2,0.3-0.8,0.4-1s0.4-0.5,0.5-0.5
    
        c0.1,0-0.1,0.4,0.1,0.5C1.5,8,2.1,8.4,2.2,8.4s0.5,0.1,0.6,0c0.1-0.1,0.1-0.2-0.1-0.2S2.1,8.3,2,8.1S1.5,7.7,1.4,7.6
    
        C1.4,7.4,1.4,7,1.4,7z"/>
    
</g>
    
</svg>
    ​

    В данной теме я задаюсь целью рассказать о всех махинациях с иконками, которые возможны на форуме, чтобы опираясь на этот мануал, вы могли тончайшим образом настроить под себя иконку. Если какие-то моменты мной будут упущены, то вы можете расписать их в комментариях, в таком случае я дополню тему, отметив ваш ник

    Главы

    1. Введение
    2. Статика
    2.1. Трансформация
    2.1.1. Поворот
    2.1.2.Перемещение
    2.1.3.Масштабирование
    2.1.4.Скос
    2.2. Прозрачность
    2.3. Заливка/Обводка
    2.4.Макска/Клипинг
    2.5. Паттерны
    2.6. Градиенты
    2.6.1. Линейный
    2.6.2.Радиальный
    3.Анимация
    3.1.Вращение
    3.2. Перемещение
    3.3. Масштабирование
    3.4.Движение по пути
    3.5.Смена цвета
    3.6.Градиент
    3.7. Прозрачность
    4.Итог

    Ведение

    Для начала давайте разберемся с базой, которая необходима, чтобы ориентироваться в коде - СВГ-элементы:

    К примеру
    ⁡<svg>
    ⁡ - это главный элемент всего кода, именно в нем хранится остальная информация

    ⁡<g>
    ⁡ - это группа, которая служит для обьединения других слоев, прям как
    ⁡<svg>
    ⁡ , но в меньшем масштабе

    Или примитивы по типу
    ⁡<path>
    ⁡ - это произвольная фигура, также
    ⁡<circle>
    ⁡ - круг и т.д.

    ⁡<text>
    ⁡ - это текст,
    ⁡<tspan>
    ⁡ - это подгруппа для текста, чтобы делить его на строчки

    Остальные элементы либо не работают на форуме(по крайней мере у меня), либо будут оговорены в отдельных главах

    Теперь понимая, что где находится, вы уже можете целенаправленно видоизменять элементы иконки

    Статика

    Трансформация

    Чтобы видоизменить элемент мы будем использовать атрибут transform, поместить его нужно внутрь интересующего вас элемента, выглядеть оно будет так:

    ⁡<svg transform> </svg>
    ⁡

    Перейдем к конкретным примерам:

    Поворот

    ⁡transform="rotate(angle, x, y)"
    ⁡

    ⁡angle
    ⁡ - это угол поворота, а
    ⁡X, Y
    ⁡ - это точки оси, относительно которых будет совершаться поворот

    давайте повернем Шамико на 15 градусов с точками по умолчанию, для этого я создам общую группу
    ⁡<g>
    ⁡ , которая обьединит все слои, чтобы повернуть все разом
    ​
    Code
    <g transform="rotate(15)">
    
(здесь множество других элементов)
    
</g>
    ​

    Как видим, ее унесло в левый бок, а все из-за того, что по умолчанию ось вращения 0,0, то есть верхний левый угол, давайте это исправим, указав свои координаты
    [IMG]
    ​
    Code
    <g transform="rotate(15, 8, 8)">
    
(здесь множество других элементов)
    
</g>
    ​

    Теперь работает отлично - Шамико повернулась вокруг своей оси
    [IMG]

    Перемещение

    ⁡translate(X, Y)
    ⁡ : тут все очевидно - положительные значения X двигают вправо, Y вниз и наоборот, давайте подвинем Шамико вправо и приподнимем вверх
    ​
    Code
    <g transform="translate(2, -2)">
    
(здесь множество других элементов)
    
</g>
    ​

    Получилось, иконка действительно сместилась
    [IMG]    ​

    Масштабирование​

    ⁡scale(X, Y)
    ⁡ : X - растяжение вдоль, а Y - поперек. Давайте увеличим Шамико в 1.5 раза, тк обе координаты имеют одинаковое значение, то вводим всего 1 число
    ​
    Code
    <g transform="scale(1.5)">
    
(здесь множество других элементов)
    
</g>
    ​

    Она так выросла, что не влезает в окно, теперь сожмем только по оси Y
    [IMG]
    ​
    Code
    <g transform="scale(1, 0.5)">
    
(здесь множество других элементов)
    
</g>
    ​

    Жмыжнуло, тут вы можете заметить проблему - скалирование происходит не от центра, из-за чего ее унесло вверх. У scale нет такой же функции как и у rotate, так что придется комбинировать ее с translate, чтобы поставить в центр. Давайте сразу продемонстрирую, как комбинируются эти атрибуты
    [IMG]
    ​
    Code
    <g transform="scale(1, 0.5) translate(0, 8)">
    
(здесь множество других элементов)
    
</g>
    ​

    Теперь все замечательно, как можете заметить, между атрибутами не нужны никакие разделительные знаки, только пробел и все они должны находиться в кавычках
    [IMG]

    Скос

    Этот атрибут как бы создает перспективу, отодвигая грани изображения, X - нижнюю Y - правую соответственно. Давайте сделаем выглядывающую Шамико
    ​
    Code
    <g transform="skewX(-30)">
    
(здесь множество других элементов)
    
</g>
    ​

    Вот так получилось, можно задаться вопросом - а как двигать верхнюю грань? Просто совместите этот атрибут с translate
    [IMG]

    Прозрачность

    Отмечу, что
    ⁡transform
    ⁡ здесь уже не нужен

    Значение прозрачности варьируется от 0 до 1, давайте сделаем Шамико видимой на 50%
    ​
    <g opacity="0.5">
    (здесь множество других элементов)
    </g>    ​

    Нинзя-Шамико готова
    [IMG]

    Заливка/обводка

    ⁡fill
    ⁡ - это цвет, которым мы окрашиваем фигуру,
    ⁡stroke
    ⁡ - цвет обводки,
    ⁡ stroke-width
    ⁡ - толщина обводки. Давайте зальем Шамико красным цветом с белой обводкой
    ​
    <g fill="red" stroke="white" stroke-width="0.5">
    (здесь множество других элементов)
    </g>    ​

    И тут мы замечаем, что обводка появилась, а цвет остался прежним, а все дело в приоритете стилей, так что придется указывать каждому элементу стиль отдельно, либо же убрать у них цвета вовсе, чтобы приоритет перешел на главный элемент
    [IMG]

    Маска/Клипинг

    В этой части понадобится элемент
    ⁡<defs>
    ⁡ , это своего рода ящик, куда складируются другие элементы для последующего использования. Стоит отметить, что этот атрибут стоит строго сразу после
    ⁡<svg>
    ⁡

    ⁡<clipPath>
    ⁡ - это атрибут, вырезающий конкретную часть и оставляющий лишь ее. Сделаем Шамико круглую рамочку
    ​

    <defs>
    <clipPath id="circleClip">
    <circle cx="8" cy="8" r="6"/>
    </clipPath>
    </defs>
    <g clip-path="url(#circleClip)">
    (здесь множество других элементов)
    </g>
    ​

    Похоже ей тесно, таким образом иконку можно уместить в любую фигуру
    [IMG]

    ⁡<mask>
    ⁡ - это атрибут, работающий, как маска в фотошопе, есть основной элемент, на него можно наложить другой и сделать видимым только пересечение этих элементов или наоборот, только его невидимым или можно сделать его частично прозрачным и т.д. Лучше увидеть - вырежем из Шамико дырку
    ​

    <defs>
    <mask id="holeMask">
    <rect x="0" y="0" width="16" height="16" fill="white"/>
    <circle cx="8" cy="8" r="3" fill="black"/>
    </mask>
    </defs>
    <g mask="url(#holeMask)">
    (здесь множество других элементов)
    </g>
    ​

    Получилось, стоит отметить, что
    ⁡<mask>
    ⁡ требует как указания "видимого" слоя, так и "вырезаемого", а положение слоев определяется их цветом, так область в которой Шамико видна white(видимая), а дырка в ней black(невидимая), причем в зависимости от указанного цвета будем меняться и степень прозрачности
    [IMG]

    Паттерны

    ⁡<pattern>
    ⁡ - это атрибут, позволяющий много кратно дублировать один и тот же обьект, заполняя всю указанную область и тут возникает проблема - у обьединениям множества слоев с разными цветами он не применим, поэтому показу пример на простых фигурах
    ​

    <defs>
    <pattern id="dots" width="4" height="4" patternUnits="userSpaceOnUse">
    <circle cx="2" cy="2" r="1" fill="red"/>
    </pattern>
    </defs>
    <rect x="0" y="0" width="16" height="16" fill="url(#dots)"/>
    ​

    Как видите, это множество красных точек - через
    ⁡ <pattern>
    ⁡ устанавливаем нужный элемент, в данном случае
    ⁡ <circle>
    ⁡ , а
    ⁡<rect>
    ⁡ выступает в роли холста, на котором все отображается. Таким образом можно сделать и полоски и шахматную доску
    [IMG]

    Градиенты

    ⁡<linearGradient>
    ⁡ - линейный градиент

    ⁡<radialGradient>
    ⁡ - градиент от точки

    Линейный

    К сожалению, их тоже нельзя применить сразу по группе элементов, только по конкретным элементам, так что примером будет эллипс
    ​

    <defs>
    <linearGradient id="simpleGrad" x1="0%" y1="0%" x2="100%" y2="0%">>
    <stop offset="0%" stop-color="#ff6b6b"/>
    <stop offset="100%" stop-color="#4ecdc4"/>
    </linearGradient>
    </defs>

    <ellipse cx="8" cy="8" rx="6" ry="4" fill="url(#simpleGrad)"/>
    ​

    Точки x1 y1 определяют начало градиента, а x2 y2 его конец, таким образом можно корректировать его направление. Через
    ⁡ <stop offset>
    ⁡ определяется степень размытия градиента и его цвета
    [IMG]

    Радиальный
    ​

    <defs>
    <radialGradient id="centerGrad" cx="50%" cy="50%" r="50%">
    <stop offset="0%" stop-color="red"/>
    <stop offset="100%" stop-color="blue"/>
    </radialGradient>
    </defs>
    <circle cx="8" cy="8" r="6" fill="url(#centerGrad)"/>
    ​

    Здесь cx и cy определяют точку, в которой находится градиент, а r - его радиус
    [IMG]

    Анимации

    Вращение
    ​
    ​


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

    ​

    Здесь 1 переменная values - это начальная и конечная точки вращения, дальше идут XY - это положение элемента,
    ⁡keyTimes
    ⁡ - временная шкала, она обязана начинаться с 0 и заканчиваться 1, dur - длительность анимации. Так как я применяю анимацию не на конкретный слой, а на весь
    ⁡<svg>
    ⁡ , точки 0 0 являются центром оси
    [IMG]

    Перемещение
    ​
    ​


    <animateTransform

    attributeName="transform"

    type="translate"

    repeatCount="indefinite"

    dur="1s"

    values="0 0; 0 -2; 0 0"

    begin="0s"

    additive="sum"/>

    ​

    Здесь все еще проще - в
    ⁡values
    ⁡ устанавливаем положения XY, где положительные значения двигают вправо+вниз, а отрицательные влево+вверх
    [IMG]

    Масштабирование
    ​
    ​


    <animateTransform attributeName="transform" type="scale" repeatCount="indefinite" dur="2s" values="0;1; 0" begin="0s">

    ​

    В
    ⁡values
    ⁡ указываем нужные размеры, где 0 - это минимум, а 1 - исходный размер
    [IMG]

    Движение по пути
    ​
    <animateMotion path="M3,3 L13,3 L13,13 L3,13 Z" dur="3s" rotate="auto" repeatCount="indefinite"/>

    Разбираемся, как строить маршруты - М - это начальная точка, L - последующая, Z - это конец пути. Rotate бывает как в примере автоматический или auto-reverse тоже самое но с разворотом на 180 градусов или
    ⁡rotate="0"
    ⁡ - отсутствие поворотов
    [IMG]

    Смена цвета
    ​
    <animate attributeName="fill" values="red;blue;green;red" dur="3s" repeatCount="indefinite"/>

    В
    ⁡values
    ⁡ выставляем нужные цвета
    [IMG]

    Градиент
    ​
    <defs>

    <linearGradient id="animGrad">

    <stop offset="0%" stop-color="red">

    <animate attributeName="stop-color" values="red;blue;green;red" dur="2s" repeatCount="indefinite"/>

    </stop>

    <stop offset="100%" stop-color="blue">

    <animate attributeName="stop-color" values="blue;green;red;blue" dur="2s" repeatCount="indefinite"/>

    </stop>

    </linearGradient>

    </defs>

    <path fill="url(#animGrad)" (сам путь) />

    Обьединяем знания про
    ⁡<linearGradient>
    ⁡ и
    ⁡<animate attributeName>
    ⁡ тут ничего нового
    [IMG]

    Прозрачность
    ​
    <animate attributeName="opacity" values="1;0;1" keyTimes="0; 0.5; 1" dur="1s" repeatCount="indefinite"></animate>

    Здесь
    ⁡values
    ⁡ варьируется от 0 до 1, как и в статике
    [IMG]

    Итог

    Используя все возможности функционала, можно сделать что-нибудь интересное и новое, так что экспериментируйте ​
    [IMG]
    [IMG]
    [IMG]​
    ​
     
    Nov 7, 2025 Edited
    1. Британский
      Nov 7, 2025
    2. FL_Jargonium
      Nov 7, 2025
    3. VenZ
      Nov 7, 2025
  2. FL_Jargonium
    FL_Jargonium Nov 7, 2025 Криптообменник —> https://lolz.live/threads/9756616/ 11,790 Nov 25, 2020
    Здравствуйте!!!! Я думал, это анимехехе
     
    Nov 7, 2025
    1. Британский
      Nov 7, 2025
  3. VenZ
    VenZ Nov 7, 2025 https://lolz.live/threads/7680775/ 2,521 Nov 21, 2021
    Осталось насосать на уник
     
    Nov 7, 2025
Loading...