@WebforSelf

Как реализовать такие фигуры на SVG?

Как сделать такие фигуры на SVG?
5f95d3c695de1073450330.png
5f95d3ccd35d5909678691.png\
5f95d3d34cef5536791587.png
  • Вопрос задан
  • 129 просмотров
Решения вопроса 2
melpnz
@melpnz
UX/UI дизайнер
Вот ваши фигуры:

<svg width="496" height="325" viewBox="0 0 496 325" fill="none" xmlns="http://www.w3.org/2000/svg">
<path style="stroke-dasharray: 8 4 ; stroke: black; stroke-width: 2px;" d="M483 64.6C487.3 63.4 491.6 62.4 495.9 61.6C484.6 57.7 471.5 55.4 457.6 55.4C432.4 55.4 410.1 62.7 396.1 73.9C382.7 64.2 367 57.3 350 53.9C335.7 34.4 301.2 20.6 260.9 20.6C244.5 20.6 229.1 22.9 215.6 26.9C204 19.6 190.7 13.4 175.8 8.40001C102.5 -16.1 26.1 14.8 4.89999 77.7C-16.3 140.5 31 256.6 158.7 283.8C180.6 308.7 216.4 325 256.8 325C308.6 325 352.7 298.3 369.9 260.9C411.8 244.6 441.3 205.7 441.3 160.4C441.3 137.6 433.9 116.5 421.1 99C434.2 84.7 456.3 71.8 483 64.6Z"/>
</svg>


<svg width="469" height="318" viewBox="0 0 469 318" fill="none" xmlns="http://www.w3.org/2000/svg">
<path style="stroke-dasharray: 8 4 ; stroke: black; stroke-width: 2px;" d="M454.1 64.9L27.5 0.299997C10.9 -2.1 -3 12.8 0.6 29.1L56.7 265.9C59.8 279.2 72.4 288 86 286.5L296.9 262.8L390.2 317.3L357.7 255.9L412.2 249.8C420.9 248.8 428 242.6 430.2 234.1L468 85.5C470.3 75.8 463.9 66.4 454.1 64.9Z"/>
</svg>


<svg width="497" height="436" viewBox="0 0 497 436" fill="none" xmlns="http://www.w3.org/2000/svg">
<path style="stroke-dasharray: 8 4 ; stroke: black; stroke-width: 2px;" d="M492.9 238.7L465.8 193.6L478.4 137.3C481.4 124 471.7 111.2 458 110.5L380.4 106.6L394.6 36.8L318.5 71.9L260.3 6.8C252.3 -2.2 238.1 -2.1 230.3 7.1L154.1 95.4L67.5 91.1C60 90.7 53.2 95.6 51.3 102.9L41.7 138.2L20 144.8C7.70002 148.5 0.900013 161.6 4.80001 173.8L19.4 219.7L0.800013 287C-1.89999 296.7 3.5 306.8 13.1 310L52.2 323.1L64.6 362.1C68.4 374 81.2 380.3 92.9 376.2L150 355.9L151.2 356.3L192.9 423.3C199.3 433.6 212.8 436.7 223.1 430.4L275.7 398L385.7 434.8C398.6 439.1 412.5 431.3 415.4 418L442.9 294.9L485.3 268.8C495.8 262.4 499.1 249 492.9 238.7Z"/>
</svg>


Соответственно:
d="..." - координаты точек
stroke-dasharray: 8 4 - длина пунктира и отступ между
stroke: black - цвет обводки
stroke-width: 2px - толщина
Ответ написан
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
Это path-ы с stroke-dasharray.
Ответ написан
Комментировать
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы