<style>
.mysvg { border: 1px solid gray; fill: none; stroke: steelblue; }
</style>

<svg class="mysvg" width="200" height="200">
	<circle id="circle" cx="100" cy="100" r="90"></circle>
</svg>
<svg class="mysvg" width="200" height="200">
	<path id="cPath" d="M10 100 H190"></path>
</svg>
<div id="pathMsg"></div>

<script>

let createPath = (eCircle) => {
	let x = 1*eCircle.getAttribute('cx'),
		y = 1*eCircle.getAttribute('cy'),
		r = 1*eCircle.getAttribute('r');
	return `M${x-r} ${y} A${r} ${r} 0 1 1 ${(x + r)} ${y} A${r} ${r} 0 1 1 ${x-r} ${y}`;
};

cPath.setAttribute('d',createPath(circle));
pathMsg.innerText = createPath(circle);

</script>