I have an SVG circle animation for a progress bar where the
stroke-dashoffset
0,radius
radius,0
pi * d
calc
There's no such thing as a PI variable in CSS, unfortunately.
However..
You can make use of CSS variables to assign a number to it, downside to this is that it has a really, really bad browser support.
This would work like this:
:root {
--PI: 3.14159265358979; // enter the amount of digits you wish to use
}
.circle {
width: calc(100 * var(--PI));
}
The best solution would be to use a preprocessor such as SASS or Less to assign the PI variable to, this would look like the following example in SASS:
$pi: 3.14159265358979 // amount of digits you wish to use
.circle {
width: calc(100 * ${pi});
}
EDIT: As mentioned in the comments, some browsers (Safari + IE) round to 2 decimals, where Chrome and Firefox can round up to (at least) 4 decimals.