SVG - dissolve mask filter

Copyright (C) 2024 - vHW

by PhilQ

HTML

<svg
	xmlns="http://www.w3.org/2000/svg"
>
	<defs>
    <radialGradient
			id="grad-bw"
			fr="40%"
			r="50%"
		>
      <stop offset="0%" stop-color="black" stop-opacity="0.3" />
      <stop offset="100%" stop-color="black" stop-opacity="0" />
			<animate
				attributeName="fr"
				values="-100%;150%;-100%"
				dur="10s"
				repeatCount="indefinite"
				/>
			<animate
				attributeName="r"
				values="0%;100%;0%"
				dur="10s"
				repeatCount="indefinite"
				/>
    </radialGradient>
  </defs>
  <filter id="f">
    <feTurbulence
			result="turbulence"
			type="fractalNoise"
			baseFrequency="0.03"
			numOctaves="1"
			stitchTiles="stitch"
			x="-50%" y="-50%" width="200%" height="200%"
			/>
		<feColorMatrix
			 result="noise2"
			 in="turbulence"
       type="matrix"
       values="1 0 0 0 0
               1 0 0 0 0
               1 0 0 0 0
               0 0 0 0 1"
      />

		<!--
			x="0"
			y="0"
			width="100%"
			height="100%"
		-->
		<feFlood
			result="start-flood"
			flood-color="#ffffff"
			flood-opacity="0.5"
			x="-50%" y="-50%" width="200%" height="200%"
		/>
		<feMerge result="noise">
			<feMergeNode in="noise2" />
			<feMergeNode in="start-flood" />
		</feMerge>
		
		<!--
			x="0"
			y="0"
			width="100%"
			height="100%"
		-->
		<feFlood
			result="flood"
			flood-color="#ffffff"
			x="-50%" y="-50%" width="200%" height="200%"
		>
			<animate
				attributeName="flood-color"
				values="#ffffff;#808080;#ffffff"
				dur="10s"
				repeatCount="indefinite"
				/>
		</feFlood>
		<feBlend
			result="grad-flood"
			in="SourceGraphic"
			in2="flood"
			mode="multiply"
			/>
		<feBlend
			result="anim-noise"
			in="grad-flood"
			in2="noise"
			mode="multiply"
			/>
		<feComponentTransfer
		 	result="mask-sharp"
			in="anim-noise"
		>
			<feFuncR type="discrete" tableValues="0 1"></feFuncR>
			<feFuncG type="discrete" tableValues="0 1"></feFuncG>
			<feFuncB type="discrete" tableValues="0 1"></feFuncB>
			<feFuncA type="discrete" tableValues="1...

CSS

* {margin:0;padding:0;}
body {background: #888;}
svg {
	width: 100%;
	height: 500px;
}