---
name: media/animated-illustration
title: Animated Illustrations & Icons
description: Lottie animations, CSS illustrations, motion graphics.
tags: [media, animation, illustration, lottie, motion]
source: raycast.com, linear.app, amppz.com, brad.co
---

# Animated Illustrations

## 1. Lottie Integration

```html
<div id="animation" data-src="animation.json"></div>
<script src="https://unpkg.com/@lottiefiles/lottie-player@latest/dist/lottie-player.js"></script>
<script>
  document.getElementById('animation').innerHTML = `
    <lottie-player src="animation.json" background="transparent" speed="1" style="width: 300px; height: 300px;" loop autoplay></lottie-player>
  `;
</script>
```

## 2. CSS Animated Illustration

```css
.illustration {
  width: 200px;
  height: 200px;
  background: conic-gradient(from 0deg, #6366f1, #ec4899, #6366f1);
  border-radius: 50%;
  animation: spin 4s linear infinite;
}
@keyframes spin {
  to { transform: rotate(360deg); }
}
```

## Anti-patterns

| ❌ Плохо | ✅ Хорошо |
|----------|-----------|
| Без fallback | SVG fallback |
| Без `prefers-reduced-motion` | Уважать настройки |