Как сделать плавную заливку svg?

Question

[Raneto4ka]

Ползунок слайдера при перетаскивании заполняется цветом.
https://codepen.io/Raneto4ka/pen/WBzPRP
Можно ли как-то сделать, что бы заполнение срабатывало не резко, в момент достижения определенного значения (как сейчас), а плавно заливалось в процессе движения ползунка?

Answer 1

[RAX7]

Можно с помощью библиотеки Polymorph, но она малость глючная.

Comments

[Raneto4ka]

Спасибо за ответ, красиво получилось! Но ради одной иконки библиотеку подключать что-то не хочется. Хотелось бы понять можно ли стандартными средствами обойтись)

[RAX7]

Raneto4ka, там вся библиотека 3Кб (min+gzip), по сравнению с уже подключенным jquery - капля в море. Стандартными средствами придется на js атрибут d у path высчитывать.

Answer 2

[forspamonly2]

такое заполнение делается гораздо проще: фигура заливается паттерном с простенькой синусоидой, которая анимируется одной контрольной точкой, а паттерну задаётся нужное смещение.
всего две цифры менять надо.

Comments

[Raneto4ka]

Спасибо!