Ist es möglich, einen HTML-Canvas als animierte CSS-Maske zu verwenden? ⇐ CSS

[Anonymous]

Ich arbeite an einer Website und möchte die Überschriften mit einer animierten Nebelmaske unterstreichen, damit zufällige Teile nach und nach ein- und ausgeblendet werden. Unten ist ein Modell dessen, was ich erreichen möchte:


Mit SVG feTurbulence-Filtern als CSS-Masken konnte ich dem gewünschten Effekt ziemlich nahe kommen, aber es belastet die Leistung der Webseite absolut. Auf der Suche nach leistungsfähigeren Optionen zum Erzeugen von animiertem Bildrauschen bin ich auf das Projekt simplex-noise.js von jwagner gestoßen, das wesentlich effizienter als SVG-Filter und auch viel flexibler zu sein scheint. Es verwendet jedoch das HTML-Element und ich kann nicht herausfinden, wie ich dieses Element als CSS-Maske fungieren lassen kann.
Ist die Verwendung einer Leinwand als animierte CSS-Maske möglich?
Unten ist ein Codeausschnitt einer Leinwand mit angewendetem Rauscheffekt und eine Kopfzeile mit meinem aktuellen Unterstreichungseffekt. Die ID des Canvas ist als Maske für die Unterstreichung in CSS festgelegt, wird jedoch nicht als solche verwendet (zumindest in Firefox oder Chrome).

Code: Select all

: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;
}

Code: Select all

Example Heading
Body text.



import {createNoise3D} from "https://cdn.skypack.dev/[email protected]";
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();