title: Build Circular Percentage chart
body: <p>I want to build response SVG circular chart, I have succeeded up to some extent.</p>
  
  <p>HTML</p>
  
  <pre><code>&lt;div&gt;
              &lt;p class="Project_Analytics_Heading text-center"&gt;
                  Time per Application
              &lt;/p&gt;
              &lt;svg viewBox="0 0 36 36" class="circular-chart"&gt;
  
                  &lt;path class="that-circle" stroke="#ffba00" stroke-dasharray="50" d="M18 2.0845
                                  a 15.9155 15.9155 0 0 1 0 31.831
                                  a 15.9155 15.9155 0 0 1 0 -31.831" /&gt;
  
                  &lt;path class="that-circle" stroke="#ff4858" stroke-dasharray="25" d="M18 2.0845
                                  a 15.9155 15.9155 0 0 1 0 31.831
                                  a 15.9155 15.9155 0 0 1 0 -31.831" /&gt;
  
                  &lt;path class="that-circle" stroke="#845cee" stroke-dasharray="25" d="M18 2.0845
                                  a 15.9155 15.9155 0 0 1 0 31.831
                                  a 15.9155 15.9155 0 0 1 0 -31.831" /&gt;
  
                  &lt;text x="18" y="20.35" class="percentage"&gt;50%&lt;/text&gt;
                  &lt;text x="13" y="25" class="percentage_done"&gt;iOS&lt;/text&gt;
  
              &lt;/svg&gt;
          &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>.circular-chart {
    display: block;
    margin: 5% auto;
    max-width: 80%;
    max-height: 240px;
    margin-bottom: 15%;
  }
  .that-circle {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
    box-shadow: 0 8px 25px 0 #e5e5e5;
  }
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
    }
  }
  
  .percentage {
    fill: #4285f4;
    font-size: 0.375em;
    text-anchor: middle;
    font-family: AvenirNext;
    font-weight: bold;
    font-style: normal;
    font-stretch: normal;
    line-height: 1;
    letter-spacing: normal;
  }
  .percentage_done {
    fill: #9b9b9b;
    font-size: 0.2em;
    font-family: AvenirNext;
    font-weight: 500;
    font-style: normal;
    font-stretch: normal;
    line-height: normal;
    letter-spacing: 0.1px;
  }
  </code></pre>
  
  <p>Getting Output</p>
  
  <p><a href="https://i.stack.imgur.com/Te9yw.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/Te9yw.png" alt=""></a></p>
  
  <p>Desired Output</p>
  
  <p><a href="https://i.stack.imgur.com/enXWK.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/enXWK.png" alt="enter image description here"></a></p>
  
  <p>I think there is an issue with the stroke-dash array.</p>
  
  <p>Comments are greatly appreciated.</p>
  
  <p>I have referred</p>
  
  <p><a href="https://medium.com/@pppped/how-to-code-a-responsive-circular-percentage-chart-with-svg-and-css-3632f8cd7705" rel="nofollow noreferrer">https://medium.com/@pppped/how-to-code-a-responsive-circular-percentage-chart-with-svg-and-css-3632f8cd7705</a></p>