Circles

Visual exploration of a filled circle in a circle. The outer radius stays the same throughout.

We imagine a line from the center to the boundary of the enclosing circle. We mark two points on this line: The boundary between inner circle and the buffering space, and the boundary between buffering space and the outer circle. Let’s call them u and v.

0% ####.......## 100%
   ----u
   -----------v

We see that $0 <= u <= v <= 100%$.

The SVG code for this exploration was generated by the following code:

# circles.py

def c(x, y, r, u, v):
	dark  = '#000000'
	light = '#ffffff'

	string = f'<circle cx="{x}" cy="{y}" r="{int(r)}" fill = "{dark}" />\n'
	string = string + f'<circle cx="{x}" cy="{y}" r="{int(v * r)}" fill = "{light}" />\n'
	string = string + f'<circle cx="{x}" cy="{y}" r="{int(u * r)}" fill = "{dark}" />\n'
	return string

content = ""
y = 50
for v in [10, 30, 50, 70, 90]:
	x = 50
	for u in [10, 30, 50, 70, 90]:
		content = content + c(x, y, 40, (u / 100.0) * (v / 100.0), v / 100.0)
		content = content + "\n"
		x = x + 100
	y = y + 100

svg = f"""
<svg width="500" height="500">
{content}
</svg>
"""

print(svg)