Динамическое создание градиента вдоль пути SVG

Я динамически создаю путь, используя SVG. Далее я хочу добавить градиент к своему пути, но я застрял.
Как я пытался сделать, показано на изображении 2. Мой градиент идет вдоль пути, но мне нужно, чтобы градиент имел вид, как на изображении 1.

Изображение 1

Изображение 2
Мои определения gradient и stroke следующие:

скрипт
svgPath.setAttribute("stroke", "url(#grad1");` svgPath.setAttribute("fill", "none"); svgPath.setAttribute("stroke-linejoin", "round");` svgPath.setAttribute("stroke-width", "10"); });

Ответ

Решил привести пример анимации появления polyline, пришлось заключить animate в каждый polyline, чтобы получить нужный результат, а далее можно кастомизировать анимацию, как душа пожелает(имею ввиду изменение местоположения(from="N,N etc."):
polyline { stroke-linejoin: round; fill: none; animation: opac 3s 1; } @keyframes opac { from { opacity: 0; } to { opacity: 1; } }