Как анимировать SVG-букву X, чтобы она выглядела так, как будто она нарисована? ⇐ CSS

[Anonymous]

Этот Codepen делает именно то, что я хочу, но мне хотелось бы понять, почему он работает именно так.

Я понимаю общую концепцию линейной анимации и успешно анимировал букву О, которая представляет собой одиночный штрих. Однако анимация смещения тире от длины линии до нуля, похоже, не работала для X, у которого есть два пересекающихся штриха. (Как вы понимаете, здесь я создаю игру «Крестики-нолики».)

Эта часть CSS кода Codepen поставила меня в тупик:

#path2 { удар-дашаррай: 430; смещение штриха-тире: 800; анимация: x 0,6 с линейная; режим анимации-заполнения: вперед; } #path3 { удар-дашаррай: 430; смещение штриха-тире: 800; анимация: x 0,6 с линейная; режим анимации-заполнения: вперед; анимация-задержка: 0,3 с; } @ключевые кадры х { от { удар-дашаррай: 430; } к { инсульт-дашаррай: 400; } } Как они пришли к этим значениям для stroke-dasharray и stroke-dashoffset и почему они работают?
Что я пробовал
С помощью собственного CSS я пытался сделать то же самое, что и для O. 50 — это приблизительный размер каждой строки:

#x-line-1 { инсульт-дашаррай: 50; смещение штриха-тире: 50; анимация: draw-x 0,6 с линейно вперед; } #x-line-2 { инсульт-дашаррай: 50; смещение штриха-тире: 50; анимация: draw-x 0,6 с линейно вперед; задержка анимации: 0,3 с; } @keyframes draw-x { от { инсульт-дашаррай: 50; } к { инсульт-дашаррай: 0; } } Мне хотелось бы понять, почему это не работает.