Vue3 Vanta: создать прозрачный градиент на холсте

#css #vue.js

#css #vue.js

Вопрос:

У меня есть это приложение vue3 (минимальный пример здесь, в codesandbox, когда предварительный просмотр выдает ошибку, просто нажмите маленькую кнопку обновления), где Vanta используется для создания этой фоновой анимации. Что я хотел бы сделать, так это уменьшить его с помощью линейного градиента. Но я не могу заставить его работать.

Я попытался добавить background-image свойство к a div , которое переносит v-vanta компонент и mask-image свойство css, непосредственно применяемое к самому элементу. Поиск в Google показал, что это не будет работать с объектом canvas, который Vanta использует под капотом.

У кого-нибудь есть какое-то представление об этом?