Как реализовать линию графика как на картинке?

Question

[SevSergei]

Наткнулся на такой дизайн графика.
Вопрос: как можно реализовать линию графика? На первый взгляд реализовать такое очень сложно или даже нереально. В svg вроде нет линии с разной толщиной. Причем здесь не только разная толщина линии, но и интенсивность свечения.


Источник: https://dribbble.com/shots/12001516-Cryptocyrrency...

Comments

[RAX7]

Линию с разной толщиной при желании можно сделать https://pomax.github.io/bezierjs/#outline
а что делать с эффектом свечения хз.

Answer 1

[profesor08]

Это лишь линия на canvas, которая нарисована из точек разного диаметра постепенно увеличивающегося слева на право. Свечение одинаковое везде, просто меняется прозрачность.

На SVG линией не сделать, но тебе надо лишь сделать два контура, где второй контур будет чуть опускаться слева на право. Это слегка данные модифицировать данные. Потом контуры сомкнуть. Для наглядности представь треугольник. Свечение постоянное с маской меняющейся прозрачности.