There are just a few basic mathematical properties needed when placing elements in a circular layout.

Transform the center of the circle

Most coordinate systems place the origin in one corner of a rectangle, for eg. SVG places the origin at the top-left corner of the SVG element.

If you were to directly start placing elements using the default origin, you would have to offset each coordinate with respect to the placement of the center of the circle. Not only is this cumbersome, it makes placing the circle at a different location more difficult, especially if you have hard-coded the center's coordinates instead of using variables.

It is therefore much more preferable to transform the container element of the circle to offset it such that the origin is at the center of the circle.

All coordinate calculations can now be with respect to the center, and even if you were to reposition the circle, all it would require would be to change the transform so that the origin correctly lies at the new center.

In SVG, this is all relatively very straight forward by placing all the circular elements within a parent <g> tag with a transform attribute which translates along the x and y axis. For eg. Consider a very simple scenario where you have a SVG based chart which is 1000px wide and 1000px tall, you could fit a circle with a radius of 500px neatly within this chart, if you placed the center of the circle at coordinates [500, 500]. This can be done by placing all elements of the circle within a group translated by 500px along each axis as shown below