Initial commit: 79+ design patterns, LLM prompts, and assets

media/svg-animation.md

@@ -0,0 +1,57 @@
+---
+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 |