AIKraft/AI/Войти
AIKraft/Skills/SVG-анимации

SVG-анимации

Create beautiful, performant SVG animations and illustrations. Use this skill when the user asks to create SVG graphics, icons, illustrations, animated logos, path animations, morphing shapes, loading spinners, or any animated SVG content. Covers SMIL animations, CSS-driven SVG animation, path drawing effects, shape morphing, motion paths, gradients, masks, and filters.

SUsupermemory official Дизайн

Что делает навык

Навык обеспечивает создание ручных SVG-анимаций, от простых иконок до сложных многоэтапных анимаций путей, используя SVG как язык разметки, где каждый элемент является узлом DOM для стилизации и анимации. Он охватывает работу с системой координат viewBox, примитивами форм и методами анимации, такими как SMIL, CSS-анимация и эффекты прорисовки.

Когда применять

  • Создание анимированных логотипов и иконок
  • Разработка спиннеров загрузки и индикаторов прогресса
  • Генерация анимации путей и морфинга форм
  • Создание иллюстраций с эффектами прорисовки (stroke-dasharray)
  • Разработка сложных многоэтапных анимаций SVG

Как работает

  1. Определить размер холста, задав атрибут viewBox (например, viewBox="0 0 200 200") для обеспечения независимости от разрешения.
  2. Создать базовую структуру SVG, используя примитивы форм и элементы разметки.
  3. Применить стили и анимации, используя CSS-анимацию, SMIL или скрипты, так как каждый элемент является узлом DOM.
  4. Реализовать конкретные эффекты, такие как анимация путей, морфинг или использование градиентов и фильтров.
  5. Настроить параметры анимации для достижения плавного и производительного результата.

Примеры запросов агенту

Создай анимированный спиннер загрузки с использованием CSS-анимации SVG.
Сгенерируй SVG-иллюстрацию с эффектом прорисовки пути (stroke animation).
Разработай анимированный логотип с морфингом форм.

Описание составлено по SKILL.md навыка, сверено 05.10.2026.

Как подключить

1Скачать навык
# возьмите папку навыка «svg-animations» из репозитория: # https://github.com/supermemoryai/skills
2Положить папку с SKILL.md к навыкам ассистента
# положите папку навыка туда, где ассистент ищет skills: cp -r svg-animations/ ~/.claude/skills/svg-animations/

Навык — папка с файлом SKILL.md (описание + инструкции) и опциональными скриптами. Ассистент (Claude, Claude Code и совместимые) подхватывает его по описанию и следует шагам.