Можно ли использовать холст HTML в качестве маски CSS? ⇐ Javascript

[Anonymous]

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


Мне удалось довольно близко подойти к желаемому эффекту, используя фильтры SVG feTurbulence в качестве масок CSS, но это абсолютно снижает производительность веб-страницы. В поисках более эффективных вариантов создания шума анимированных изображений я нашел проект simplex-noise.js от jwagner, который кажется значительно более эффективным, чем SVG-фильтры, а также гораздо более гибким. Однако он использует элемент HTML , и я не могу понять, как заставить этот элемент действовать как маска CSS.
Возможно ли это? Если нет, есть ли другие способы создать менее затратную с точки зрения вычислений шумовую маску для подчеркивания?
Ниже приведен фрагмент кода холста с примененным эффектом шума и заголовка с моим текущим эффектом подчеркивания. Идентификатор холста задается как маска для подчеркивания в CSS, но он не используется как таковой (по крайней мере, в Firefox или Chrome).

Код: Выделить всё

:root {
background: #1e1e1e;
font-size: 16px;
margin: 0 1.25rem;
}
h1 {
width: 100%;
display: inline-flex;
position: relative;
color: #bdbdbd;
font-weight: 400;
padding-bottom: 0.75em;
margin-bottom: 0;
}
h1::after, h2::after {
content: "";
position: absolute;
left: -1.25rem;
width: calc(100% + 2.5rem);
height: calc(100% + 2rem);
background: linear-gradient(to right, #e6bd64, #e6bd64) no-repeat;
background-size: 100% 2px;
background-position: center calc(100% - 1.375em);
filter: drop-shadow(0 0 0.5rem #e6bd64) drop-shadow(0 0 0.5rem #e6bd64);
mask: linear-gradient(white, white) luminance no-clip,
linear-gradient(0.25turn, white 0%, black 6.25%, black 93.75%, white 100%) luminance no-clip,
url(#noise-mask) luminance no-clip;
mask-composite: subtract;
}
p {
color: #d9dde5;
}

Код: Выделить всё

Example Heading
Body text.



import {createNoise3D} from "https://cdn.skypack.dev/simplex-noise@4.0.0";
const noise3D = createNoise3D();
const canvas = document.getElementById('noise-mask');
const ctx = canvas.getContext('2d');
const imageData = ctx.getImageData(0, 0, canvas.width, canvas.height);
const data = imageData.data;
let t = 0;
function drawPlasma(){
for (let x = 0; x < 512; x++) {
for (let y = 0; y < 512; y++) {
const r = noise3D(x / 128, y / 128, t/512) * 0.5 + 0.5;
data[(x + y * 512) * 4 + 0] = r * 255;
data[(x + y * 512) * 4 + 1] = r * 255;
data[(x + y * 512) * 4 + 2] = r * 255;
data[(x + y * 512) * 4 + 3] = 255;
}
}
t++;
ctx.putImageData(imageData, 0, 0);
requestAnimationFrame(drawPlasma);
}
drawPlasma();

Подробнее здесь: https://stackoverflow.com/questions/798 ... a-css-mask