svg-halftone.html

<div style="font-size: 32px; width: 200px; height: 200px; font-weight: bold; ">
	I is black --> out is black
I is white --> out is white
I is gray --> out is gray??


I << H --> I?

</div>

<svg width="600" height="600" viewbox="0 0 300 300"
	xmlns="http://www.w3.org/2000/svg"
	xmlns:xlink="http://www.w3.org/1999/xlink"
	style="opacity: 0; position: absolute;">
	<defs>
		<filter id="halftoning12" x="0" y="0" width="100%" height="100%">
			<feFlood flood-color="white" flood-opacity="1" result="checker-background"/>
			<feFlood x="0px" y="0px" width="6px" height="6px" flood-color="black" flood-opacity="1" result="checker-foreground1"/>
			<feFlood x="6px" y="6px" width="6px" height="6px" flood-color="black" flood-opacity="1" result="checker-foreground2"/>
			<feComposite in="checker-foreground1" in2="checker-background" operator="over" />
			<feComposite in="checker-foreground2" operator="over" />
			<feTile x="0px" y="0px" width="12px" height="12px"/>
			<feTile result="checkerboard" />

			<feTurbulence type="turbulence" numOctaves="2" result="scatter" baseFrequency="0.1" />
			<feGaussianBlur in="checkerboard" stdDeviation="3.2" edgeMode="wrap"/>
			<feDisplacementMap in2="scatter" scale="3" xChannelSelector="R" yChannelSelector="G" />
			<feComponentTransfer result="dots">
				<feFuncR type="linear" slope="7" intercept="-3" />
				<feFuncG type="linear" slope="7" intercept="-3" />
				<feFuncB type="linear" slope="7" intercept="-3" />
			</feComponentTransfer>
			<feGaussianBlur in="SourceGraphic" stdDeviation="4" />
			<!-- For strength "e" >= 3, k4 is "(1 - e) / 2" and k3 is "e" -->
			<feComposite in="dots" operator="arithmetic" k1="0" k2="1" k3="3" k4="-1" />
			<feComponentTransfer>
				<feFuncR type="linear" slope="3" intercept="-1" />
				<feFuncG type="linear" slope="3" intercept="-1" />
				<feFuncB type="linear" slope="3" intercept="-1" />
			</feComponentTransfer>
		</filter>

		<filter id="halftoning7-30" x="0" y="0" width="100%" height="100%">
			<feImage href="slant7.png" width="65px" height="65px" />
			<feTile result="checkerboard" />

			<feTurbulence type="turbulence" numOctaves="3" result="scatter" baseFrequency="0.041" />
			<feGaussianBlur in="checkerboard" stdDeviation="2" edgeMode="wrap"/>
			<feDisplacementMap in2="scatter" scale="3.5" xChannelSelector="R" yChannelSelector="G" />
			<feComponentTransfer result="dots">
				<feFuncR type="linear" slope="7" intercept="-3" />
				<feFuncG type="linear" slope="7" intercept="-3" />
				<feFuncB type="linear" slope="7" intercept="-3" />
			</feComponentTransfer>
			<feGaussianBlur in="SourceGraphic" stdDeviation="3" />
			<!-- For strength "e" >= 3, k4 is "(1 - e) / 2" and k3 is "e" -->
			<feComposite in="dots" operator="arithmetic" k1="0" k2="1" k3="3" k4="-1" />
			<feComponentTransfer>
				<feFuncR type="linear" slope="5" intercept="-2" />
				<feFuncG type="linear" slope="5" intercept="-2" />
				<feFuncB type="linear" slope="5" intercept="-2" />
			</feComponentTransfer>
		</filter>

		<filter id="halftoning3-30" filterUnits="objectBoundingBox">
			<feImage href="slant7.png" width="30px" height="30px" />
			<feTile result="checkerboard" />

			<feTurbulence type="turbulence" numOctaves="3" result="scatter" baseFrequency="0.041" />
			<feGaussianBlur in="checkerboard" stdDeviation="1" edgeMode="wrap"/>
			<feDisplacementMap in2="scatter" scale="1" xChannelSelector="R" yChannelSelector="G" />
			<feComponentTransfer result="dots">
				<feFuncR type="linear" slope="7" intercept="-3" />
				<feFuncG type="linear" slope="7" intercept="-3" />
				<feFuncB type="linear" slope="7" intercept="-3" />
			</feComponentTransfer>
			<feGaussianBlur in="SourceGraphic" stdDeviation="1.5" />
			<!-- For strength "e" >= 3, k4 is "(1 - e) / 2" and k3 is "e" -->
			<feComposite in="dots" operator="arithmetic" k1="0" k2="1" k3="3" k4="-1" />
			<feComponentTransfer>
				<feFuncR type="linear" slope="5" intercept="-2" />
				<feFuncG type="linear" slope="5" intercept="-2" />
				<feFuncB type="linear" slope="5" intercept="-2" />
			</feComponentTransfer>
		</filter>

		<filter id="ink-on-paper">
			<feComponentTransfer>
				<feFuncR type="linear" slope="0.9" intercept="0.03" />
				<feFuncG type="linear" slope="0.9" intercept="0.03" />
				<feFuncB type="linear" slope="0.9" intercept="0.03" />
			</feComponentTransfer>
		</filter>

		<filter id="inverted">
			<feImage href="slant7.png" width="65px" height="65px" />
			<feTile result="scatter" />

			<!-- <feTurbulence type="turbulence" numOctaves="3" result="scatter" baseFrequency="0.041" /> -->
			<feGaussianBlur in="SourceGraphic" stdDeviation="2.5" />
			<feDisplacementMap in2="scatter" scale="10" xChannelSelector="R" yChannelSelector="G" />
			<feComponentTransfer>
				<feFuncR type="linear" slope="-1" intercept="1" />
				<feFuncG type="linear" slope="-1" intercept="1" />
				<feFuncB type="linear" slope="-1" intercept="1" />
			</feComponentTransfer>
			<feComposite in="scatter" operator="arithmetic" k1="0" k2="1" k3="3" k4="-1" />
		</filter>
	</defs>
</svg>
<br />

<img src="sample.png" width=600 style="filter: url(#halftoning12) url(#ink-on-paper);">
<img src="sample.png" width=600 style="filter: url(#halftoning7-30) url(#ink-on-paper);">
<img src="sample.png" width=600 style="filter: url(#halftoning3-30) url(#ink-on-paper);">
<br />
<img src="gradient.png" width=600 style="filter: url(#halftoning12) url(#ink-on-paper);">
<img src="gradient.png" width=600 style="filter: url(#halftoning7-30) url(#ink-on-paper);">
<img src="gradient.png" width=600 style="filter: url(#halftoning3-30) url(#ink-on-paper);">

<div style="position: relative; display: inline-block; width: 4in; background: #EEE; color: black; font-size: 32px;">
	"Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum."
</div>
<div style="isolation: isolate; position: absolute; top: 0; height: 40in; backdrop-filter: url(#halftoning7-30)">
	Well hello!
</div>