Переведите SVG-контур в CSS-функцию 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