БЛОГ НА HUSL


Можно ли сверстать дугу с градиентом как на скриншоте?

Автор вопроса: Konstantin

Можно ли сверстать такой элемент?
Длину дуги нужно будет изменять в зависимости от положения стрелок часов. Наткнулся на такое решение http://jsfiddle.net/wun8T/1/, но оно не подошло, так как в нём нельзя сделать не закрашенным цветом остаток дуги. Вот градиент:

background: linear-gradient(354.14deg, #FF5FF4 7.15%, #E669F4 19.03%, #A684F4 44.32%, #41ADF4 80.67%, #11C1F4 96.99%);

Размер круга 336px x 336px Дуга на часах


Источник

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

Автор решения: Alexandr_TT

Градиент нужно применить не к фону, а к строке окружности, поэтому ваш градиент CSS преобразовываем в SVG linearGradient.

<linearGradient id="lg">
        <stop offset="7.15%" stop-color="#FF5FF4" />
         <stop offset="19.03%" stop-color="#E669F4" />
        <stop offset="44.32%" stop-color="#A684F4" />
        <stop offset="80.67%" stop-color="#41ADF4" />
      </linearGradient>

Обратите внимание на проценты заполнения и соответствующие им цвета, - они полностью совпадают с образцом градиента на CSS

Первый сплошной круг это основа, поверх которой ложится цветной неполный круг

Данные для расчета:

При радиусе r="190"
полная длина окружности равна 2 * PI * r или 2 * 3.1415 * 190 ~=1194px

На рисунке видно, что видимая часть окружности примерно 40% ~= 477 Обрезанная часть окружности 60% ~= 716

Поэтому stroke-dasharray="477, 716"

#back {
fill:none;
stroke:#CBD8E6;
stroke-width:14;
}
#progress {
fill:none;
stroke:#CBD8E6;
stroke-width:4;
stroke: url(#lg);
stroke-dasharray:477 716; 

}
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="450" viewBox="0 0 450 450" > 
 

    <defs>
      <linearGradient id="lg">
        <stop offset="7.15%" stop-color="#FF5FF4" />
         <stop offset="19.03%" stop-color="#E669F4" />
        <stop offset="44.32%" stop-color="#A684F4" />
        <stop offset="80.67%" stop-color="#41ADF4" />
      </linearGradient>
   </defs>  
 <circle id="back" cx="200" cy="200" r="190" />
  <circle id="progress" transform="rotate(-90 200 200)" cx="200" cy="200" r="190"  />
</svg>

→ Ссылка
Автор решения: Alexandr_TT

Анимации заполнением градиентом окружности

Анимация заполнения происходит синхронно с движением минутной стрелки

#1. Вариант решения SVG

Пояснения, что, где анимируется смотрите в комментариях к коду

Анимация начинается после клика

#back {
fill:#FCFCFC;
stroke:#CBD8E6;
stroke-width:14;

}
#progress {
fill:none;
stroke:#FFF3F3;
stroke-width:6;
stroke: url(#lg);
stroke-dasharray:0, 1193; 

}
text {
  font-size:54px;
  fill:#111;
  
  }
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="450" viewBox="0 0 450 450" > 
 

    <defs>
      <linearGradient id="lg">
        <stop offset="7.15%" stop-color="#FF5FF4" />
         <stop offset="19.03%" stop-color="#E669F4" />
        <stop offset="44.32%" stop-color="#A684F4" />
        <stop offset="80.67%" stop-color="#41ADF4" />
      </linearGradient> 
    
   </defs>  
 <circle id="back" cx="200" cy="200" r="190" />
         <!-- Крупные Черточки циферблата `12` -->
     <circle id="dash" cx="200" cy="200" r="160"  fill="none" stroke-dasharray="3.77, 80"  stroke="#290A58" stroke-width="25" /> 
       <!-- Мелкие Черточки циферблата `60` -->
     <circle id="dash" cx="200" cy="200" r="152"  fill="none" stroke-dasharray="1.91,14"  stroke="#290A58" stroke-width="10" /> 
          <!-- Цифры на циферблате -->
      <text x="177" y="85">12 </text>  
         <text x="310" y="220">3 </text>  
           <text x="188" y="320">6 </text> 
           <text x="65" y="218">9 </text>     
     
  <circle id="center" cx="200" cy="200" r="8"  fill="white" stroke="#290A58" stroke-width="3" /> 
                 <!-- Часовая стрелка -->
    <polyline points="200,215 200,40"   stroke="#290A58" stroke-width="6" stroke-linecap="round" />
      
            <!-- Минутная стрелка -->
      <polyline points="200,215 200,30"  stroke="#290A58" stroke-width="6" stroke-linecap="round" >
              <!-- Анимация вращения минутной стрелки -->
         <animateTransform attributeName="transform" type="rotate" begin="svg1.click" dur="24s" values="0 200 200;360 200 200" />
      </polyline>
  <circle id="progress" stroke-dashoffset="298.25" cx="200" cy="200" r="190"  >
              <!-- Анимация заполнения градиентом -->
     <animate attributeName="stroke-dasharray" begin="svg1.click" dur="24s" values="0,1193;1193,0" fill="freeze" />
   </circle>
