Part of the SVG Backgrounds Reading List

Hatching and crosshatching refers to tight, parallel strokes drawn to suggest shadow, density and tone in illustrations. Used in everything from etchings to comics, both effects are relatively easy to create in . Because they’re very closely related to grids, I’ll address those here too.

Basic hatches in SVG are also very closely related to stripes and diagonals, which I’ve covered earlier; the difference is that hatches have more variety in width, in relation to the space between them.

Hatching

The simplest possible hatching is a diagonal line controlled by a pattern: 

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <style type="text/css">
        line { stroke: #ccc; }
    </style>
<defs>
<pattern id="diagonalHatch" width="10" height="10" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
  <line x1="0" y1="0" x2="0" y2="10" />
</pattern>
</defs>
    <rect width="100%" height="100%" fill="url(#diagonalHatch)" />
</svg>

The density of the hatching can be controlled by modifying the width value of the pattern: a lower value will result in closer lines, while a higher value will space them apart. Tone is controlled by the color applied to the lines in the CSS; stroke-width can be modified to create thicker lines.

Grids

A basic grid would be created from two lines at 90° to each other, drawn through the center of a pattern element. The grid could then be rotated to any angle using the patternTransform attribute: 

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <style type="text/css">
        line { stroke: #ccc; }
    </style>
    <defs>
        <pattern id="grid" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(45)">
            <line x1="5" y1="0" x2="5" y2="10" />
            <line x1="0" y1="5" x2="10" y2="5" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid)" />
</svg>

Which, saved as grid.svg and applied with the following CSS: 

body { 
    background-image: url(grid.svg);
}

…would look like the second example at the top of this article.

Crosshatching

Creating more of a “crosshatch” effect would usually involve thickening and darkening the lines of the grid, possibly combined with modifying the angle between them. The CSS for the SVG adjusts to: 

line { stroke: #333; stroke-width: 6px; }

Perhaps surprisingly, nth-child selectors can be used inside the CSS for the SVG to target the lines separately without resorting to id values: 

line:nth-child(odd) {
	stroke: #555; stroke-width: 6px;
}
line:nth-child(even) {
	stroke: #333; stroke-width: 5px;
}

By placing each of the lines into their own pattern, and rotating them separately, then using those patterns to fill two separate rectangles, you can create other designs, like the “fishing net” shown at the top of this article: 

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <style type="text/css">
        line { stroke: #ccc; stroke-width: 3; }
    </style>
    <defs>
        <pattern id="grid1" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(16)">
            <line x1="5" y1="0" x2="5" y2="10" />
        </pattern>
        <pattern id="grid2" patternUnits="userSpaceOnUse" width="10" height="10" patternTransform="rotate(32)">
            <line x1="5" y1="0" x2="5" y2="10" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#grid1)" />
    <rect width="100%" height="100%" fill="url(#grid2)" />
</svg>

Checkerboards

A similar technique can be used to create checkerboard designs:

Using this code: 

<svg xmlns="http://www.w3.org/2000/svg" width="100%" height="100%">
    <style type="text/css">
        #checkerboard { fill: #ccc; }
    </style>
    <defs>
        <pattern id="checkerboard" patternUnits="userSpaceOnUse" 
        width="50" height="50">
            <rect x="0" y="0" width="25" height="25" />
            <rect x="25" y="25" width="25" height="25" />
        </pattern>
    </defs>
    <rect width="100%" height="100%" fill="url(#checkerboard)" />
</svg>

Note that the <rect> elements inside the <pattern> must be specifically selected; otherwise, our CSS rect { } declaration may also affect the element that displays the pattern itself.

In the next article I’ll show how SVG crosshatching can be used to turn bitmap images into etchings and graphic novel illustrations.

Enjoy this piece? I invite you to follow me at twitter.com/dudleystorey to learn more.