Как сделать простую css маску?

Question

[mrdragon9000]

Подскажите как сделать маску для штуки как на скрине (нужна именно маска, т.к. необходимо будет изменять цвета точек через css)?
Думаю сделать div с градиентным фоном, а наверх наложить маску состоящую из этих кружков.
Помогите пожалуйста написать css для этой маски

Answer 1

[lukoie]

А почему не свг?

Comments

[mrdragon9000]

Если вы имеете ввиду отрисовка всех кружков через svg, то это не то что нужно.
Нужна отрисовать много подобных линий через js, с изменяющимся градиентом. У меня есть два числа - 65% и 35% (допустим). Это значит 65% кружков должны быть залиты зеленым, а 35% красным.

[Rustam Bainazarov]

mrdragon9000, SVG + меняйте через JS нужные значение градиента, которые прописаны в теге <linearGradient>:
https://developer.mozilla.org/en-US/docs/Web/SVG/E...

Ну а если вам так нужна именно маска, то, здравствуйте, вам опять нужно нарисовать SVG/PNG-файл с ней. Только учтите, что такие маски не адаптивны нормально.

Проще, как и написал автор ответа, сделать SVG и вставить его разметку в документ.

Answer 2

[Алексей]

Если принципиально на CSS делать, то можно в этом направлении проработать https://codepen.io/Zagatskiy/pen/dybzKBN