</svg>

#2. Вариант решения CSS+SVG

Анимации Smil SVG заменены на анимации CSS

  • К анимации вращения минутной стрелки добавлена анимация часовой стрелки

В обоих анимациях центр вращения 200,200px

transform-origin:200px 200px ;
 transform-box: stroke-box;
  • Для анимации заполнения градиентом используется, как и в варианте smil SVG - stroke-dasharray.
@keyframes drawLine {
100%{stroke-dasharray:1193, 0}


#back {
fill:#FCFCFC;
stroke:#CBD8E6;
stroke-width:14;

}
#progress {
fill:none;
stroke:#FFF3F3;
stroke-width:8;
stroke: url(#lg);
stroke-dasharray:0, 1193;
animation:drawLine 24s linear forwards;
}
/*Анимация заполнения градиентом*/
@keyframes drawLine {
100%{stroke-dasharray:1193, 0}

} 

text {
  font-size:54px;
  fill:#111;
  }
  
 #minuteHand {
 fill:none;
 stroke:#290A58;
 stroke-width:8px;
 stroke-linecap:round;
 transform-origin:200px 200px ;
 transform-box: stroke-box;
 animation:minute 24s linear forwards;
 } 
 /*Анимация вращения минутной стрелки*/
 @keyframes minute {
 100% {transform:rotate(360deg);}
  }
  
   #hourHand {
  stroke:#290A58;
 stroke-width:10px;
 stroke-linecap:round;
 transform-origin:200px 200px ;
 transform-box: stroke-box;
 animation:Hand 24s linear forwards;
  }
  
  /*Анимация вращения часовой стрелки*/
 @keyframes Hand {
 100% {transform:rotate(30deg);}
  }
 
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="450" viewBox="0 0 450 450" > 
 

    <defs>
      <linearGradient id="lg">
        <stop offset="7.15%" stop-color="#FF5FF4" />
         <stop offset="19.03%" stop-color="#E669F4" />
        <stop offset="44.32%" stop-color="#A684F4" />
        <stop offset="80.67%" stop-color="#41ADF4" />
      </linearGradient> 
    
   </defs>  
 <circle id="back" cx="200" cy="200" r="190" />
         <!-- Крупные Черточки циферблата `12` -->
     <circle id="dash" cx="200" cy="200" r="160"  fill="none" stroke-dasharray="3.77, 80"  stroke="#290A58" stroke-width="25" /> 
       <!-- Мелкие Черточки циферблата `60` -->
     <circle id="dash" cx="200" cy="200" r="152"  fill="none" stroke-dasharray="1.91,14"  stroke="#290A58" stroke-width="10" /> 
          <!-- Цифры на циферблате -->
      <text x="177" y="95">12 </text>  
         <text x="310" y="220">3 </text>  
           <text x="188" y="320">6 </text> 
           <text x="65" y="218">9 </text>     
     
  <circle id="center" cx="200" cy="200" r="8"  fill="white" stroke="#290A58" stroke-width="3" /> 
                 <!-- Часовая стрелка -->
    <polyline id="hourHand" points="200,215 200,60" />
      
            <!-- Минутная стрелка -->
      <polyline id="minuteHand" points="200,215 200,30" />
          
  <circle id="progress" stroke-dashoffset="298.25" cx="200" cy="200" r="190"  />
   
