Part of the SVG Backgrounds Reading List

Creating the visual effect of halftoning - forming an image out of tiny dots of color - is easy to achieve in a web page with . The technique shown here uses multiple backgrounds in a div element: one repeating grid pattern that is closely related to the effect used in my Pop-Art article, just at a smaller cell size, combined with a bitmap image. I’ve also added a transitioned greyscale filter to desaturate the colors.

The Markup & CSS

The containing <div> is empty… 

<div id="silkscreen"></div>

…but will be propped open by using padding-bottom, in a method similar to that used to make YouTube videos responsive:

Multiple background images are set in the <div> to layer and repeat, while applying filter effects: 

div#silkscreen {
	background: url(silkscreen.svg), url(lotus.jpg);
	padding-bottom: 64%;
	background-size:4px 4px, 100%;
	background-repeat: repeat, no-repeat;
	filter: grayscale(1);
	transition: 1.3s;
}
div#silkscreen:hover { 
	filter: none; 
}

SVG Checkerboard

Creating an SVG checkboard for the halftone effect is a matter of using just two square elements in a diagonal arrangement: 

<svg xmlns="http://www.w3.org/2000/svg" width="50" height="50">
    <g fill="rgba(0,0,0,0.5)">
        <rect width="25" height="25" />
        <rect x="25" y="25" width="25" height="25" />
    </g>
</svg>

This creates a pattern like so:

By shrinking the checkerboard with background-size, we can create a very fine-grained halftone effect over any image cheaply and easily.

Photograph by P Lam Khun, licensed under Creative Commons.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.
Check out the CodePen demo for this article at https://codepen.io/dudleystorey/pen/HnxJw