shape() за один вставленный путьФункция
shape() описывает произвольный контур прямо в CSS: её можно анимировать, задавать в ней проценты и единицы вроде em, использовать в clip-path и offset-path. Проблема ровно одна: писать её руками мучительно, а все реальные контуры уже нарисованы и лежат в виде d-атрибута внутри SVG.Мэтью Морете год возился со спецификацией и выложил три маленьких инструмента, которые закрывают эту работу:
— Path to Shape переводит
d из SVG-пути в синтаксис shape();— Shape to Polygon делает обратный ход в
polygon(). Пригодится как запасной вариант для браузеров без поддержки shape(), а иногда и как прямая замена: polygon() часто выходит компактнее;— Minify Shape сжимает готовый код
shape() примерно так же, как SVGO поступает с SVG.Все три работают в браузере и написаны на SvelteKit. Автор пишет, что прогнал через них все контуры, до которых дотянулся, но на особо заковыристых путях с дугами конвертер всё ещё спотыкается — проверяйте результат глазами.
#css
