Nikolay Talanov

Юзайте вьюпорт еденицы (vw/vh) для такого.
caniuse.com/#feat=viewport-units
https://developer.mozilla.org/en/docs/Web/CSS/length

Погуглите d3 piechart transition/animation и так далее. Найдете миллион примеров. В вашем случае можно сделать какую-нибудь анимацию изменения радиуса вначале.
Я вот неделю назад от нефиг делать игрался, вот результат, вам подойдет (только все равно вначале нагуглите примеры с комментами чтобы все понять, если вы не знакомы с attrTween).
codepen.io/suez/pen/dc6416d34803ff7f4db884e70c0ce7ab

Обычный one page scroll. Причем весьма уныло реализованный.

По виду вам подойдет что-то такое, как минимум попробуйте - https://sarasoueidan.com/tools/circulus/

Edit: хотя глянул получше, там без допиливания никак, ибо генератор больше под иконки заточен.

<label>
  %любой контент, будь то текст или всякие иконки%
  <input type="file"/>
</label>

Вас ведь это интересует?

Какие-то извращения люди предлагают, страшно жить в таком мире.
Есть 2 варианта:
1) CSS :hover - этот самый адекватный.
2) Если вы извращаетесь и вам надо именно на js, то убираете нафиг все убогие id у элементов, пишите нормальные классы, и к элементам, при наведении на которое должна срабатывать анимация, добавляете атрибуты data-id="*" где * это номер элемента (любым циклом можно такой html вывести).
Финальный код будет выглядеть так:

$(document).on("click", ".wpu", function() {
  var id = $(this).data("id");
  $(".epu-"+id).toggle();
});

Убираешь нафиг txt-1/txt-2/txt-n классы у элементов, вместо этого добавляешь им дата-аттрибуты с айдишниками. Аля data-id="2". Через делегирование вешаешь один обработчик на все .txt элементы. Внутри получаешь их id из атрибута, затем у активного элемента убираешь active-класс, текущему (кликнутуму) его добавляешь, затем прячешь все .img (тут на самом деле тоже лучше поменять с hide/fadein на классы, но это уже не моя проблема) и показываешь нужный с помощью полученного ранее id.

$(document).on("click", ".txt", function(e) {
  e.preventDefault();

  var id = $(this).data("id");

  $(".txt.txt-active").removeClass("txt-active");
  $(this).addClass("txt-active");
  $(".pull-right .img").hide();
  $(".pull-right .img-"+id).fadeIn();
});

Идете сюда - tutorials.jenkov.com/svg/index.html
Наугад изучаете и тут же что-то делаете. В свг очень важно научиться писать все эти координаты "ручками". То есть не ждать какого-то сферического экспорта из иллюстратора от дизайнера, а сидеть и по фану что-то делать. Причем ставку надо делать на path (tutorials.jenkov.com/svg/path-element.html) элемент, потому-что с помощью него в свг можно сделать что угодно и потом это дело анимировать. Вначале освойте базовые формы, потом разберитесь как юзать всякие Q/C/a элементы. Затем попробуйте это дело анимировать без специальных либ (то бишь велосипедирование с помощью rAF). Это безусловно не особо быстрый путь, но зато прокачаетесь огого как.
Я вначале года начал изучать таким способом. Помню как несколько дней бился головой о стену, пытаясь понять как грамотно юзать arc элемент, в итоге получилась такая простенькая демка - codepen.io/suez/pen/vEgZba
Потом пошло поехало, 5 дней назад вот эту запилил, где все куда интереснее - codepen.io/suez/pen/epgZjK
codepen.io/search/pens/?limit=suez&page=1&q=svg - вот вроде как все svg демки, можете по дате отсортировать и идти от начала к концу, изучая внутренности. Там конечно много рандомного говнокода и я комментировал только особенно интересные демки, но все же лучше чем ничего.

Зависит от того, что именно вы хотите анимировать в svg. Кому то трансформаций хватит, а кому-то нужны сложные анимации для path со всякими кастомными приблудами.
Универсальные варианты - GSAP и D3. Гсап чисто заточен под анимации, и там имеется большое количество готовых решений/плагинов для свг. Если вам необходимо сделать крутую и комплексную анимацию, то это наверное самый оптимальный вариант. D3 тоже хорош, но он больше рассчитан на работу с данными, и для всяких красивяшек-анимашек не особо подойдет.
Есть еще velocityJS и подобные либы, но они все по сути дела являются лайт-версиями Гсапа (при том что у самого гсапа есть более легкие его версии).
CSS умеет многое, с ним можно даже анимировать отрисовку path и подобные штуки, но он вообще не дружит ни с какими ИЕ, когда дело касается работы с path (+ в ФФ имеются проблемы с transform-origin). Примеры баловства с svg лоадерами на чистом css:
codepen.io/suez/pen/myvgdg
codepen.io/suez/pen/ogmMOM
codepen.io/suez/pen/MwJdRy

Если вам необходимо сделать что-то совсем уж кастомное и крутое, и при этом вы совершенно не уверены что либы в этом вам помогут (либо нет такого функционала, либо пока научитесь его юзать - сойдете с ума), то придется писать велосипеды на js. requestAnimationFrame и в бой. Вот два велосипеда для примера - codepen.io/suez/pen/oXLroX и codepen.io/suez/pen/emjwvP

Ах да, еще есть SMIL анимации (которые прямо внутри SVG описываются) и они умеют очень многое (во многом даже удобнее js получаются, без потери в функциональности), но от них уже медленно отказываются современные браузеры (да и к тому же они никогда не поддерживались в IE). Так что их можете обходить стороной.