58 lines
1.2 KiB
Markdown
58 lines
1.2 KiB
Markdown
---
|
||
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 |
|