SVG greyscale to non-uniform gradient filter

by PhilQ

HTML

<!DOCTYPE html>
<html>
<body>
<svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="400" height="200">
	<defs>
		<linearGradient
			id="test-fill"
			gradientTransform="rotate(0)"
		>
			<stop offset="0%" stop-color="#000"/>
			<stop offset="100%" stop-color="#fff"/>
		</linearGradient>

		<filter
			id="colorize-alpha"
			x="0" y="0"
			width="100%" height="100%"
			filterUnits="objectBoundingBox"
		>
			<feFlood
				x="0" y="0"
				width="100%" height="100%"
				flood-color="#fff" flood-opacity="1"
				result="seg-back2"
			/>

			<feColorMatrix
				color-interpolation-filters="sRGB"
				in="SourceGraphic"
				result="seg-1-grey2"
				type="matrix"
				values="2 0 0 0 -0.5
								0 2 0 0 -0.5
								0 0 2 0 -0.5
								10000 0 0 0 -2500" />
			<feComponentTransfer
				color-interpolation-filters="sRGB"
				in="seg-1-grey2"
				result="seg-1-alphagrey"
			>
				<feFuncR type="table" tableValues="1 0.25"></feFuncR>
				<feFuncG type="table" tableValues="1 0.25"></feFuncG>
				<feFuncB type="table" tableValues="1 0.25"></feFuncB>
				<feFuncA type="table" tableValues="0 1"></feFuncA>
			</feComponentTransfer>

			<feColorMatrix
				color-interpolation-filters="sRGB"
				in="SourceGraphic"
				result="seg-2-grey2"
				type="matrix"
				values="4 0 0 0 -3
								0 4 0 0 -3
								0 0 4 0 -3
								10000 0 0 0 -7500" />
			<feComponentTransfer
				color-interpolation-filters="sRGB"
				in="seg-2-grey2"
				result="seg-2-alphagrey"
			>
				<feFuncR type="table" tableValues="0.25 1"></feFuncR>
				<feFuncG type="table" tableValues="0.25 1"></feFuncG>
				<feFuncB type="table" tableValues="0.25 1"></feFuncB>
				<feFuncA type="table" tableValues="0 1"></feFuncA>
			</feComponentTransfer>

			<feMerge>
				<feMergeNode in="seg-back2" />
				<feMergeNode in="seg-1-alphagrey" />
				<feMergeNode in="seg-2-alphagrey" />
			</feMerge>
		</filter>
		<mask id="colorize-mask">
			<use href="#orig" y="0" filter="url(#colorize-alpha)"...

CSS

svg {border: 1px solid #000;}