Рисунок круга и изгиба для svg

Question

d: path('M0,0 0,3.5 3.5,1.75z');

Это стрелка, как будет выглядеть параметр если необходим простой круг? Возможно ли его нарисовать для тега

<circle cx="18" cy="18" r="15"></circle>

И такой плавный изгиб дуги по левому краю (под viewBox="0 0 36 36")

Искал решение, выполнить плавный изгиб через css. Единственный выход, делать радиус на блок и увеличивать его в 2-3-5 раз, прятать все что за родителя выходит...

Answer 1

Форму красной стрелки, можно реализовать, как средствами CSS так и SVG

Решение CSS

С помощью border

.box {
width:200px;
height:200px;
margin:0.5em;
background: red;
    border-top-left-radius: 1.5em 20em;
    border-bottom-left-radius: 1.5em 20em;
 }

<div class="box"></div>

border-top-left-radius: 2em 15em; ,где
1.5em - горизонтальный радиус
20em - вертикальный радиус

В помощь прочитайте отличную статью на Хабре

В теге circle такого сделать не возможно. Такую форму можно сделать только с помощью самостоятельного тега <path>

Решение SVG

.container {
width:30vw;
height:30vh;
}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg2" viewBox="0 0 36 36">
  <path id="arrow" d="M34.2 2H6S3.6 13 3.6 18.5C3.6 23.9 6 33.9 6 33.9h28.2Z"  fill="#ED1B24" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>

Update

На исправленной версии видно, что радиусы одинаковые, и отступы одинаковые. Чёрная рамка,- это граница SVG холста После настройки рамку - style="border:1px solid" можно удалить.

.container {
width:35vw;
height:35vh;
}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" id="svg2" viewBox="0 0 36 36" style="border:1px solid">
  <path id="arrow" d="M34.2 2H3.1S1.8 13 1.8 18.5A185 185 0 0 0 3.1 34h31.1z"  fill="gold" stroke-width="1" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</div>

БЛОГ НА HUSL

Рисунок круга и изгиба для svg

Ответы (1 шт):

Решение CSS

Решение SVG

Update