Vyach Gor

По сути SVG - это почти HTML (ок, нехорошо так говорить, но тем не менее). Дерево из тегов, атрибуты, все дела. Выбираем нужные элементы, меняем атрибуты - вот и вся анимация. Как и с любыми другими элементами на странице. Это не какой-то отдельный и ни на что не похожий тип анимаций.

Есть три варианта анимирования SVG в рамках фронтенда, два идентичных обычному HTML, и один дополнительный, привнесенный извне:

1. CSS. Картинку, вставленную в страницу, можно анимировать с помощью CSS в каких-то пределах. Не все так получится сделать, но какие-то простые движения, изменения цветов - вполне можно. Если вы знаете CSS - можно сказать, что уже знаете все, что тут можно сделать.
   
2. JS. Все как всегда. Получаем элементы через querySelector, getElementBy... и.т.д., и через setAttribute задаем элементам SVG нужные атрибуты. Обычно удобно добавить какой-то инструмент для интерполяций значений во времени. Из популярного - GSAP и Anime.js. При желании можно что-то свое написать, если задачи совсем простые, в базовом варианте все подобные инструменты строятся примерно по такому принципу. Некоторые инструменты добавляют какие-то еще свои дополнительные возможности, или есть готовые прикольные примеры, сделанные с их использованием, как например у d3.js, но нужны ли они лично вам - нельзя сказать, не зная задач. А инструменты должны выбираться исходя из этих самых задач, а не из моды. Здесь важно лишь понимать, что никакие библиотеки не расширяют сам формат SVG, не привносят никаких принципиально новых возможностей в него, они все больше про организацию скриптов.
   
3. Еще есть SMIL. Это древнее зло из миров, далеких фронтенду. Есть хороший туториал на CSS-tricks. Это все "модно-нативно", но иногда сложно синхронизировать с остальными событиями на странице, и сложно отлаживать, т.к. нет адекватной привязки к инструментам разработчика в браузерах.
   

Полезно еще познакомиться с вот этой статьей, там отмечены некоторые косяки, связанные с кроссбраузерностью. Да, SVG - это штука, которая вроде бы была с нами всегда, но в контексте анимирования wtf-моментов там все еще достаточно.

И есть две популярные фишки, которые часто все используют в анимациях - это маски и пунктиры. Способ анимирования не важен, но знать про них полезно.

Ну и полезно познакомиться с каким-нибудь векторным графическим редактором, чтобы уметь структурировать SVG перед анимированием, удалять мусор, адаптировать контуры для морфинга (не всегда дизайнер будет предоставлять полный набор нужных контуров).

Гуглмэн спешит на помощь

## Анонимный чат с темами для обсуждения деликатных офисных проблем
Иногда хочется обсудить что-то с коллегами в офисе, но не хочется смущать их или показывать лишнюю инициативу.
Например кто-то не смывает в туалете или слишком громко орёт и сам того не замечает. Может быть кто-то слишком интенсивно пользуется парфюмом.
- Анонимность
- Постоянная ссылка на чат, тему или дерево чатов
- ссылки в виде QR-кодов
- голосовалка
- закрепленные посты

## Сайт checklist
Веб-сервис и мобильное приложение для краудсорсинга чеклистов для всего: зарегать ИП, получить визу, что делать при ДТП, как влезть в ипотеку, как вылезть из неё, чем заняться с ребенком на выходных (N-ле

- Коллекция чек-листов снабженных тегами, доступная для краудсорсинга.
- Краудфандинг составления и поддержки нового листа.
- Фильтрация чек-листов.
- Фильтрация пунктов.
- Тегирование пунктов.
- Графовые алгоритм обхода чек-листа.
- Мастер обхода чек-листа.
- Отчет по чек-листу.
- Вложенные чеклисты, гиперссылки между разными листами.
- Параметризация.
- Экспертная система, логические связи (расширенный режим).

Примеры:
- Что делать при ДТП
- Открыть ИП
- Осмотр авто при покупке (подветки для разных конкретных моделей)
- Первая помощь при...
- Диагностика инсульта
- Зомби-акопалипсис: как приготовиться
- Атомный взрыв неподалёку - что делать
- Планетарная катастрофа - как выживать
- Поход выходного дня - что взять
- Подготовка авто к поездке
- Путешествие: Алжир (виза, прививки, документы, отели, транспорт)
- Как влезть в ипотеку
- Как вылезть из ипотеки
- Как быстро заработать (во все тяжкие)
- Покупка квартиры (на что обратить внимание)
- Самостоятельное строительство дома (общий план)
- Чем заняться с ребёнком N-лет
- Как отметить новый год
- Что интересного в районе <пос. Майский>
- Номера телефонов и документы в автомобиле

## Эротический краудфандинг
Интернет ресурс, где девушки могут делать крауд-фандинговые кампании

- Крауд-фандинговая кампания по сбору средств на проект
- оформление проекта (доказательство личности в виде фото с сигном, некое обещание, порог недовольных результатом, целевая сумма)
- посетители анонимно финансируют проект в биткоинах
- если кол-во лайков среди профинансировавших (в соответствии с весами) > порогового, учредитель получает сумму за вычетом комиссии
- если кол-во лайков не превысило порог, сумма возвращается обратно инвесторам

## Простой открытый сервис для обмена сообщениями
- HTTP API, Web-sockets
- p2p rtsp
- опциональное end-to-end шифрование
- хранение истории на клиентах
- возможность использования нескольких серверов
- возможность использования альтруистичных клиентов для проксирования трафика p2p
- поиск узлов на основе блокчейн технологий и DHT таблиц

## Онлайн-журнал путешествия
- публикация трека в реальном времени
- комментарии путешественника и фолловеров
- стримы (аудио, видео, фото)
- отложенная загрузка
- журнал(расходы, чек-поинты, расписания, цены, погода)
- FAQ
- голосовалка

## Поэтический онлайн редактор
- выбор стопа, стиля и жанра
- шаблон с плейсхолдерами, разбивающий текст на слоги
- облако рифм
- подражающий автогенератор
- многосегментный словарный банк (дифференциально-слоистая древовидная структура, своя специфика в верхнем слое, поэлементное ранжирование сегментов)
- тезаурус
- словарь сочаетаемости
- N-граммы поэзии по авторам и стилям
- корпус поэзии

gulp.watch('./src/css/*.css', gulp.series('reload-css'));

PS
Интересно, как долго это будет продолжаться? (вопрос риторический)
Интернет завален статьями по третьему галпу, а по умолчанию ставится четвертый.
Ну и люди тоже думать не хотят, читать и анализировать сообщения об ошибках.

А еще ведь можно текст ошибки вбить в гугл...

Набросал свой вариант: