$\pi$ in terms of $4$?
As I mentioned in the comments, the sizes of the squares are a little more complicated than what you're hoping for. I don't know of a simple expression for the size of each square, but you can get each one by solving a quadratic equation. I wrote a program to do so; it draws all the squares whose sizes are above a small threshold. Here's the result. Hope it helps!
Details on the program: for a point $(0,0)\leq(x,y)\leq(1,1)$, we want to find a square with one vertex at $(x,y)$ and the other on the sphere $x_0^2+y_0^2=1$. Writing $b=y-x$, the condition that the two points form a square means that $y_0=x_0+b$. Substituting, we get $2x_0^2+2bx_0+b^2-1=0$. The solution is given by the quadratic equation: $x_0=\frac14\left(-2b+\sqrt{4b^2-4(2)(b^2-1)}\right)$, and then we get $y_0$ from $y_0=x_0+b$. Now draw the square between $(x,y)$ and $(x_0,y_0)$ and repeat the process from each of the points $(x,y_0)$ and $(x_0,y)$.
Here's some C++ code to generate an SVG fragment:
using namespace std;
void box(double x1, double y1, double x2, double y2, int level)
{
cout
<< "<rect x=\"" << min(x1, x2)
<< "\" y=\"" << min(y1, y2)
<< "\" width=\"" << abs(x1-x2)
<< "\" height=\"" << abs(y1-y2)
<< "\"";
switch (level % 3)
{
case 0: cout << " fill=\"red\""; break;
case 1: cout << " fill=\"green\""; break;
case 2: cout << " fill=\"blue\""; break;
}
cout << " />" << endl;
}
void boxes(double x1, double y1, double x2, double y2, int level)
{
double r = 300.0;
x1 *= r;
y1 *= r;
x2 *= r;
y2 *= r;
box(r+x1,r+y1,r+x2,r+y2, level);
box(r+x1,r-y1,r+x2,r-y2, level);
box(r-x1,r+y1,r-x2,r+y2, level);
box(r-x1,r-y1,r-x2,r-y2, level);
}
void advance(double x, double y, double& ox, double& oy)
{
const float b = y - x;
ox = (-2*b + sqrt(4*b*b - 8*(b*b-1))) / 4;
oy = ox + b;
}
void drawlevel(int level, double x, double y)
{
double ox, oy;
advance(x, y, ox, oy);
boxes(x, y, ox, oy, level);
if (abs(x-ox) > 0.0004)
{
drawlevel(level + 1, x, oy);
drawlevel(level + 1, ox, y);
}
}
int main()
{
drawlevel(0, 1, 1);
}