Как максимально просто создать фигуру как на изображении для последующей анимации?

Question

[historydev]

Нашёл парочку в гугле, пока разбираюсь, возможно есть решения попроще:

Answer 1

[Ivan Bogachev]

Вариант с градиентами - сложный для анимирования. Рисование линий со stroke-dasharray - это стандартный выбор. Но dash array может быть длинным, им можно описать самые разные последовательности линий и пробелов, так что если вам не нужны разные цвета, то можно сделать одну линию:

Comments

[historydev]

Очень круто, спасибо! А сложно будет реализовать отделение части в сторону?

[Ivan Bogachev]

historydev, Штрихи здесь не являются самостоятельными объектами - это все одна пунктирная линия. Можно увеличить радиус всего круга, но не вырвать из него кусок. Если вам нужно делить эту конструкцию на независимые части - придется иметь несколько кругов.

[historydev]

Ivan Bogachev, Спасибо! - я попробую

[historydev]

Ivan Bogachev,

Что-то получилось, разобрался с последовательностями, уже встречал проблему, контент не помещается внутри svg, а при увеличении viewbox увеличивается контент, как мне поместить его?

[Ivan Bogachev]

historydev,

при увеличении viewbox увеличивается контент,

Не очень понятен вопрос. С помощью viewBox мы определяем какую часть координатной плоскости из SVG нужно показывать в SVG-элементе на странице. Какой-нибудь viewBox='-25 -25 150 150' вполне подойдет, чтобы ваши круги показать.

P.S: Можно иметь одну SVG и несколько кругов в ней. Деление на несколько SVG не совсем понятно в текущем контексте.