How to calculate css animation coordinates?

Question

css

Hello. The task was to make a preloader from the logo and 2 questions arose.

1) How to position the logo in the center? I'm trying through flexbox, it rises horizontally, but not vertically. I am attaching a code snippet.

2) I have a logo, I want to make a css animation so that its element (circle) moves along the axes (first one blue thing from right to left, then another). I tried to do it through translate and realized that I need to somehow get the coordinates of the movement in order to set them. Tell me what and how to do to get the desired result? I'm attaching the logo. Thanks in advance!

#loader {
height: 100%;
margin: 0;
padding: 0;
display:flex;
align-items: center;
justify-content: center;
}

#loader .container {


}

#loader .letter {
position: absolute;
}

#loader .elipse {
padding-left: 60px;
padding-top: 40px;

Answer 1

I came to the conclusion what needs to be done through animateMotion. Can anyone tell me what these numbers mean in the path d="M10,110 A120,120 -45 0.1 110 10 A120,120 -45 0.1 10.110"? Google did not provide any information.
path id="theMotionPath" stroke="lightgrey" stroke-width="2" fill="none"
d="M10,110 A120,120 -45 0.1 110 10 A120,120 -45 0.1 10.110"

Answer 2

It is necessary to do through getBoundingClientRect ()