Дружеское знакомство с SVG

[Gary_Ihar]

Понравилось, спасибо

В конце вы описали кодом крутые примеры, но хотелось бы ссылки на песочницу или гифки. Я ленивый, простите )

[austnv]

спасибо за положительный коллбек! вот ссылка на статью. к сожалению, отдельных ссылок на песочницу нет, т.к. интерактив нативно встроен в оригинальный сайт, поэтому побаловатся можно только там)

[kovserg]

А вот пример не дружественного svg

<svg viewBox="0 0 200 200" xmlns="http://www.w3.org/2000/svg">
<defs>
<g id="g0"><line x1="0" y1="0" x2="200" y2="200" stroke="red"/></g>
<g id="g1"><use href="#g0"/><use href="#g0"/><use href="#g0"/><use href="#g0"/><use href="#g0"/><use href="#g0"/><use href="#g0"/><use href="#g0"/><use href="#g0"/><use href="#g0"/></g>
<g id="g2"><use href="#g1"/><use href="#g1"/><use href="#g1"/><use href="#g1"/><use href="#g1"/><use href="#g1"/><use href="#g1"/><use href="#g1"/><use href="#g1"/><use href="#g1"/></g>
<g id="g3"><use href="#g2"/><use href="#g2"/><use href="#g2"/><use href="#g2"/><use href="#g2"/><use href="#g2"/><use href="#g2"/><use href="#g2"/><use href="#g2"/><use href="#g2"/></g>
<g id="g4"><use href="#g3"/><use href="#g3"/><use href="#g3"/><use href="#g3"/><use href="#g3"/><use href="#g3"/><use href="#g3"/><use href="#g3"/><use href="#g3"/><use href="#g3"/></g>
<g id="g5"><use href="#g4"/><use href="#g4"/><use href="#g4"/><use href="#g4"/><use href="#g4"/><use href="#g4"/><use href="#g4"/><use href="#g4"/><use href="#g4"/><use href="#g4"/></g>
<g id="g6"><use href="#g5"/><use href="#g5"/><use href="#g5"/><use href="#g5"/><use href="#g5"/><use href="#g5"/><use href="#g5"/><use href="#g5"/><use href="#g5"/><use href="#g5"/></g>
<g id="g7"><use href="#g6"/><use href="#g6"/><use href="#g6"/><use href="#g6"/><use href="#g6"/><use href="#g6"/><use href="#g6"/><use href="#g6"/><use href="#g6"/><use href="#g6"/></g>
<g id="g8"><use href="#g7"/><use href="#g7"/><use href="#g7"/><use href="#g7"/><use href="#g7"/><use href="#g7"/><use href="#g7"/><use href="#g7"/><use href="#g7"/><use href="#g7"/></g>
<g id="g9"><use href="#g8"/><use href="#g8"/><use href="#g8"/><use href="#g8"/><use href="#g8"/><use href="#g8"/><use href="#g8"/><use href="#g8"/><use href="#g8"/><use href="#g8"/></g>
</defs>
<use href="#g9"/>
</svg>

[austnv]

страшное дело)

[nenefly]

Я обычно использую SVG только для отображения иконок, даже не думал, что в этом столько всего, просто ошарашен!