Как сделать такую анимацию css?

Question

[nen0y]

Нужна анимация на подобии "змейки" которая ползает по кругу.

Answer 1

[Антон Усачев]

Есть, конечно, и более гибкие варианты на svg, но можно и на чистом цсс так:

Comments

[nen0y]

Спасибо, очень помогли

[Антон Усачев]

nen0y, если у контейнера будут другие размеры, нужно поиграться шириной/высотой и позицией ::before. А чтобы точно все влезало, я обновил codepen.

[nen0y]

Антон Усачев, а если нужно, что-бы фон между блоком и линией был прозрачным, то как это реализовать (например если фон красный, то будет видно белый ободок вокруг блока с контентом, а нужно что-бы был прозрачный)

[Антон Усачев]

nen0y,