Я виявляю, що 98% усього мого використання SVG походить від заздалегідь створених SVG-файлів або векторних зображень у якомусь програмному забезпеченні, яке я в кінцевому підсумку експортую як SVG. Не надто часто я маніпулюю координатами речей у коді SVG. Гей, у мене навіть є книга про все це.
Але час від часу це доречно і, можливо, навіть трохи весело. У цьому випадку я хотів провести досить конкретну лінію з парою м’яких поворотів. Трохи знаючи синтаксис шляху SVG (найдивніший, але найпотужніший із інструментів малювання SVG), ми можемо зробити це без особливої суєти.
Демо, з яким ми грали у відео:
Дивіться Pen
KOvPaa Кріса Койєра (@chriscoyier)
на CodePen.
Оригінальна ідея:
Дивіться «
Освітлений шлях ручки» Кріса Койєра (@chriscoyier)
на CodePen.
Пам’ятайте, що те, що ми не зробили, - це регулювання SVG таким чином, щоб закруглені кути залишались у гарному співвідношенні сторін, тоді як решта SVG була гнучкою і могла заповнювати вертикальний та горизонтальний простір. Це можливо, це просто складніше, і це доведеться висвітлювати іншим разом.