CSS3 пончик Диаграмма

Question

Я создал скрипку простой кольцевой диаграммы: http://jsfiddle.net/4azpfk3r/217/

Как я могу получить пончик график, чтобы иметь красный контур и оценку/процент заполненного быть сплошными красным оставляя прозрачный/красный, описанный часть процента не забита?

CSS:

.background { 
    background: grey; 
} 

.item { 
    position: relative; 
    float: left; 
} 


.item h2 { 
    text-align:center; 
    position: absolute; 
    line-height: 125px; 
    width: 100%; 
} 


svg { 
    transform: rotate(-90deg); 
} 


.circle_animation { 
    stroke-dasharray: 440; 
    stroke-dashoffset: 440; 
} 


.html .circle_animation { 
    -webkit-animation: html 1s ease-out forwards; 
    animation: html 1s ease-out forwards; 
} 


.css .circle_animation { 
    -webkit-animation: css 1s ease-out forwards; 
    animation: css 1s ease-out forwards; 
} 


@-webkit-keyframes html { 
    to { 
     stroke-dashoffset: 80; 
    } 
} 


@keyframes html { 
    to { 
     stroke-dashoffset: 80; 
    } 
} 

Answer 1

Если я понять вашу проблему правильно, попробуйте добавить эту строку CSS:

#circle{fill:none;stroke:red;color:red}

Для типа бальной также быть в красном, добавить цвет имущество к h2:

.item h2 { 
    text-align:center; 
    position: absolute; 
    line-height: 125px; 
    width: 100%; 
    color:red; /*ADD RED COLOR TO SCORE*/ 
} 

Чтобы создать заголовок для оценки , Сначала дать ему класс: <p class="scoreHeader">Score: 76/100</p>

И стиль его, как вы хотите:

.scoreHeader{ 
    padding:10px; 
    background:red; 
    color:white; 
    font-weight:bold; 
} 

Answer 2

Проверьте мой пример здесь https://codepen.io/350d/pen/gxXyGB Идея заключается в том, чтобы использовать только border-color и rotation. Градиенты и анимации здесь не используются.