The same per-cell luminance averaging as Halftone, mapped to a
count of overlaid hatch directions instead of a dot radius. Light cells get no strokes at all,
progressively darker cells add one direction at a time — \, then /, then —, then finally |
for the darkest cells — the same layering classic engravings and pen illustrations use to build up
shadow. Ink color is read from the canvas's own computed color at draw time, so it follows the
current theme.
<CrossHatch alt="Demo gradient" cellSize={8} height={96} src="data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2296%22%20height%3D%2296%22%3E%3Cdefs%3E%3ClinearGradient%20id%3D%22g%22%20x1%3D%220%22%20y1%3D%220%22%20x2%3D%221%22%20y2%3D%221%22%3E%3Cstop%20offset%3D%220%22%20stop-color%3D%22%23000%22%2F%3E%3Cstop%20offset%3D%221%22%20stop-color%3D%22%23fff%22%2F%3E%3C%2FlinearGradient%3E%3C%2Fdefs%3E%3Crect%20width%3D%2296%22%20height%3D%2296%22%20fill%3D%22url(%23g)%22%2F%3E%3Ccircle%20cx%3D%2230%22%20cy%3D%2266%22%20r%3D%2220%22%20fill%3D%22%23000%22%2F%3E%3Ccircle%20cx%3D%2270%22%20cy%3D%2230%22%20r%3D%2214%22%20fill%3D%22%23fff%22%2F%3E%3C%2Fsvg%3E" width={96} />Compared to Dither and Halftone
All three bitmap components sample an image and reduce it to this system's monochrome language, but they read very differently at the same source image:
- Dither is per-pixel and textural — good for photographs where you want the whole image visibly built from noise.
- Halftone is per-cell and even — a uniform screen that reads as tone from a distance, closest to a printed photograph.
- CrossHatch is per-cell and directional — the strokes themselves are visible up close, giving a more illustrative, hand-drawn feel than either of the other two.
- AsciiArt is per-cell and typographic — density expressed as characters rather than dots or strokes, the most literal "bitmap" of the four.
Reach for CrossHatch when the image is more decorative than informational — a hero illustration
or an avatar — where the hatching itself is part of the appeal rather than a means to preserve
detail.
src needs to be same-origin or CORS-enabled for the effect to actually apply — see Dither's
notes on loading external images.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
| alt * | text | — | Required — the canvas this renders as has no text of its own. |
| cellSize | number | 8 | Grid spacing in source pixels. |
| className | text | — | — |
| height | number | — | — |
| invert | boolean | — | |
| lineWidth | number | 1 | Stroke width in canvas pixels. |
| src * | text | — | — |
| width | number | — | Defaults to the image's natural size once loaded. |