Реализовать полоски и круги с цветными сегментами, как дано в 3D макете дизайнера?

Question

Подскажите как реализовать?
На 1 скрине фотошоп показывает, что это картинка или делать текстом лучше?
На 2 скрине, как лучше сделать полоску с картинкой, полоску с кружком отдельно?
Через div сделать или слить вместе с картинкой лучше?
скрин-1

скрин-2

Answer 1

Разную длину цветной полоски вокруг окружности можно реализовать с помощью: stroke-dasharray и stroke-dashoffset

Регулирование длины полоски осуществляется изменением параметров этих атрибутов.

Например:

stroke-dashoffset - (отступ от начала линии), при изменении параметра от максимума до нуля, можно увеличивать видимую часть линии от 0 до полной длины.

stroke-dasharray - чередование черточек (1 параметр) и пробелов (2-ой параметр)

Изменяя первый параметр можно изменять длину черты, при этом нужно уменьшать 2-ой параметр - пробел.

В примере ниже - stroke-dasharray="83.7 167.5, где 83.7 длина черты, 167.5 - пробел

Сумма этих двух величин должна быть равна длине целой окружности 2 * 3.14 * 40 = 251.2

<svg width="50%" height="50%" viewBox="0 0 100 100">
<!--Серая окружность -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke="#d3d3d3" stroke-width="1" />
<!-- Цветной сегмент -->
<path id="progress" stroke-width="3" stroke="#4596AB" stroke-dasharray="83.7 167.5 " fill="none"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
  </path>
<text id="count" x="50" y="50" fill="#000" text-anchor="middle" dy="7" font-size="20">30%</text>
</svg>

Пример - 75% заполнения

stroke-dasharray="188.4 62.8 " Сумма длин черты и пробела должна быть равна всей длине окружности 251.2

<svg width="50%" height="50%" viewBox="0 0 100 100">
<!--Серая окружность -->
<circle cx="50" cy="50" r="40" fill="transparent" stroke="#d3d3d3" stroke-width="1" />
<!-- Цветной сегмент -->
<path id="progress" stroke-width="3" stroke="#4596AB" stroke-dasharray="188.4  62.8 " fill="none"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
  </path>
<text id="count" x="50" y="50" fill="#000" text-anchor="middle" dy="7" font-size="20">75%</text>
</svg>

Пример анимации

Здесь анимация роста цветной полоски достигается изменением параметров stroke-dasharray

progress.attr({strokeDasharray: '0, 251.2'});
Snap.animate(0,251.2, function( value ) {
    progress.attr({ 'stroke-dasharray':value+',251.2'});
}, 5000);

Длина черты увеличивается от 0 до полной длины окружности 251.2 соответственно пробел уменьшается от полной длины 251.2 до 0

var count = $(('#count'));
$({ Counter: 0 }).animate({ Counter: count.text() }, {
  duration: 5000,
  easing: 'linear',
  step: function () {
    count.text(Math.ceil(this.Counter)+ "%");
  }
});
var s = Snap('#animated');
var progress = s.select('#progress');
progress.attr({strokeDasharray: '0, 251.2'});
Snap.animate(0,251.2, function( value ) {
    progress.attr({ 'stroke-dasharray':value+',251.2'});
}, 5000);

body{text-align:center;font-family:sans-serif;background:#080808;}
svg{width:30%;}

<script src="https://cdnjs.cloudflare.com/ajax/libs/snap.svg/0.3.0/snap.svg-min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<svg id="animated" viewbox="0 0 100 100">
 <!-- Цветной сегмент -->
 <path id="progress" stroke-width="3" stroke="#4596AB" fill="none"
        d="M50 10
           a 40 40 0 0 1 0 80
           a 40 40 0 0 1 0 -80">
  </path>
  <!-- Белый круг, вокруг которого идёт заполнение цветного сегмента -->
  <circle cx="50" cy="50" r="38" fill="transparent" stroke="#fff" stroke-width="1"/>
   <!-- Вывод процентов внутри круга -->
  <text id="count" x="50" y="50" fill="#fff" text-anchor="middle" dy="7" font-size="20">100%</text>
</svg>