wow-design-wiki/media/animated-illustration.md

name, title, description, tags, source

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

Animated Illustrations

1. Lottie Integration

<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

.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	Уважать настройки