Для создания анимации SVG, основанной на дизайне из Фигмы, необходимо выполнить следующие шаги:
1. Экспортируйте дизайн из Фигмы в формате SVG. Для этого вы можете использовать плагины или функциональные возможности самой Фигмы.
2. Вставьте экспортированный SVG-файл в код HTML вашей веб-страницы. Используйте тэг `<object>` или `<img src="...">`.
3. Создайте стили CSS, чтобы задать начальное состояние фигуры, включая цвет и тени.
4. Используйте JavaScript, чтобы отслеживать движение мыши пользователя. При определенном событии (например, наведении на фигуру или щелчке мыши) примените анимацию, чтобы цвет фигуры изменился и появилась тень.
Пример кода:
```html
<!DOCTYPE html>
<html>
<head>
<style>
/* Стили для SVG-фигуры */
#my-svg {
fill: blue; /* Цвет заполнения */
filter: drop-shadow(2px 2px 4px rgba(0, 0, 0, 0.5)); /* Тень */
}
/* Анимация при наведении на фигуру */
#my-svg:hover {
fill: red; /* Изменение цвета */
filter: drop-shadow(4px 4px 8px rgba(0, 0, 0, 0.8)); /* Изменение тени */
transition: fill 0.3s, filter 0.3s; /* Плавное изменение */
}
</style>
</head>
<body>
<!-- Вставка SVG-фигуры -->
<object id="my-svg" type="image/svg+xml" data="my-svg.svg"></object>
<script>
// Обработчик события наведения на фигуру
document.getElementById("my-svg").addEventListener("mouseover", function() {
this.classList.add("hover"); // Применение анимации
});
// Обработчик события ухода мыши с фигуры
document.getElementById("my-svg").addEventListener("mouseout", function() {
this.classList.remove("hover"); // Удаление анимации
});
</script>
</body>
</html>
```
В приведенном выше примере SVG-фигура получена из файла "my-svg.svg", который должен быть размещен в той же директории, что и веб-страница. Вы можете изменить цвет и тень в CSS-стилях для достижения нужного эффекта. При наведении мыши на фигуру применится анимация, изменяющая ее цвет и тень, а при уходе мыши анимация будет удалена.