<!-- svg #1 -->
<svg class="circle-chart chart1" width="300" height="300"  xmlns="http://www.w3.org/2000/svg">
      <circle class="pie" stroke="#4285f4" stroke-width="20" stroke-dasharray="300,0" stroke-linecap="round" fill="none" cx="0" cy="0" r="63.66197723675813" />
          <text class="text" x="16" y="15.5" alignment-baseline="central" text-anchor="middle" font-size="1em">#1</text>
</svg>
<!-- svg #2 -->
<svg class="circle-chart chart2" width="300" height="300" viewBox="-73.66197723675813 -73.66197723675813 300 300" xmlns="http://www.w3.org/2000/svg">
      <circle class="pie" stroke="#4285f4" stroke-width="20" stroke-dasharray="300,0" stroke-linecap="round" fill="none" cx="0" cy="0" r="63.66197723675813" />
          <text class="text" x="0" y="0" alignment-baseline="central" text-anchor="middle" font-size="3em">#2</text>
</svg>

<!-- svg #3 -->
<svg class="circle-chart chart3" width="300" height="300" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg">
      <circle class="pie" stroke="#4285f4" stroke-width="20" stroke-dasharray="300,0" stroke-linecap="round" fill="none" cx="0" cy="0" r="63.66197723675813" />
          <text class="text" x="0" y="0" alignment-baseline="central" text-anchor="middle" font-size="3em">#3</text>
</svg>
<!-- svg #4 -->
<svg class="circle-chart chart4" width="300" height="300" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg">
      <circle class="pie" stroke-linecap="round" fill="none" cx="0" cy="0" r="63.66197723675813" />
          <text class="text" x="0" y="0" alignment-baseline="central" text-anchor="middle" font-size="3em">#4</text>
</svg>
<!-- svg #5 -->
<svg class="circle-chart chart5" width="300" height="300" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg">
      <circle id="chart5" class="pie" stroke-linecap="round" fill="none" cx="0" cy="0" r="63.66197723675813" />
 <animate 
           xlink:href="#chart5"
           attributeName="stroke-dashoffset"
           from="-400"
           to="0" 
           dur="6s"
           fill="remove"
           repeatCount="indefinite"
     />
     <text class="text" x="0" y="0" alignment-baseline="central" text-anchor="middle" font-size="3em">#5</text>
</svg>

<!-- svg #6 -->
<svg class="circle-chart chart6" width="300" height="300" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg">
   <circle class="pie1" stroke-linecap="butt" stroke="#c73e3c" fill="none" cx="0" cy="0" r="63.66197723675813" />
   <circle class="pie2" stroke-linecap="butt" stroke="#364f5e" fill="none" cx="0" cy="0" r="63.66197723675813" />
   <circle class="pie3" stroke-linecap="butt" stroke="#6eaab0" fill="none" cx="0" cy="0" r="63.66197723675813" />
   <circle class="pie4" stroke-linecap="butt" stroke="#d88d73" fill="none" cx="0" cy="0" r="63.66197723675813" />
   <circle class="pie5" stroke-linecap="butt" stroke="#9dcdb7" fill="none" cx="0" cy="0" r="63.66197723675813" />
   <text class="text" x="0" y="0" alignment-baseline="central" text-anchor="middle" font-size="3em">#6</text>
</svg>

<!-- svg #6 -->
<!-- <svg class="circle-chart chart7" width="300" height="300" viewBox="-150 -150 300 300" xmlns="http://www.w3.org/2000/svg">
      <circle id="chart7" class="pie" stroke-linecap="round" fill="none" cx="0" cy="0" r="63.66197723675813" />
     <text class="text" x="0" y="0" alignment-baseline="central" text-anchor="middle" font-size="3em">#7
  </text>
</svg> -->
body { 
  font-family: sans-serif;
  background: lightgray; 
  max-resolution: 10 auto;
}

svg {
  border: 10px solid #fff;
}

.chart4 circle {
  stroke: #4285f4;
  stroke-width: 20;
  stroke-dasharray: 400;
  stroke-dashoffset: 400;
  -webkit-animation:  fillup 5s linear infinite;
  animation: fillup 3s linear 1s infinite;
}

@-webkit-keyframes fillup {
  to {
    stroke-dashoffset: 0;
  }
}

@keyframes fillup {
  to {
    stroke-dashoffset: 0;
  }
}
.chart5 circle {
  stroke: #4285f4;
  stroke-width: 20;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}

.chart6 circle {
  transform:rotate(-90deg);
  stroke-width: 20;
/*   -webkit-animation:  fillup 5s linear infinite;
  animation: fillup 3s linear 1s infinite; */
}

.chart6 circle.pie1{
  stroke-dasharray: 52.30288836846214 347.69711163153784;
  stroke-dashoffset: 0;
}
.chart6 circle.pie2 {
  stroke-dasharray: 48.39968774395004 351.60031225604996;
  stroke-dashoffset: 347.69711163153784;
}
.chart6 circle.pie3 {
  stroke-dasharray: 36.53395784543326 363.46604215456676;
  stroke-dashoffset: 299.2974238875878;
}

.chart6 circle.pie4 {
  stroke-dasharray: 21.07728337236534 378.92271662763466;
  stroke-dashoffset: 262.76346604215456;
}

.chart6 circle.pie5 {
  stroke-dasharray: 241.68618266978922 158.31381733021078;
  stroke-dashoffset: 241.68618266978922;
}

.chart7 circle {
  stroke: #4285f4;
  stroke-width: 20;
  stroke-dasharray: 400;
  stroke-dashoffset: 0;
}
// magic

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.