wow-design-wiki/media/svg-animation.md

name, title, description, tags, source

name	title	description	tags	source
media/svg-animation	SVG Animation & Icon Motion	Animated SVG icons, paths, and illustrations.	media svg animation icon motion	raycast.com, linear.app, brad.co, amppz.com

SVG Animation

1. Path Draw Animation

<svg class="icon-animated" viewBox="0 0 24 24" width="48" height="48">
  <path class="icon-path" d="M5 13l4 4L19 7" fill="none" stroke="#6366f1" stroke-width="2"/>
</svg>

.icon-path {
  stroke-dasharray: 30;
  stroke-dashoffset: 30;
  animation: draw 0.5s ease forwards;
}
@keyframes draw {
  to { stroke-dashoffset: 0; }
}

2. Morphing SVG

<svg class="morph-svg" viewBox="0 0 100 100">
  <circle cx="50" cy="50" r="40" fill="#6366f1">
    <animate attributeName="r" values="40;50;40" dur="3s" repeatCount="indefinite"/>
  </circle>
</svg>

3. Icon Hover

.icon {
  transition: transform 0.3s ease;
}
.icon:hover {
  transform: scale(1.2) rotate(10deg);
}

Anti-patterns

❌ Плохо	✅ Хорошо
Без viewBox	Всегда viewBox
Без stroke-dashoffset	Использовать для path
500ms+ анимация	0.3–0.5s