Never use circle size to convey information

dabblet.css

/**
 * Never use circle size to convey information
 */

div {
	display: inline-flex; align-items: center; justify-content: center;
	width: 200px;
	aspect-ratio: 1 / 1;
	padding: 1em;
	background: radial-gradient(closest-side, hsl(220 10% 70%) calc(var(--p)), transparent 0) hsl(220 10% 90%);
	border-radius: 50%;
	font: bold 150%/1 system-ui;
	color: white;
	text-align: center;
}

dabblet.html

<div style="--p: 25%">25%</div>
<div style="--p: 50%">50%</div>
<div style="--p: 75%">75%</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"1","page":"css"}