<div class="wrap">
  <svg viewBox="-3 -3 41 41">
      <defs>
        <radialGradient id="lg2" cx=45% cy=0% >
        <stop offset="10%" stop-color="white" />
      <stop offset="100%" stop-color="red" />
    </linearGradient>
    </defs>
    <g class="group1">
      <path
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
        fill="none"
        stroke="url(#lg2)"
        stroke-width="5"
        stroke-linecap=round
        >
        <animate attributeName="stroke-dasharray" dur="1s" from="0, 100" to="70, 100" fill="freeze"/>
      </path>

      <circle cx=18 cy=18 r=18.9 stroke-width=1 stroke="black" fill="none"></circle>
      <circle cx=18 cy=18 r=12.9 stroke-width=1 stroke="black" fill="none"></circle>
    </g>
    <text fill="#9d9d9d" x="18" y="8" stroke="#9d9d9d" class="txt3" stroke-width=1>1024</text>
  </svg>
  
  <svg width="360" height="360" viewBox="-3 -3 41 41">
      <defs>
        <radialGradient id="lg1" gradientUnits="objectBoundingBox" cx=50% cy=5% >
        <stop offset="0%" stop-color="red" />
      <stop offset="100%" stop-color="gold" />
    </linearGradient>
    </defs>
    <g class="group1">
      <path
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
        fill="none"
        stroke="url(#lg1)"
        stroke-width="5"
        stroke-linecap=round
        >
        <animate attributeName="stroke-dasharray" dur="1s" from="0, 100" to="70, 100" fill="freeze"/>
      </path>
      <path
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831"
        fill="none"
        stroke="white"
        stroke-width="5.25"
        stroke-linecap=round
        stroke-dasharray="0,100"
        >
      </path>

      <circle cx=18 cy=18 r=18.9 stroke-width=1 stroke="black" fill="none"></circle>
      <circle cx=18 cy=18 r=12.9 stroke-width=1 stroke="black" fill="none"></circle>
    </g>
    <text fill="#9d9d9d" x="8" y="21" stroke="#9d9d9d" stroke-width=1>1024</text>
  </svg>
  
  
  <svg class="origami" width="360" height="360" viewBox="-3 -3 41 41">
    <g class="group2">
      <path
        d="M18 2.0845
          a 15.9155 15.9155 0 0 1 0 31.831
          a 15.9155 15.9155 0 0 1 0 -31.831"
        fill="none"
        stroke="red"
        stroke-width="5"
        stroke-linecap=round
        >
        <animate attributeName="stroke-dasharray" dur="12s" from="0, 100" to="100, 100" fill="freeze"/>
      </path>
<!--       <path
        d="M18 2.0845 a 15.9155 15.9155 0 0 1 0 31.831"
        fill="none"
        stroke="white"
        stroke-width="5.25"
        stroke-linecap=round
        stroke-dasharray="0,100"
        >
      </path> -->
<!--        ONE MORE RED DOT, THAT WOULD FILL 100%-->

      <circle cx=18 cy=18 r=18.9 stroke-width=1 stroke="black" fill="none"></circle>
      <circle cx=18 cy=18 r=12.9 stroke-width=1 stroke="black" fill="none"></circle>
    </g>
    <text fill="#9d9d9d" x="6" y="20" stroke="#9d9d9d" class="txt2" stroke-width=.3>Кетчуп</text>
  </svg>
</div>

svg{
  width: 200px;
  height: 200px;
}
text{
  font-size: 10px;
}
.txt2{
  font-size: 6px;
  letter-spacing: 1px;
}
.txt3{
  writing-mode: tb;
  glyph-orientation-vertical: 90;
}
.group1{
  animation: rotation 4s infinite linear;
  transform-origin: 18px 18px;
  
}
@keyframes rotation {
    from {
        transform: rotate(0deg);
    }
    to {
        transform: rotate(359deg);
    }
}

*{
  margin: 0;
}