Как нарисовать SVG круг с перетаскиваемой границей-заливкой?

Question

[faragly]

Здравствуйте! Я совсем не разбираюсь в svg, вопрос уверен непонятный, но попробую пояснить. Есть такое приложение на смартфонах фирмы Samsung S Health и в нем есть функция отслеживания сна, очень приглянулся контрол выбора промежутка времени (скрин прилагаю):


Но для меня это большая проблема, так как я не знаком с svg, нарисовал circle (использую Snapsvg) и другой маленький кружок, необходимо сделать вариант как в контроле, а именно:
1. Круг с серой обводкой
2. 2 маленьких кружка с фиолетовой заливком, которые могут перетаскиваться по обводке серого круга
3. Изменять цвет заливки для промежутка между 2 маленькими кружками
4. Полоски маленькие межчасовые и часовые

Вот по ссылке есть только первый пункт codepen.io/faragly/pen/WxrQZR
SVG для меня темный лес, очень прошу помощи в реализации контрола.

Comments

[copal]

С точки зрения svg это очень просто, так как даже маски не нужны. Вы рисуете серый круг, по верх него синий и последний в центре светло серый. затем Вы должны сделать драг с ограничением по радиусу. И при драге маленких кружочков Вы должны перерисовывать средний синий слой от центра до драг элементов.
Раз никогда не работали, то я рад за Вас ведь сейчас впал этот шанс! Начните с того что создайте функцию которая будет рисовать кусочек пиццы по трем точкам.