Как сделать фон для svg иконки?

Question

Как сделать так чтобы под иконкой оставался фон как тут?

.circle_box {
  transform: scale(4.0);
  position: relative;
  margin: auto;
  margin-top: 100px;
  height: 40px;
  width: 40px;
  text-align: center;
}

.circle_box .circle_1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  transform: rotateY(-180deg) rotateZ(-90deg);
}

.circle_box .circle_1 circle {
  stroke-dasharray: 113px;
  stroke-dashoffset: 0px;
  stroke-linecap: round;
  stroke-width: 2px;
  stroke: #d12036;
  fill: none;
  animation: countdown 10s linear infinite forwards;
}



@keyframes countdown {
  from {
    stroke-dashoffset: 0px;
  }
  to {
    stroke-dashoffset: 113px;
  }
}

<div class="circle_box">
    <svg class="circle_1">
        <circle r="18" cx="20" cy="20"></circle>
    </svg>
    <div class="bg_timer"></div>
</div>

Answer 1

Например, внутренней тенью. Сделаем элемент SVG круглым, прижмем круг к границам и добавим тень. Вот так:

.circle_box {
  transform: scale(4.0);
  position: relative;
  margin: auto;
  margin-top: 100px;
  height: 40px;
  width: 40px;
  text-align: center;
}

.circle_box .circle_1 {
  position: absolute;
  top: 0;
  right: 0;
  width: 40px;
  height: 40px;
  transform: rotateY(-180deg) rotateZ(-90deg);
  box-shadow: 0 0 0 2px yellow inset;
  border-radius: 50%;
}

.circle_box .circle_1 circle {
  stroke-dasharray: 113px;
  stroke-dashoffset: 0px;
  stroke-linecap: round;
  stroke-width: 2px;
  stroke: #d12036;
  fill: none;
  animation: countdown 10s linear infinite forwards;
}



@keyframes countdown {
  from {
    stroke-dashoffset: 0px;
  }
  to {
    stroke-dashoffset: 113px;
  }
}

<div class="circle_box">
    <svg class="circle_1">
        <circle r="19" cx="20" cy="20"></circle>
    </svg>
    <div class="bg_timer"></div>
</div>

БЛОГ НА HUSL

Как сделать фон для svg иконки?

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