Как использовать этот фильтр SVG в качестве анимированной маски CSS? ⇐ Html

[Anonymous]

Я хочу разместить горизонтальную линию с тонким эффектом непрозрачности движущегося тумана под заголовками на веб-странице.

• Я хочу, чтобы сама линия была окрашена в золотой цвет с плавными случайными изменениями яркости (например, с помощью фильтра ), чтобы придать металлический вид.
• Я хочу, чтобы за линией был эффект свечения с такими же цветовыми вариациями, как у сама линия.
• Я хочу, чтобы линия стала прозрачной на крайнем левом и правом концах.
• Наконец, я хочу, чтобы непрозрачность линии была изменена чем-то вроде фильтра , который анимирован так, что части линии медленно, слегка исчезают и снова появляются в случайном порядке.

Я придумал, как получить все желаемые пункты, кроме последнего, с использованием комбинации масок и фильтров CSS и SVG:

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

html {
background: black;
font-size: 16px;
margin: 0;
}
.first-heading {
margin: 0.9375rem 3.5rem;
font-family: serif;
font-weight: 400;
font-style: normal;
color: #bdbdbd;
}
.page-heading {
width: 100%;
display: inline-flex;
position: relative;
}
.page-heading::after {
content: "";
position: absolute;
left: 0;
width: 100%;
height: 100%;
border-bottom: 0.125rem solid gold;
filter: drop-shadow(0 0 0.5rem gold) drop-shadow(0 0 0.5rem gold) url(#filter_gold);
mask: linear-gradient(0.25turn, black 0%, white 6.25%, white 93.75%, black 100%) luminance no-clip, url(#mask_fog) luminance no-clip repeat;
}

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

Heading

Однако я не могу понять, как заставить Mask_fog работать над изменением прозрачности линии: если я сделаю это второй маской, она не будет иметь никакого эффекта, а если я сделаю ее первой маской, линия полностью исчезнет. Я также попробовал использовать только filter_fog в качестве маски, с теми же результатами.
Ниже приведен макет того, чего я хочу достичь, созданный с помощью After Effects (с использованием снимков экрана эффектов фильтра SVG из приведенного выше кода):



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