Как реализовать логотип в виде фигурной стрелки на css?

Question

Как можно реализовать стрелку возле слова как на картинке?

Answer 1

Было бы легче сделать картинку и не заморачиваться. Но вот:

body { font-size: 50px; }

.circle { /* Внешний фио круг */
  position: relative;
    /* >> Чтобы абсолютные before позиционировались относительно внешнего круга */
  width: 3em;
  height: 3em;
  border: 0.2em solid #a2a;
  border-radius: 50%;

  overflow: hidden;
    /* >> Скрыть ненужные куски кругов, выпадающие за рамки */

  box-shadow: inset 0 -0.3em 0 0.4em white;
    /* >> Белая круглая тень. Чтобы накрыть куски внутренних кругов*/
}

.circle::before, .moo { /* Внутренний фио полукруг */
  content: "";
  position: absolute;
  z-index: -1; 
    /* >> Белая внутренняя тень .circle должна быть поверх псевдоэлемента */
  
  width: 2em;
  height: 2em;
  top: 1em;
  right: 1.4em;
  
  border: 0.2em solid #a2a;
  border-radius: 50%;
  
  box-shadow: 0 0 0 0.1em white;
    /* >> Белая тень - скрыть левую часть оранж полукруга */
}

.circle::after { /* Оранж полукруг */
  content: "";
  position: absolute;
  z-index: -2;
  
  width: 2em;
  height: 2em;
  top: 1em;
  left: 1.4em;
  
  border: 0.2em solid #f72;
  border-radius: 50%;
}

<div class="circle"></div>

P.s. 1em - это текущий размер font-size. Рядом с каждым текстом будет отображаться относительно размера текста.

Answer 2

Было бы легче сделать картинку и не заморачиваться. Но вот:

Вот решение pure SVG, на тот случай если автору понадобится адаптивность для логотипа.

В решении использованы три окружности.
С помощью stroke-dasharray у второй окружности показана только 1/4 часть и у третьей окружности 1/8 часть окружности.

Всё очень просто по сравнению с решением CSS. Лого можно разместить поверх любого фона.

<style>
.container {
width:10vw;
height:10vh;
}
</style>
<div class="container">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 200 200"  >   
        <!-- Полная окружность -->
    <circle cx="100" cy="100" r="90" stroke="#AE9FFD" stroke-width="12" fill="none"  />
    <!-- Левая часть лого -->
    <circle cx="50" cy="135" r="60" stroke="#AE9FFD" stroke-width="12" fill="none" stroke-dasharray="94.2, 282.6" stroke-dashoffset="94.2" /> 
        <!-- Правая часть лого -->
    <circle cx="150" cy="135" r="60" stroke="#6FD0AC" stroke-width="12" fill="none" stroke-dasharray="50, 326.8" stroke-dashoffset="141.3" />
</svg>  
</div>

Как вариант анимация логотипа, которая начнется после клика

<style>
.container {
width:10vw;
height:10vh;
}
</style>
<div class="container">
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink"   viewBox="0 0 200 200"  >   
    
    <circle id="crc1" cx="100" cy="100" r="90"  stroke="#F6F6F6" stroke-width="12" fill="transparent"/>
    <!-- Полная окружность -->
    <circle cx="100" cy="100" r="90" stroke="#AE9FFD" stroke-width="12" fill="none" stroke-dashoffset="-141.3" stroke-dasharray="0,565.2"  > 
     <animate id="an" attributeName="stroke-dasharray" begin="crc1.click" dur="1s" values="0,282.6 0,282.6;0,0,565.2,0" fill="freeze" />
    </circle>
    <!-- Левая часть лого -->
    <circle cx="50" cy="135" r="60" stroke="#AE9FFD" stroke-width="12" fill="none" stroke-dasharray="0,376.8" stroke-dashoffset="94.2" >
       <animate attributeName="stroke-dasharray" begin="an.end" dur="1s" values="0,376.8;94.2, 282.6" fill="freeze" />
    </circle>
    <!-- Правая часть лого -->
    <circle cx="150" cy="135" r="60" stroke="#6FD0AC" stroke-width="12" fill="none" stroke-dasharray="0,376.8" stroke-dashoffset="141.3" >
         <animate attributeName="stroke-dasharray" begin="an.end" dur="1s" values="0,376.8;50, 326.8" fill="freeze" /> 
    </circle>   
</svg>  
</div>

БЛОГ НА HUSL

Как реализовать логотип в виде фигурной стрелки на css?

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