Круговые диаграммы: переделал на SVG

src/blocks-demo.html

@@ -1460,16 +1460,20 @@
       <h2 class="blocks-library__item-title">Круговые диаграммы</h2>
 
       <div class="pie-chart">0%</div>
-      <div class="pie-chart">20%</div>
-      <div class="pie-chart">40%</div>
+      <div class="pie-chart" data-border="4">20%</div>
+      <div class="pie-chart" data-size="200" data-border="10">40%</div>
       <div class="pie-chart">90%</div>
       <div class="pie-chart">80%</div>
+      <div class="pie-chart">100%</div>
+      <div class="pie-chart">110%</div>
 
       <div class="blocks-library__code-wrapper">
         <span class="blocks-library__code-show-trigger" title="Показать код"><i class="blocks-library__code-icon"></i></span>
         <div class="blocks-library__code">
           <pre class="code">
-            <code>&lt;div class="pie-chart">20%&lt;/div></code>
+            <code>&lt;div class="pie-chart">0%&lt;/div></code>
+            <code>&lt;div class="pie-chart" data-border="4">20%&lt;/div></code>
+            <code>&lt;div class="pie-chart" data-size="200" data-border="10">40%&lt;/div></code>
           </pre>
         </div>
       </div>

src/blocks/pie-chart/pie-chart.js

 document.addEventListener('DOMContentLoaded', function(){
 
-  // Автор кода — Лия Веру
-
   function $$(selector, context) {
     context = context || document;
     var elements = context.querySelectorAll(selector);
     return Array.prototype.slice.call(elements);
   }
 
-  $$('.pie-chart').forEach(function(pie) {
-    var p = pie.textContent;
-    pie.style.animationDelay = '-' + parseFloat(p) + 's';
-    pie.setAttribute('data-percent', p)
-  });
+  var charts = $$('.pie-chart');
+
+  for (var i = 0; i < charts.length; i++) {
+    var size = charts[i].getAttribute('data-size');
+    if(!size) size = 100;
+    var border = charts[i].getAttribute('data-border');
+    if(!border) border = 20;
+    var radius = (size / 2) - (border / 2);
+    var fullStroke = 2 * 3.141592 * radius;
+    var percentText = parseFloat(charts[i].textContent);
+    var percent = fullStroke / 100 * percentText;
+    var nameSpace = 'http://www.w3.org/2000/svg';
+    var svg = document.createElementNS(nameSpace, 'svg');
+    var circle = document.createElementNS(nameSpace, 'circle');
+    var circleBack = document.createElementNS(nameSpace, 'circle');
+    var title = document.createElementNS(nameSpace, 'title');
+    var span = document.createElement('span');
+    span.className = 'pie-chart__descr';
+    span.innerHTML = charts[i].textContent;
+
+    svg.setAttribute('class', 'pie-chart__svg');
+    svg.setAttribute('viewBox', '0 0 ' + size + ' ' + size);
+    svg.setAttribute('width', size);
+    svg.setAttribute('height', size);
+    circleBack.setAttribute('r', (size / 2));
+    circleBack.setAttribute('class', 'pie-chart__circle-back');
+    circleBack.setAttribute('cx', size / 2);
+    circleBack.setAttribute('cy', size / 2);
+    circle.setAttribute('class', 'pie-chart__circle');
+    circle.setAttribute('r', radius);
+    circle.setAttribute('cx', size / 2);
+    circle.setAttribute('cy', size / 2);
+    circle.setAttribute('stroke-dasharray', percent + ' ' + fullStroke);
+    circle.setAttribute('stroke-width', border);
+    title.textContent = charts[i].textContent;
+
+    charts[i].textContent = '';
+    svg.appendChild(title);
+    svg.appendChild(circleBack);
+    svg.appendChild(circle);
+    charts[i].appendChild(svg);
+    charts[i].appendChild(span);
+  }
 
 });

src/blocks/pie-chart/pie-chart.scss

@@ -8,65 +8,31 @@ $font-size:                   14px !default;
 $gray-light:                  hsl(0, 0%, 60%) !default;
 $gray-lighter:                hsl(0, 0%, 80%) !default;
 
-.pie-chart {
+.js .pie-chart {
 
   $block-name:                &; // #{$block-name}__element
 
   display: inline-block;
   position: relative;
-  width: 100px;
-  line-height: 100px;
-  border-radius: 50%;
-  background: $gray-lighter;
-  background-image: linear-gradient(to right, transparent 50%, $gray-light 0);
-  color: transparent;
-  font-size: 0;
-  text-align: center;
 
-  &:before {
-    content: '';
-    position: absolute;
-    top: 0;
-    left: 50%;
-    width: 50%;
-    height: 100%;
-    border-radius: 0 100% 100% 0 / 50%;
-    background-color: inherit;
-    transform-origin: left;
-    animation: pie-chart-spin 50s linear infinite, pie-chart-bg 100s step-end infinite;
-    animation-play-state: paused;
-    animation-delay: inherit;
+  &__svg {
+    display: block;
+    transform: rotate(-90deg);
   }
 
-  &:after {
-    content: attr(data-percent);
-    position: absolute;
-    z-index: 1;
-    top: 50%;
-    left: 50%;
-    width: 60%;
-    height: 60%;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    transform: translate(-50%, -50%);
-    border-radius: 50%;
-    background-color: #fff;
-    font-size: $font-size;
-    color: $text-color;
+  &__circle-back {
+    fill: $gray-lighter;
   }
 
-  @keyframes pie-chart-spin {
-
-    to {
-      transform: rotate(0.5turn);
-    }
+  &__circle {
+    fill: $gray-lighter;
+    stroke: $gray-light;
   }
 
-  @keyframes pie-chart-bg {
-
-    50% {
-      background: $gray-light;
-    }
+  &__descr {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
   }
 }