Как вычислить координаты css animation?

Question

[Deador]

Всем привет. Задача сделать прелоадер из логотипа и возникло 2 вопроса.

1) Как позиционировать логотип по центру? Пытаюсь через flexbox, встает по горизонтали, а по вертикали нет. Прикрепляю фрагмент кода.

2) У меня есть логотип, я хочу сделать css анимацию так, что бы его элемент (круг) двигался по осям (сначала по одной синей штуке справа налево, потом по другой). Пытался через сделать через translate и понял что мне нужно как-то получить координаты движения, что бы задать их. Подскажите, что и как делать что бы получить нужный результат? Логотип так же прикрепляю. Заранее спасибо!

#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

[Deador]

Пришел к выводу что нужно делать через animateMotion. Может кто подсказать что означают эти цифры в пути d="M10,110 A120,120 -45 0,1 110 10 A120,120 -45 0,1 10,110"? Информации гугл не выдал.

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"

Comments

[Deador]

Нашел, оно уже есть в нарисованной svg.

Answer 2

[drawnofmymind]

Надо через getBoundingClientRect() делать