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 {
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
``````

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{
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>``````

Source (Stackoverflow)