#инструмент дня
#svg #path
Отличное веб-приложение, позволяющее понять, как же на самом деле работают контуры (кривые, path) в SVG.
Каждый росчерк расписан по шагам, на сложные формулы даётся ссылка. Можно вставлять свои контуры и экспериментировать.
https://svg-path-visualizer.netlify.app/
#svg #path
Отличное веб-приложение, позволяющее понять, как же на самом деле работают контуры (кривые, path) в SVG.
Каждый росчерк расписан по шагам, на сложные формулы даётся ссылка. Можно вставлять свои контуры и экспериментировать.
https://svg-path-visualizer.netlify.app/
#инструмент дня
#svg #path
Среди моих подписчиков и в дружественных чатах постоянно всплывают вопросы о том, что же такое SVG вообще и кривые в частности. Как с ними работать и какого чёрта они работают не так, как ожидается.
Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://t.me/htmlshit/392
Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.
https://yqnn.github.io/svg-path-editor/
#svg #path
Среди моих подписчиков и в дружественных чатах постоянно всплывают вопросы о том, что же такое SVG вообще и кривые в частности. Как с ними работать и какого чёрта они работают не так, как ожидается.
Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://t.me/htmlshit/392
Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.
https://yqnn.github.io/svg-path-editor/
#фишка дня
Хотите расположить текст вдоль контура (кривой)?
Да без проблем! Смотрим КДПВ. Поддержка только в Chrome!
Ладно-ладно, вот вам демо: http://codepen.io/t_afif/full/eYEQbmg
#css #path #svg
Хотите расположить текст вдоль контура (кривой)?
Да без проблем! Смотрим КДПВ. Поддержка только в Chrome!
Ладно-ладно, вот вам демо: http://codepen.io/t_afif/full/eYEQbmg
#css #path #svg
😁14
#инструмент дня
Среди моих подписчиков и в дружественных чатах постоянно всплывают вопросы о том, что же такое SVG вообще и кривые в частности. Как с ними работать и какого чёрта они работают не так, как ожидается.
Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://t.me/htmlshit/392
Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.
https://yqnn.github.io/svg-path-editor/
#svg #path
Среди моих подписчиков и в дружественных чатах постоянно всплывают вопросы о том, что же такое SVG вообще и кривые в частности. Как с ними работать и какого чёрта они работают не так, как ожидается.
Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://t.me/htmlshit/392
Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.
https://yqnn.github.io/svg-path-editor/
#svg #path
🔥9👍2
#инструмент дня
#svg #path
Отличное веб-приложение, позволяющее понять, как же на самом деле работают контуры (кривые, path) в SVG.
Каждый росчерк расписан по шагам, на сложные формулы даётся ссылка. Можно вставлять свои контуры и экспериментировать.
https://svg-path-visualizer.netlify.app/
#svg #path
Отличное веб-приложение, позволяющее понять, как же на самом деле работают контуры (кривые, path) в SVG.
Каждый росчерк расписан по шагам, на сложные формулы даётся ссылка. Можно вставлять свои контуры и экспериментировать.
https://svg-path-visualizer.netlify.app/
👍9🔥1
#инструмент дня
Среди моих подписчиков и в дружественных чатах постоянно всплывают вопросы о том, что же такое SVG вообще и кривые в частности. Как с ними работать и какого чёрта они работают не так, как ожидается.
Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://t.me/htmlshit/392
Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.
https://yqnn.github.io/svg-path-editor/
#svg #path
Среди моих подписчиков и в дружественных чатах постоянно всплывают вопросы о том, что же такое SVG вообще и кривые в частности. Как с ними работать и какого чёрта они работают не так, как ожидается.
Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://t.me/htmlshit/392
Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.
https://yqnn.github.io/svg-path-editor/
#svg #path
👍15
#фишка дня
Давайте сегодня продолжим тему SVG.
Не знаю, скольким из вас вообще известно, как создаются простейшие SVG-анимации заполнения кривой (кстати, скольким?), но, зная длину кривой (контура, path), её заполнение легко можно анимировать.
Примерно вот таким образом: https://codepen.io/alinaki/pen/oNXjEzz?editors=1111
Как узнать длину кривой? Ну это можно посмотеть всё в том же кодпене: circle.getTotalLength().
Но я сегодня не про анимации хочу рассказать, а про более интересный случай использования полученной информации.
Например, как разместить что-либо по контуру кривой? Для простоты, сделаем бусы.
1. Нарисуем окружность.
2. Получим её длину
3. Найдём на окружности 15 равномерно распределённых точек используя getTotalLength getPointAtLength
4. Разместим 15 бусин-кругов по контуру.
Вуаля: https://codepen.io/alinaki/pen/eYPmayO
Такое можно и с текстом провернуть, кто первый? :)
#svg #path #length
Давайте сегодня продолжим тему SVG.
Не знаю, скольким из вас вообще известно, как создаются простейшие SVG-анимации заполнения кривой (кстати, скольким?), но, зная длину кривой (контура, path), её заполнение легко можно анимировать.
Примерно вот таким образом: https://codepen.io/alinaki/pen/oNXjEzz?editors=1111
Как узнать длину кривой? Ну это можно посмотеть всё в том же кодпене: circle.getTotalLength().
Но я сегодня не про анимации хочу рассказать, а про более интересный случай использования полученной информации.
Например, как разместить что-либо по контуру кривой? Для простоты, сделаем бусы.
1. Нарисуем окружность.
2. Получим её длину
3. Найдём на окружности 15 равномерно распределённых точек используя getTotalLength getPointAtLength
4. Разместим 15 бусин-кругов по контуру.
Вуаля: https://codepen.io/alinaki/pen/eYPmayO
Такое можно и с текстом провернуть, кто первый? :)
#svg #path #length
❤15👍4
#фишка дня
Давайте сегодня продолжим тему SVG.
Не знаю, скольким из вас вообще известно, как создаются простейшие SVG-анимации заполнения кривой (кстати, скольким?), но, зная длину кривой (контура, path), её заполнение легко можно анимировать.
Примерно вот таким образом: https://codepen.io/alinaki/pen/oNXjEzz?editors=1111
Как узнать длину кривой? Ну это можно посмотеть всё в том же кодпене: circle.getTotalLength().
Но я сегодня не про анимации хочу рассказать, а про более интересный случай использования полученной информации.
Например, как разместить что-либо по контуру кривой? Для простоты, сделаем бусы.
1. Нарисуем окружность.
2. Получим её длину
3. Найдём на окружности 15 равномерно распределённых точек используя getTotalLength getPointAtLength
4. Разместим 15 бусин-кругов по контуру.
Вуаля: https://codepen.io/alinaki/pen/eYPmayO
Такое можно и с текстом провернуть, кто первый? :)
#svg #path #length #бородач
Давайте сегодня продолжим тему SVG.
Не знаю, скольким из вас вообще известно, как создаются простейшие SVG-анимации заполнения кривой (кстати, скольким?), но, зная длину кривой (контура, path), её заполнение легко можно анимировать.
Примерно вот таким образом: https://codepen.io/alinaki/pen/oNXjEzz?editors=1111
Как узнать длину кривой? Ну это можно посмотеть всё в том же кодпене: circle.getTotalLength().
Но я сегодня не про анимации хочу рассказать, а про более интересный случай использования полученной информации.
Например, как разместить что-либо по контуру кривой? Для простоты, сделаем бусы.
1. Нарисуем окружность.
2. Получим её длину
3. Найдём на окружности 15 равномерно распределённых точек используя getTotalLength getPointAtLength
4. Разместим 15 бусин-кругов по контуру.
Вуаля: https://codepen.io/alinaki/pen/eYPmayO
Такое можно и с текстом провернуть, кто первый? :)
#svg #path #length #бородач
👍7
#инструмент дня
Среди моих подписчиков и в дружественных чатах постоянно всплывают вопросы о том, что же такое SVG вообще и кривые в частности. Как с ними работать и какого чёрта они работают не так, как ожидается.
Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://t.me/htmlshit/392
Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.
https://yqnn.github.io/svg-path-editor/
#svg #path #бородач
Среди моих подписчиков и в дружественных чатах постоянно всплывают вопросы о том, что же такое SVG вообще и кривые в частности. Как с ними работать и какого чёрта они работают не так, как ожидается.
Я уже выкладывал интересный инструмент для понимания процесса создания SVG и его элементов: path, polygon, polyline и т. д. “для самых маленьких”: https://t.me/htmlshit/392
Пришло время для ещё одного. Этот инструмент позволяет понять создание сегментов кривой по шагам, включая перемещение пера (M), кривые безье (C), дуги (арки, A) и линии (L). Всё раскидано по координатам и уложено в сетку. Можно менять конкретные числа, а можно — подёргать реперные точки мышкой и увидеть изменение кривой.
https://yqnn.github.io/svg-path-editor/
#svg #path #бородач
👍17❤3
This media is not supported in your browser
VIEW IN TELEGRAM
#фишка дня
— Криса Койера знаешь?
— Нет
— Дядька мой
Ладно, кроме шуток. Часто CEO вашей компании даёт стримы и уроки по вёрстке? А CEO CodePen — даёт. От скуки, может?
И тема сегодняшнего выпуска — offset-path. Или как заставить объект следовать контуру.
Сразу демо: https://codepen.io/chriscoyier/pen/ZEdpVev
Весь кайф в том, что offset-path принимает не только описание кривой SVG, но и значения боксовой модели вроде border-box, что означает, что в качестве кривой будут границы родителя!
Да, как правило речь почему-то всегда о круге или волне, но, по-моему, следование квадрату не менее эффектно.
Ну и вообще в официальном твиттере компании CodePen много неожиданного вываливают.
#css #path #animation
— Криса Койера знаешь?
— Нет
— Дядька мой
Ладно, кроме шуток. Часто CEO вашей компании даёт стримы и уроки по вёрстке? А CEO CodePen — даёт. От скуки, может?
И тема сегодняшнего выпуска — offset-path. Или как заставить объект следовать контуру.
Сразу демо: https://codepen.io/chriscoyier/pen/ZEdpVev
Весь кайф в том, что offset-path принимает не только описание кривой SVG, но и значения боксовой модели вроде border-box, что означает, что в качестве кривой будут границы родителя!
Да, как правило речь почему-то всегда о круге или волне, но, по-моему, следование квадрату не менее эффектно.
Ну и вообще в официальном твиттере компании CodePen много неожиданного вываливают.
#css #path #animation
👍21🤩7❤2
This media is not supported in your browser
VIEW IN TELEGRAM
#статья дня
Вот мало было нам хороших статей по SVG, нужно больше!
Джош Комо продолжает свою серию про SVG. Начав со статьи про базовые принципы, пришло время объяснить, как работает механизм формирования кривых, контуров, aka path: https://www.joshwcomeau.com/svg/interactive-guide-to-paths/
Вы можете заметить, что у нас так-то уже огромное количество интерактивных обучающих ресурсов, начиная от чего-то похожего на ЛогоМиры, до более сложных инструментов.
Но Джош это Джош! Как всегда потрясающая любовь к деталям, интерактивные примеры и понятные объяснения по ходу.
Фишка его подхода в этот раз — пошаговый разбор алгоритма отрисовки кривых. Проигрывает его по кадрам, как будто вы очень медленный компьютер :)
Залипательно!
P. S. розыгрыш билета на конференцию от подлодки открыт до утра, если что.
#svg #path #tool
Вот мало было нам хороших статей по SVG, нужно больше!
Джош Комо продолжает свою серию про SVG. Начав со статьи про базовые принципы, пришло время объяснить, как работает механизм формирования кривых, контуров, aka path: https://www.joshwcomeau.com/svg/interactive-guide-to-paths/
Вы можете заметить, что у нас так-то уже огромное количество интерактивных обучающих ресурсов, начиная от чего-то похожего на ЛогоМиры, до более сложных инструментов.
Но Джош это Джош! Как всегда потрясающая любовь к деталям, интерактивные примеры и понятные объяснения по ходу.
Фишка его подхода в этот раз — пошаговый разбор алгоритма отрисовки кривых. Проигрывает его по кадрам, как будто вы очень медленный компьютер :)
Залипательно!
P. S. розыгрыш билета на конференцию от подлодки открыт до утра, если что.
#svg #path #tool
❤13👍3