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

# SVG Animation

## 1. Path Draw Animation

```html
<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>
```

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

## 2. Morphing SVG

```html
<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

```css
.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 |