Скрипты и советы | 2 марта 2023
Уроки CSS на Хабрахабре, habrahabr.ru, Блог компании Национальная Медиа Группа, CSS, JavaScript, Работа с векторной графикой, Математика, SVG, математика, изображения, JS,
Сегодня я расскажу о процессе, который я придумал для преобразования SVG‑контура в векторный рисунок верёвки.
Вы узнаете, как превратить показанный слева контур в верёвку справа:
Эта задача возникла в проекте, над которым работали мои коллеги, и она привлекла моё внимание. Я думал о ней и начинал экспериментировать, как только появлялось свободное время. Это было очень увлекательно, поэтому я захотел поделиться с вами процессом решения.
Стоит учесть, что это не туториал по кодингу, а подробный обзор каждого из этапов. Но не беспокойтесь, код полностью доступен.
Замысел
Взглянув на это фото верёвки, вы заметите, что она состоит из множества переплетённых друг с другом прядей. Визуально они делят верёвку на сегменты. 2D‑проекция каждого сегмента напоминает изогнутый многоугольник.
Наша задача будет заключаться в создании этих многоугольников при помощи JavaScript.
Читать далееИсточник: Уроки CSS на Хабрахабре
Когда я приходил на конференции и видел презентации на тему веб-компонентов, я всегда думал, что это не только изящно,...
ПодробнееВы когда-нибудь подумывали написать такой алгоритм, в соответствии с которым приложение само принимало бы решения, либо...
ПодробнееВ последнее время часто сравнивают CSS и JavaScript, споря о применении этих технологий для решения определённых задач....
ПодробнееНедавно в одном стартапе я решал задачу генерации билетов в формате PDF. На тот момент уже был готов сайт с устоявшимся...
ПодробнееВ третьей части серии вы узнаете, как работает feComponentTransfer и как можно постеризовать изображения при помощи...
ПодробнееНа FrontFest будет много общения — живых неформальных разговоров в формате, который мы называем квартирником. На...
Подробнее
💬 Комментарии
В связи с новыми требованиями законодательства РФ (ФЗ-152, ФЗ «О рекламе») и ужесточением контроля со стороны РКН, мы отключили систему комментариев на сайте.
🔒 Важно Теперь мы не собираем и не храним ваши персональные данные — даже если очень захотим.
💡 Хотите обсудить материал?
Присоединяйтесь к нашему Telegram-каналу:
https://t.me/tcsecms/Нажмите кнопку ниже — и вы сразу попадёте в чат с комментариями