Как нарисовать дугу на svg для сайта?

Посмотрите, пожалуйста, как можно нарисовать такую дугу?
Любая помощь важна.

Ответ

Решение с использованием stroke-dasharray и stroke-dashoffset
Идея заключается в том, чтобы показывать только часть окружности, а остальную часть скрывать пробелом stroke-dasharray ="314 314" Первая цифра это - длина штриха, вторая цифра - длина пробела. Эти цифры выбраны не случайно, - так как длина окружности при радиусе 100px равна: c = 2*P*R = 628px
Для окружности SVG считает началом пути положительную ось X-ов. Но нам надо рисовать от оси Y-ов. Поэтому поворачиваем нашу окружность против часовой стрелки на 90 градусов

Далее делаем расчет длины для зеленой (R=115px) и синей окружностей (R=130px) Для зеленой длина окружности равна = 722px Для синей окружности равна = 816px

Далее необходимо добавить три четверти окружностей с радиусами: 100px, 115px 130px Идея та же - используем атрибут stroke-dasharray ="157 471" , где 157 - длина штриха, равная одной четверти длины окружности при радиусе равном - 100px 471 - длина пробела равная 3/4 длины окружности
для двух других окружностей с большими радиусами цифры будут другие. Полная длина окружности вычисляется по формуле - C = 2*P*R

Анимация SVG изображения
Для анимации совместно используются атрибуты stroke-dasharray и stroke-dashoffset
На каждый атрибут применена отдельная анимация изменения параметров от нуля до максимального значения - values="0;314"
Запуск анимации происходит по клику на svg изображении - begin="svg1.click" Анимации цветных кругов идут последовательно друг за другом Например: условием запуска зелёного круга является окончание анимации пурпурного круга, плюс пауза 0.25s
begin="purle1.end+0.25s"