:root {
  --radius: 25;
  --circumference: calc(2 * 3.142 * var(--radius));
  --share: 0.25;
  --arc_deg: calc(var(--share) * var(--circumference));
  --rotation: calc(var(--share) * 360deg);
}

svg {
  margin: 0 auto;
  border: 4px green solid;
  width: 20%;
  height: auto;
  position: relative;
}

.jw-circle {
  fill: transparent;
  stroke-width: calc(var(--radius) * 2);
  r: var(--radius);
  cx: calc(var(--radius) * 2);
  cy: calc(var(--radius) * 2);
  transform-origin: center;
}

/* #arc-1 {
	stroke: #900;

	--share: 0.25;
	--arc_deg: calc(var(--share) * var(--circumference));
	stroke-dasharray: var(--arc_deg), var(--circumference);

	--share_sum: 0;
	--rotation: calc(var(--share_sum) * 360deg);
	transform: rotate(var(--rotation));
}

#arc-2 {
	stroke: #090;

	--share: 0.25;
	--arc_deg: calc(var(--share) * var(--circumference));
	stroke-dasharray: var(--arc_deg), var(--circumference);

	--share_sum: 0.25;
	--rotation: calc(var(--share_sum) * 360deg);
	transform: rotate(var(--rotation));
}

#arc-3 {
	stroke: #009;

	--share: 0.35;
	--arc_deg: calc(var(--share) * var(--circumference));
	stroke-dasharray: var(--arc_deg), var(--circumference);

	--share_sum: 0.5;
	--rotation: calc(var(--share_sum) * 360deg);
	transform: rotate(var(--rotation));
}
 */