Как бы вы воссоздали трехмерный шестиугольный индикатор выполнения в React Native? [закрыто] ⇐ CSS

[Anonymous]

Привет всем
Я создаю мобильное приложение с помощью React Native.
Я борюсь с внешним компонентом и буду очень признателен за советы.
Мне нужно воссоздать шестиугольный компонент загрузки/прогресса, созданный с помощью IA с помощью PNG. Он состоит из двух независимых индикаторов выполнения (два цвета), расположенных слоями одинаковой формы.
Он состоит из:

• Внешнего шестиугольника
• Внутреннего шестиугольника (немного меньшего размера, с интервалом между ними)
• Двух независимых индикаторов выполнения (два набора цветов)
• 3D/глубина эффект с использованием теней и света (здесь я застрял)

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

• Это динамический компонент (прогресс меняется), поэтому статическое изображение не подходит достаточно.
• Шестиугольная форма + освещение + тени усложняют задачу.

Я приложу:

• Ожидаемый результат
• Моя текущая плоская реализация

Мой вопрос:

• Любые советы по работе с 3D-эффектом света/тени чисто?

Большое спасибо за уделенное время
Любые советы и указания приветствуются.
Ожидаемое изображение шестиугольного компонента

Подробнее здесь: https://stackoverflow.com/questions/798 ... act-native