Frxman

По сути 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 перед анимированием, удалять мусор, адаптировать контуры для морфинга (не всегда дизайнер будет предоставлять полный набор нужных контуров).

// Это функция, она что-то умеет, но ей нужны какие-то данные, которые она просит ей передать (в скобочках)
function say($name) {
    echo "test $name"; // Внутри функции есть команда "Вывести на экран". Она умеет печатать текст "test " и то, что было передано функции через переменную $name снаружи
}

say( "Name_Test" ); // Вызываете функцию и (в скобочка) передаёте ей данные

Абсолютно не важно насколько сложный проект, все можно делать по частям, вопрос только сколько времени вы хотите этому посвятить. Чем сложнее проект, тем больше нюансов и кейсов сможете отработать. Тут только личный подход - "хочу быстро что-то рабочее" или "хочу большое и сложное, время есть, практика рулит".

После основ лучше изучайте ООП. Изучите паттерны, посмотрите как сделаны фреймворки. Попробуйте написать простой блог/интернет магазин и т.п.

Пример с Giphy:

https://api.giphy.com/v1/gifs/trending?api_key=ключ&limit=число

Если к API нужен ключ (api_key), то смотри документацию как его получить.
В документации так же написано, как запрос составлять. API key должен быть первым, если есть, дальше параметры. Начинаться всё должно со знака "?", после него параметр, дальше новый параметр обозначаешь через "&"
Доки Giphy API
https://developers.giphy.com/docs/api/endpoint#trending

Я так делал, может есть что-еще, но я только начинаю

Как взаимодействовать с api?

Как правило к каждому открытому\закрытому api есть подробная документация.

Если кратко - алгоритм всегда похожий.

Регистрация на сайте ->
получение api ключа ->
поиск по документации нужного запроса с интересующими эндпоинтами ->
запрос на сервер с помощью fetch(или библиотек вроде axios) ->
парсинг данных которые приходят ->
profit

Для тренировки запросов(без ключа) попробуйте jsonplaceholder.typicode.com

Поиск в гугле по запросу treene fron-end CityName
1. Этот вопрос задается исключительно в зеркало
1.1 упорство-и-труд(тм). Или же по принципу fake it make you till it

2. На работу берут за голову и скилы

Устроиться сложно, но если есть проекты то реально. Самое главное это качать скиллы. Каждый день развиваться. Ходить на собесы, брать тестовые. Так день за днем набивается рука. Учишь теорию, решаешь задачки, верстаешь, читаешь книги, смотришь туториалы. И так по кругу пока не устроился, а там все так же по кругу только еще могут помочь коллеги. Так же было бы здорово выучить хорошо реакт, и запилить годный проект на нем, с хорошей версткой и адаптивом. Как пример можно сайт додопиццы, я всем новеньким на работе его советую сделать кто только начинает реакт учить