SnippetSpace SnippetSpace - 5 months ago 24
CSS Question

SVG circle has a gap

I am trying to build a pie chart using SVG and some trickery.



.pie {
border-radius: 50%;
transform: rotate(-90deg);
}
.pie .background {
fill: none;
stroke: #eaeaea;
stroke-width: 3;
stroke-dasharray: 100 100;
}
.pie .chart {
fill: none;
stroke: #f73319;
stroke-width: 3;
stroke-dasharray: 0 100;
animation: 2s linear slice;
animation-fill-mode: forwards
}
@keyframes slice {
to {
stroke-dasharray: 75 100;
}
}

<svg viewBox="0 0 64 64" class="pie">
<circle class="background" r="25%" cx="50%" cy="50%"></circle>
<circle class="chart" r="25%" cx="50%" cy="50%"></circle>
</svg>





JSFiddle.

The code is quite simple: I am using
stroke-dasharray
to have a dash that covers the whole circle and can be adjusted to make a slice. However, for some reason none of the browsers “close” the circle.

If you want to adjust the pie chart
%
, you can change the first number in

stroke-dasharray: 75 100;


The second number specifies the gap between different dashes. The reason it is at
100
is because it is equal to the radius of the circle which is:

radius * width * 2 * pi
= 0.25 * 64 * 2 * pi
= 100.53

Answer

Your circle is r="25%" in a viewBox="0 0 64 64" that means it has a radius of 16 (25% of 64)

The circumference of a circle is 2 * PI * r which for r=16 is 100.53 i.e. slightly larger than 100 so the first dasharray value of 100 does not complete the circle. Just make the first value 100.53 and it will draw all the way round.

.pie{
            border-radius:50%;
            transform: rotate(-90deg);
        }
        .pie .background{
            fill:none;
            stroke:#eaeaea;
            stroke-width:3;
            stroke-dasharray:100.53 100;
           
        }
         .pie .chart{
            fill:none;
            stroke:#f73319;
            stroke-width:3;
            stroke-dasharray:0 100;
            animation: 2s linear slice ;
            animation-fill-mode:forwards
        }
        @keyframes slice{
            to{stroke-dasharray:100.53 100;}
        }
<svg viewBox="0 0 64 64" class="pie">
    <circle class="background" r="25%" cx="50%" cy="50%">

    </circle>
       <circle class="chart" r="16" cx="50%" cy="50%">

    </circle>
    
</svg>

Comments