Is there a way to have pi in a CSS calc?

You have an acces to PI variable in sass today. source

@use 'sass:math';

$d: 10;
$yourStuff: math.$pi * $d;

However, as others mentioned, it would still be an aproximated PI value, not a real-real PI. It's a decent approximation though:

@debug math.$pi; // 3.1415926536

You can use something approximate, depending the accuracy you need:

22/7 = 3.14

377/120 = 3,142

355/113 = 3,141592

No.

Consider that the value will be rounded anyway as computers cannot fully realize all numbers. Just use a lengthy approximation for pi:

3.141592653589793

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. Well, not any more

This would work like:

: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.