106.9K+Скачать
Перейти к руководству
SVG Animationsавтор supermemoryai

SVG Animations Навык.

Создавайте редактируемые анимации SVG-путей, иконок и иллюстраций.

  • SVG
  • Векторное движение
Скачать OpenDesignОткрыть руководство по использованию
Обзор исходных материалов · svg-animationsSKILL.md
Задача Создавайте редактируемые анимации SVG-путей, иконок и иллюстраций. Результаты Редактируемая SVG-разметка с выбранным механизмом анимации. Перед началом Предоставьте SVG или описание форм, задайте триггер, конечное состояние и способ встраивания. Инлайн-разметка и изображение требуют отдельных проверок взаимодействия, подписей и уменьшения движения.
Редакционное описание · исходные материалы проверены 2026-11-02 · не сгенерированный пример

01 Возможности

Создавайте редактируемые анимации SVG-путей, иконок и иллюстраций

Изучите рисование SVG, движение по пути, морфинг и групповые трансформации с проверками встраивания, конечных состояний и уменьшения движения.

Процесс на основе источникаНе тест выполнения

Принцип работы

svg-animations — практический справочник для векторной анимации, написанной вручную. Он охватывает координаты SVG, фигуры, пути, группы, маски и фильтры, связывая их с CSS- или SMIL-анимацией. Типичные результаты — прорисовка линий, движение объектов по путям, изменяющиеся иконки и анимированные иллюстрации.

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

Ожидаемые результаты

  • Редактируемая SVG-разметка с выбранным механизмом анимации.
  • Анимация векторной иконки, иллюстрации, логотипа или состояния загрузки.
  • Заметки о встраивании и запасном поведении для целевого веб-контекста.
Смотреть пример задания

От задания до проверки

  1. 01
    Задайте систему координат

    Определите viewBox и стройте рисунок из примитивов, путей и групп. Храните повторно используемые маски, градиенты и фильтры в определениях.

  2. 02
    Выберите механизм анимации

    Используйте нужные атрибуты и временную модель для прорисовки, следования пути или морфинга. Измеряйте длины и согласуйте команды путей, а не угадывайте.

  3. 03
    Проверьте контекст встраивания

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

02 Когда использовать

Когда использовать

Предоставьте SVG или описание форм, задайте триггер, конечное состояние и способ встраивания. Инлайн-разметка и изображение требуют отдельных проверок взаимодействия, подписей и уменьшения движения.

Хорошо подходит

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

Ограничения

  • Поведение браузера нужно тестироватьИсточник содержит общие утверждения о совместимости; отдельные возможности CSS-путей и SMIL следует проверять в целевых браузерах.
  • CSS-правила не охватывают все движкиОдного CSS-блока уменьшения движения может быть недостаточно для остановки SMIL-таймлайна. Реальному механизму нужен подходящий запасной вариант.

Что подготовить

  • Векторный рисунок или описание формыПредоставьте SVG либо описание нужных путей и фигур.
  • Поведение движенияУкажите появление, цикл, морфинг или следование пути и его триггер.
  • Цель встраиванияУточните инлайн-SVG или изображение, целевые браузеры и требования доступности.

03 Важные решения

Важные решения

  1. Геометрия остаётся редактируемой

    Пути и группы можно исправить напрямую, а не заменять отрендеренный клип.

  2. Измеренные длины прорисовки

    Реальная длина пути предотвращает неполный штрих или преждевременное появление.

  3. Разделённые трансформации

    Движение группы может сочетаться с локальными изменениями без потери нужной точки отсчёта.

04 Пример задания

Попробуйте конкретное задание

Приведённое ниже задание не тестировалось. Перед использованием проверьте настройку навыка.

Изучите исходные инструкции и настройку

Предоставьте SVG либо описание нужных путей и фигур.

Исходный файл в репозитории
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md

Ссылка ниже открывает инструкции автора. Перед использованием изучите требования к настройке в репозитории; это не команда установки.

Начните с одного результата

Перед запуском навыка адаптируйте объём, исходные материалы и ограничения в этом задании.

Пример задания
Используй svg-animations для небольшой иллюстрации успешной оплаты на моей странице оформления заказа. Нарисуй круглый контур, затем покажи галочку и удержи готовое состояние. Сохрани редактируемость SVG и измерь реальные длины путей. Предоставь инлайн-встраивание с описательным title и статическую версию для уменьшения движения. Проверь точки трансформаций и завершённость штрихов в целевых браузерах, не предполагая одинаковое поведение всех функций анимации. Добавь триггер повтора для проверки, но не превращай индикатор успеха в бесконечный привлекающий внимание цикл.

Проверьте результат

Сверьте фактический результат с этими наблюдаемыми критериями.

  • Проверьте длины путей, совместимость команд морфинга и точки трансформаций.
  • Изучите конечные состояния и границы циклов при реальном размере показа.
  • Проверьте доступные подписи и запасное поведение уменьшения движения выбранного механизма.

OpenDesign предоставляет локальное дизайн-пространство для кодинг-агентов. Этот список не означает, что навык входит в комплект или что его внешние инструменты, учётные данные и программные зависимости включены.

Скачать OpenDesignЧитать краткое руководство

05 Источник и лицензия

Исходные материалы и лицензия

На этой странице описана зафиксированная версия источника по ссылке ниже. Поведение и требования апстрима могут измениться.

Владелец источника
supermemoryai
Репозиторий
supermemoryai/skills
Файл навыка
SKILL.md
Лицензия
Not confirmed
Проверенный снимок
2026-11-02 · 64e285d5a4a5

Примечания к чтению

  1. Область лицензииНеизвестна; это не общественное достояние. Возможны файлы с другими именами или внешние условия; полнота проверки не установлена.
Редакционное резюме источника
Создавайте редактируемые анимации SVG-путей, иконок и иллюстраций.

Оригинальное резюме от OpenDesign на основе указанного источника. Звёзды репозитория — датированный показатель популярности, а не использование навыка или оценка качества.

06 Вопросы перед началом

Вопросы перед началом

Как линия рисует сама себя?

Источник раскрывает штрих изменением stroke-dashoffset относительно измеренной длины. Это управляет видимой долей пути.

Любые две фигуры можно превратить друг в друга?

Прямая интерполяция путей требует совместимых структур команд. Разные команды требуют подготовки или другого подхода к морфингу.

Достаточно одного CSS-правила уменьшения движения?

Это зависит от механизма. CSS-анимация, JavaScript и SMIL могут требовать разной обработки, поэтому встроенный результат нужно проверить в действии.

OpenDesign

Храните задание и работу над дизайном вместе.

Храните задание, исходные материалы и дизайн-работу вместе в локальном рабочем пространстве. Перед добавлением навыка в рабочий процесс проверьте его собственную настройку.

Скачать OpenDesignПросмотреть дизайн-навыки
Исходный файл в репозитории
https://github.com/supermemoryai/skills/blob/64e285d5a4a56c773e86c088af54524328b71c42/svg-animations/SKILL.md