Where can I practice with svg?

Question

JavaScript

всем привет. Занимался бекендом 4 года. Последние 2 года занимаюсь только фронтендом, почему? Потому что он мне больше нравится, нравится js. Верстаю сайты, добавляю новые фишки в проекты (меру знаю). Но хочется делать проекты красивее. Изучаю библиотеку snap.svg. Начинаю понимать, как все это дело работает. Но может знаете и сможете посоветовать уроки, как решаются необычные идеи с помощью svg. слайдеры, кнопки, контент всего сайта и т,д, Спасибо

Answer 1

Go here - tutorials.jenkov.com/svg/index.html
You study at random and do something right there. In svg it is very important to learn how to write all these coordinates with "handles". That is, do not wait for some kind of spherical export from the illustrator from the designer, but sit and do something for fun. Moreover, you need to bet on the path ( tutorials.jenkov.com/svg/path-element.html) element, because with it you can do anything in svg and then animate this thing. First, master the basic forms, then figure out how to use all sorts of Q/C/a elements. Then try to animate this case without special libs (i.e. cycling with rAF). This is certainly not a particularly fast path, but it will pump you a lot.
At the beginning of the year I began to study in this way. I remember how I banged my head against the wall for several days, trying to figure out how to correctly use the arc element, as a result I got such a simple demo - codepen.io/suez/pen/vEgZba .io/suez/pen/epgZjK codepen.io/search/pens/?limit=suez&page=1&q=svg - that's sort of like all svg demos, you can sort by date and go from beginning to end, studying the insides. There is certainly a lot of random shit code and I only commented on especially interesting demos, but still better than nothing.

Answer 2

Maybe you can find something here