Как создать определенную конфигурацию, приведенную ниже в HTML?

Для определенного проекта я хочу создать конфигурацию, как показано ниже, в изображении в HTML.

введите описание изображения здесь

Это круговое кольцо (ограниченное двумя кружками), разделенное на 10 равных ячеек, и каждая ячейка имеет разный цвет (из 10 разных цветов). Каждой ячейке также соответствует цифра (0-9), и фиксируется положение цифр (например: верхняя ячейка с черным цветом имеет цифру «0», а следующая ячейка имеет цифру «1» в часовом направлении). Цвет каждой ячейки должен динамически меняться (на каждом сеансе), и все ячейки имеют уникальные цвета из 10 разных цветов. Я хочу написать для него HTML-код.

Мой подход: сначала я рисую два круга и делю на 10 равных ячеек с использованием геометрии линии. но проблема в том, как заполнить цвет в каждой ячейке!

Какие-либо предложения !!! Пожалуйста, дайте мне HTML-код или правильный подход для этого.

есть плагин под названием Set Text on a Circle , он может быть вам полезен, попробуйте здесь http://css-tricks.com/set-text-on-a-circle/