CSS-эффекты и графика

SVG-путь в clip-path

Из атрибута d или целой иконки получается clip-path: polygon() в процентах. Кривые и дуги раскладываются на точки, лишние точки убираются, фигура вписывается в блок.

Исходный путь

Годится и целый <svg>, и один <path>, и голая строка d, и <polygon points>.

Точность

Точек в контуре: не больше 60 Лишние точки убирает алгоритм Рамера — Дугласа — Пекера: он выбрасывает только те, что лежат на прямой и ничего не меняют в форме. Отрезков на кривую: 16 Знаков после запятой: 2

Точек в результате: 38. Рамка исходного пути: 18 × 20.

Превью

Показать исходный SVG рядом

CSS

.shape {
  clip-path: polygon(50% 0%, 0% 20%, 0% 50%, 0.24% 54.65%, 0.96% 59.2%, 2.14% 63.64%, 3.75% 67.94%, 5.78% 72.07%, 8.2% 76.02%, 11.01% 79.75%, 14.17% 83.25%, 17.67% 86.49%, 21.48% 89.45%, 25.6% 92.11%, 30% 94.44%, 34.66% 96.41%, 39.56% 98.02%, 44.68% 99.22%, 50% 100%, 55.32% 99.22%, 60.44% 98.02%, 65.34% 96.41%, 70% 94.44%, 74.4% 92.11%, 78.52% 89.45%, 82.33% 86.49%, 85.83% 83.25%, 88.99% 79.75%, 91.8% 76.02%, 94.22% 72.07%, 96.25% 67.94%, 97.86% 63.64%, 99.04% 59.2%, 99.76% 54.65%, 100% 50%, 100% 20%, 50% 0%, 50% 0%);
}