The most literal reading of this system's "bitmap" identity: the same per-cell luminance averaging
as Halftone, but mapped to a character ramp instead of a dot
radius. Each sampling cell picks one glyph from charset, darkest cells getting the densest
character (@ by default) and the lightest getting none at all. Ink color is read from the
canvas's own computed color at draw time, so it follows the current theme like Halftone and
CrossHatch do.
<AsciiArt 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} />Choosing a charset
charset is read densest-first — the character at index 0 renders for the darkest cells, and a
trailing space (the default ramp ends in one) means "leave this cell blank." Swap in your own ramp
to change the texture entirely:
<AsciiArt src={photo} alt="Portrait" charset="#+. " />A shorter charset gives fewer distinct tones (more posterized, higher contrast); a longer one gives
a smoother gradient at the cost of needing a larger cellSize to stay legible.
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 | Sampling cell size in source pixels — one character per cell. |
| charset | text | @%#*+=-:. | Densest → sparsest character ramp; the first character renders for the darkest cells. |
| className | text | — | — |
| height | number | — | — |
| invert | boolean | — | |
| src * | text | — | — |
| width | number | — | Defaults to the image's natural size once loaded. |