Просто начните пытаться реализовать свои идеи. Возникнут вопросы, найдете на них ответы. Так и научитесь.
Со знанием базовых вещей будет проще конечно, но все равно прогресс чувствуется когда садишься и делаешь.

По SVG:
commons.oreilly.com/wiki/index.php/SVG_Essentials/...
Книга по основам, я читал в более адекватном epub формате
https://sarasoueidan.com/tags/svg/index.html
Блог Сары (SVG, но можно и про CSS&JS почитать), более практичные и полезные вещи, читал с конца к началу

По JS:
https://classroom.udacity.com/courses/ud860/lesson...
Это база для понимания "че оно лагает?"
https://developers.google.com/web/tools/chrome-dev...
Понимание возможностей DevTools, очень упрощает жизнь в перспективе
https://github.com/getify/You-Dont-Know-JS
И конечно знание самого JS всегда нелишнее

По библиотекам и анимации:
Сам codepen, понятное дело. Смотрите в чужой код, пытайтесь разобраться.
https://www.youtube.com/playlist?list=PLkEZWD8wblt...
Более-менее можно прочувствовать что такое GSAP вообще, неплохой начальный курс
https://greensock.com/docs/#/HTML5/GSAP/TweenMax/from/
Сама документация и туториалы на сайте, можно и на их youtube канале что-то подсмотреть.
https://tympanus.net/codrops/
Много полезного с примерами

Всякого рода математика:
https://www.youtube.com/playlist?list=PLRqwX-V7Uu6...
https://www.youtube.com/user/codingmath/videos?flo...
Можно залипнуть, чтобы понимать как все эти векторные фишки делаются на canvas

Еще есть 3D, но это отдельная тема.

А какие у вас цели?
Если хотите работать на хорошую компанию, то лучше смотреть по вакансиям, например, тут.
Я считаю что это — минимум, но целится лучше на что-то такое или выше.
В плане порядка изучения советую поступать таким образом("книгу" можно заменять на "сайт" или "документацию"):
1) прочитали книгу по CSS+HTML, сверстали несложный сайт
2) прочитали еще одну книгу по CSS+HTML , сверстали что-то посложнее
3) та же история с JavaScript, первая книга — выполняете упражнения, потом пишете что-то несложное, потом читаете другие книги в стиле best practices. Вот вам список книг и навыков, которые требуют от студентов в одной из фирм.
4) изучаете "плюшки", тут лично мои предпочтения: JQuery, SCSS, Jade, ES6, gulp, InternJS, BackboneJS. Тут все изучается по документациям, хотя книг по JQuery тоже много.
5) можете зацепить backend и NodeJS если вам интересно, минимум — понимать что и как там происходит, почитать про RESTful и MVC на серверах
6) базовые понимания и знания дизайна и сопутствующего софта
—> дальше пункты которые касаются слова "Хороший"
7) поиграться с 2D-3D графикой, анимациями и разными библиотеками с ней связанными
8) совершенствовать свои навыки во всех пунктах выше(оптимизация, best practices), изучать самые интересные решения на разных сайтах, интересоваться всем новым и много практиковаться

Чето тут многие пишут страшилки про болезни и докторов, а при этом сами говорят, что они не доктора и не разбираются.

Я лично не вижу ничего криминального. Обычная привычка, зависимость. Мы склонны подсаживаться на "новизну". Можете почитать статейку на эту тему, если с английским дружите:
https://medium.com/the-spike/the-crimes-against-do...

В ней прикольно пишут и объясняют тот факт, почему люди подсаживаются не только на то, что вызывает приятные ощущения(типа винишка или созерцания сисек красивых барышень), а и на новости про то, что в Зимбабве кого-то изнасиловали. Люди сидят, смотрят эти новости, говорят "фу-фу, ну как можно" или "бедные жертвы, айайай", а на самом деле дофаминово кайфуют. Извращенство, но что поделать.

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

По поводу отвыкания от телефонов и соц-сетей, если проблема локальная. Я особо никогда не зависал, но моментами бывало, что ловил себя на мысли, что надо бы меньше времени на них тратить. Что я делал? Брал бумажку и перед тем как зайти в fb или instagram — четко писал на этой бумажке "что я собираюсь сделать" | "зачем я хочу это сделать" | "что в итоге сделал" в 3 колонки. В начале выходило чето в стиле "зайти в fb" | "спросить человека X про встречу" | "тупил 30 минут скроля ленту". Со временем 2 и 3 колонка начали все меньше отличаться, а потом мне стало таааааак влом это записывать, что мне казалось проще тупо не заходить. Буквально 1-2 недели максимум такой терапии надо, а то и несколько дней.

Правильно писал Стивен Кови про момент, между раздражителем и реакцией. Чем четче этот момент будешь чувствовать — тем прикольней жизнь будет.

Тю, так mdn же. По структуре похоже, только более подробно и качественно.
https://developer.mozilla.org/en-US/docs/Web/JavaScript