Где можно попрактиковаться с svg?

всем привет. Занимался бекендом 4 года. Последние 2 года занимаюсь только фронтендом, почему? Потому что он мне больше нравится, нравится js. Верстаю сайты, добавляю новые фишки в проекты (меру знаю). Но хочется делать проекты красивее. Изучаю библиотеку snap.svg. Начинаю понимать, как все это дело работает. Но может знаете и сможете посоветовать уроки, как решаются необычные идеи с помощью svg. слайдеры, кнопки, контент всего сайта и т,д, Спасибо
  • Вопрос задан
  • 458 просмотров
Решения вопроса 1
Ronnie_Gardocki
@Ronnie_Gardocki
Я у мамы фронтендщик.
Идете сюда - 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 демки, можете по дате отсортировать и идти от начала к концу, изучая внутренности. Там конечно много рандомного говнокода и я комментировал только особенно интересные демки, но все же лучше чем ничего.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 1
GoodProject
@GoodProject
Верстальщик
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы