Возможно ли нарисовать форму логотипа на css?

Question

Проблема заключается в том, что непонятно как сделать подобные закругления наружу, которые выделены на картинке. Сам полукруг можно сделать как отдельным блоком, так и псевдоэлементом. Пробовал сделать эти закругления через псевдоэлементы, голову сломал.

Answer 1

Как комментирует @Ein

Так же можно попробовать отрисовать лого в svg, а не пытаться сверстать.

Действительно проще любую фигуру со сложными кривыми нарисовать в векторном редакторе. Для этого:

Загрузите растровую картинку в векторный редактор, например Inkscape
По контуру фигуры нанесите узловые точки с помощью инструмента "Рисовать кривые Безье"
Перемещением рычагов управления узловых точек, добейтесь полного совпадения контуров рисунка и кривых линий
Сохраните файл в формате *.svg
Оптимизируйте код с помощью SVGOMG

.container {
width:80vw;
height:80vh;
}
svg {
background:#f9f9f9;
}

<div class="container">
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 898 470" >

  <path d="M10 9v310c0 107 343 152 357 129 13-21 42-49 69-48 40 0 54 31 77 50 20 17 344-10 349-131V9Z" fill="white" stroke="none"/>
</svg>
</div>

БЛОГ НА HUSL

Возможно ли нарисовать форму логотипа на css?

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