Nikolay Talanov

Как называется такая прокрутка контента? - вот здесь я давал ответ по точно такому же вопросу.

word-break: break-all;
примененный к элементу с текстом, обеспечит перенос не влезающих в строку слов (если вам это необходимо конечно).
И поверх всего этого савим еще overflow: hidden; для самого контейнера, если вы хотите чтобы за его пределы ничего не вылезало.

35 секунд это ахтунг какой-то.
Насчет того, что Gulp значительно быстрее текущего Grunt'а это правда. Ибо Grunt работает на основе временных файлов (скоро хотят поменять это), а Gulp в оперативке все хранит вроде как.
+ у вас как я понимаю Ruby SASS, а он очень медленный на фоне libsass (sassbreak.com/ruby-sass-libsass-differences вот тут пишут про огромную разницу в скорости компиляции).
Я где то год назад делал проект на grunt+sass (ruby версия), и у меня после изменения стилей надо было ждать ~3-5 секунд, до лайврелоада с новыми стилями.
Сейчас юзаю gulp+libsass, после нажатия ctrl+s я моментально разворачиваю браузер, а там уже страница с новыми стилями. Даже пытался успеть на скорость сделать сохранение и увидеть хотя бы "вспышку" от вставки новых стилей, но так и не получилось :)

https://muut.com/riotjs/ - чекните вот это.

0) Ванилла js это и есть обычный js.
1) Начинать надо с одновременного изучения ваниллы и jQuery. По ванилле будете читать книги и всякие статьи, типа как работают замыкания, this, hoisting и так далее. А на jQuery вы собственно будете писать код, который будет что-то, да делать. Никто вам конечно не мешает забить на jQuery и по хардкору угарать только по ванильному жсу, но с огромной вероятностью, вместо того чтобы как то реально практиковаться в написании кода и выполнении каких-то простых задач, вы будете биться головой о стену, ибо для начинающего, работа с DOM (а только и этим можно заниматься поначалу) в ванилле это настоящая пытка. Очень важно пилить много велосипедов.
2) Параллельно прокачиваете css. Там просто поле непаханных возможностей и фишек. Со временем скорее всего придет понимание того, что чего то в обычном css не хватает. Тогда и начнете юзать препроцессоры. Можно конечно и сейчас сразу начать, но я не уверен что от этого будет хоть какая-та польза (а вот риск начать юзать вложенность в full-retard mode имеется).
3) Как только начнете писать хоть какой-то вменяемый js или юзать css с препроцессорами, тогда и придет пора автоматизации фронтэнда. Галпы, автопрефиксеры, склеивание/миницирование стилей/js и все такое. Об этом пункте вообще можно будет не париться долгое время, ибо все ваши задачи будут решаться установкой какого-нибудь генератора yeomana с маджонгом и гейшами.
4) Фрейморвки. Ангулары, реакты, эмберы и так далее. Будете их изучать на основе статей и пет-проджектов, ибо на нормальную работу, где эти самые фрейморвки применяют, с 90% вероятностью не возьмут без опыта владения ими. Учить их все естественно не надо. Достаточно хорошенько покопаться в 1-2, чтобы понять принципы работы основных частей.
4 пункт может с легкостью идти сразу за вторым, если вас больше интересует копание в жсе, и не особо интересно представление. Параллельно со всем перечисленным изучите стайлгайды, методолгии, модульные системы и все подобные вещи, которые необходимы для написания приличного кода.

Все довольно просто - jQuery не умеет в добавление классов к svg. Хотите добавлять класс - юзайте нативный js. jQ вообще очень много чего не умеет с svg. Да и вообще с свг много своих "фишек", которые вы освоите только с опытом. Например classlist api, которому так все радуются в ванилле, вообще не умеет работать с свг в ИЕ.
Вот простая демка - codepen.io/suez/pen/634874e5486fcea55c7e9f8053d49e54
Слева попытка добавить при клике класс на jQuery, справа на ванилле. Заодно можете и в ие посмотреть, там оба варианта не сработают :)

Если хотите красиво презентовать, то совершенно точно свг. Ибо можно будет классно анимировать отрисовку.

Пару дней назад только демку запилил, там как раз имеется заблюривание целого блока, причем с транзишеном.
codepen.io/suez/pen/WvjRMb - нужно открыть меню и дальше все увидите. Просто применяется filter: blur(2px); для всего блока .demo__page и весь его контент блюрится. Это то что вам необходимо?
Само демо если что расчитано только на вебкиты (из-за clip-path), + там имеются тормоза на слабых компах (одна из причин как раз транзишен блюра, но это уже не суть как важно).

1) Свг. Оно для этого лучше всего подходит. Денис посоветовал D3, это наверное самый классический вариант.
2) Можно на канвасе. Но на фоне свг это оверкилл, и его надо юзать только если вы захотите сделать что-то невероятно уникальное с какими-то неприлично крутыми эффектами.
3) Можно на css. Валентин дал ссылку на codrops демку, но есть еще более старая и не менее крутая версия - stackoverflow.com/questions/13132864/creating-a-ra...
Правда там имеются некоторые проблемы, ибо демку с тех пор никто не фиксил, скинул просто для ознакомления с "темной магией".
Так же еще чекните вот это - sarasoueidan.com/tools/circulus
Крутой интрумент от Сары, с помощью которого можно кастомизировать меню как следует. Но оно в плане дизайна не совсем подходит в вашем случае.