Is there a way to have pi in a css calc

Question

I have an SVG circle animation for a progress bar where the

stroke-dashoffset

is animated from

0,radius

to

radius,0

(for 0% to 100%). The equation for the length of the radius of a circle is

pi * d

. Is there any way to use a CSS

calc

function where it can use a value of pi, rather than just a rounded value (like 3.14)?

Answer 1

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.

Is there a way to have pi in a css calc

Sign up