Необходимо сверстать блок по макету. Шрифты в макете - Arial, Gotham Pro. Дополнительное задание 1: Элементы диаграммы реализовать на SVG. Дополнительное задание 2: анимировать движение цветных индикаторов от нулевого положения.
- Проект для удобства собран с помощью gulp.
- Вместо переменных в SCSS использую переменные в CSS. В будущем гораздо удобнее будет редактировать цвета.
- Можно было и не использовать SCSS, но хотелось сделать проект как можно быстрее.
- Пришлось переделать loyalty.svg, так как было слишком много кода от Inkscape. Figma замечательно сократила код.
- К шрифтам добавлено свойство font-display: swap, чтобы метрики гугла не ругались
- Знак процента сделан внутри цифры после точки. Позиционирование организовано через flexbox, что дало постоянное расположение по центру (тест проведен для цифр от 0 до 9)
- Диаграмма сделана на SVG.
- Разрыв круга сделан через свойство stroke-dashoffset(сдвиг) и повернут на 290 градусов с помощью атрибута transform.
- Для расчета длины линий круговой диаграммы использую формулу: (длина окружности - сдвиг)/100 * процент = результат, далее длина окружности - результат = сдвиг. Этот сдвиг мы применяем к линиям диаграммы.
- Для соответствия размера линейных графиков к процентам написан простенький скрипт с forEach.