</svg>

#3. Вариант анимации заполнения градиентом одновременно с движением секундной стрелки

В этом варианте заполнение дуги градиентом, привязано к перемещению секундной стрелки. Анимация дискретна, шаг заполнения и вращения стрелки определяет правило CSS

animation:Second 60s steps(60, end) infinite;

Шаг секундной стрелки равен - 1s За 60s секундная стрелка делает полный оборот.
Минутная стрелка сдвигается на одно деление.

#back {
fill:#FCFCFC;
stroke:#CBD8E6;
stroke-width:14;

}
#progress {
fill:none;
stroke:#FFF3F3;
stroke-width:8;
stroke: url(#lg);
stroke-dasharray:0, 1193;
animation:drawLine 60s steps(60, end)  infinite;
}
/*Анимация заполнения градиентом*/
@keyframes drawLine {
100%{stroke-dasharray:1193, 0}

} 

text {
  font-size:54px;
  fill:#111;
  }
 
#SecondHand {
 fill:none;
 stroke:red;
 stroke-width:4px;
 stroke-linecap:round;
 transform-origin:200px 200px ;
 transform-box: stroke-box;
 animation:Second  60s steps(60, end) infinite;
 } 
 /*Анимация вращения секундной стрелки*/
 @keyframes Second {
 100% {transform:rotate(360deg);}
  }
 
  #minuteHand {
 fill:none;
 stroke:#290A58;
 stroke-width:8px;
 stroke-linecap:round;
 transform-origin:200px 200px ;
 transform-box: stroke-box;
 animation:minute 3600s linear forwards;
 } 
 /*Анимация вращения минутной стрелки*/
 @keyframes minute {
 100% {transform:rotate(360deg);}
  }
  
 
  
   #hourHand {
  stroke:#290A58;
 stroke-width:10px;
 stroke-linecap:round;
 transform-origin:200px 200px ;
 transform-box: stroke-box;
 animation:Hand 3600s linear forwards;
  }
  
  /*Анимация вращения часовой стрелки*/
 @keyframes Hand {
 100% {transform:rotate(30deg);}
  }
<svg id="svg1" version="1.1" xmlns="http://www.w3.org/2000/svg" 
    xmlns:xlink="http://www.w3.org/1999/xlink" width="450" height="450" viewBox="0 0 450 450" > 
    <defs>
      <linearGradient id="lg">
        <stop offset="7.15%" stop-color="#FF5FF4" />
         <stop offset="19.03%" stop-color="#E669F4" />
        <stop offset="44.32%" stop-color="#A684F4" />
        <stop offset="80.67%" stop-color="#41ADF4" />
      </linearGradient> 
    
   </defs>  
 <circle id="back" cx="200" cy="200" r="190" />
         <!-- Крупные Черточки циферблата `12` -->
     <circle id="dash" cx="200" cy="200" r="160"  fill="none" stroke-dasharray="3.77, 80"  stroke="#290A58" stroke-width="25" /> 
       <!-- Мелкие Черточки циферблата `60` -->
     <circle id="dash" cx="200" cy="200" r="152"  fill="none" stroke-dasharray="1.91,14"  stroke="#290A58" stroke-width="10" /> 
          <!-- Цифры на циферблате -->
      <text x="177" y="95">12 </text>  
         <text x="310" y="220">3 </text>  
           <text x="188" y="320">6 </text> 
           <text x="65" y="218">9 </text>     
     
  <circle id="center" cx="200" cy="200" r="8"  fill="white" stroke="#290A58" stroke-width="3" /> 
                 <!-- Часовая стрелка -->
    <polyline id="hourHand" points="200,215 200,60" />
      
          <!-- Секундная стрелка -->
      <polyline id="SecondHand" points="200,215 200,30" />
            <!-- Минутная стрелка -->
      <polyline id="minuteHand" points="200,215 200,30" />
  <circle id="progress" stroke-dashoffset="298.25" cx="200" cy="200" r="190"  />
</svg>

→ Ссылка

licensed under cc by-sa 3.0 with attribution.