DitherGlyph
A word or logo woven out of a moving dithered field.
Preview
tsx
import { DitherGlyph } from '@kerf-js/veneer'export function Word() { return ( <DitherGlyph text="kerf" ratio="4 / 1" /> )}Installation
npm install @kerf-js/veneerTry it
Change the controls: the preview and its code update together. The address keeps what you set, so you can link to it.
Live preview
Controls
Kind
Ramp
Cell
Codeupdates as you change the controls
import { DitherGlyph } from '@kerf-js/veneer'<DitherGlyph text="kerf" />Usage
tsx
import { DitherGlyph } from '@kerf-js/veneer'<DitherGlyph text="kerf" ratio="4 / 1"/>A logo
Pass an SVG path and its box.
tsx
import { DitherGlyph } from '@kerf-js/veneer'export function Logo() { return ( <DitherGlyph path={BOLT} box={[24, 24]} fit={0.9} label="kerf's bolt" ratio="3 / 1" kind="rings" /> )}const BOLT = 'M13 2 4 14h7l-1 8 9-12h-7z'Your own drawing
draw paints the shape in cells.
tsx
import { DitherGlyph } from '@kerf-js/veneer'export function Drawn() { return ( <DitherGlyph draw={drawDiamond} label="A diamond" ratio="3 / 1" ramp="highlight" /> )}const drawDiamond = ( ctx: CanvasRenderingContext2D, cols: number, rows: number,) => { const size = rows * 0.42 ctx.beginPath() ctx.moveTo(cols / 2, rows / 2 - size) ctx.lineTo(cols / 2 + size, rows / 2) ctx.lineTo(cols / 2, rows / 2 + size) ctx.lineTo(cols / 2 - size, rows / 2) ctx.fill()}Reveal
reveal draws the shape on over that many seconds.
tsx
import { DitherGlyph } from '@kerf-js/veneer'export function Reveal() { return ( <DitherGlyph text="Shipped" reveal={1.6} ramp="positive" ratio="4 / 1" /> )}When to use
Use it for
- A big brand moment: a wordmark or a logo
Reach for something else
- Heading, when it is ordinary text
Accessibility
- A
textglyph is real text. Give apathordrawglyph alabel.
API Reference
| Prop | Type | Default | Description |
|---|---|---|---|
text | string | — | The word to set. It stays in the page as real text for readers and for search. |
path | string | — | An SVG path, for a logo. |
box | [width: number, height: number] | — | The size of the box the path was drawn in. |
stroke | number | — | Line width, for a path made of lines. |
draw | ((ctx: CanvasRenderingContext2D, cols: number, rows: number) => void) | — | Paints the shape on a canvas, in cells. |
label | string | — | Names a path or draw glyph. |
font | string | — | The font for text. |
weight | string | number | — | The font weight for text. |
fit | number | — | The share of the box the shape fills, 0 to 1. |
ratio | string | number | — | Width to height. |
pointer | PointerMode | PointerMode[] | — | How the field answers the pointer: ripple, pull or shockwave, or several. |
speed | number | — | Multiplies the tier's speed. 0 holds one frame. |
fade | Fade | — | Dissolves the field toward a side, so type can sit on clean ground, or into the page on every edge. |
kind | FieldName | Field | 'flow' | A named field, or your own function of (x, y, t). |
smooth | boolean | false | Your own kind is smooth: evaluate it on a sparse lattice and interpolate, as the named fields do. |
ramp | Ramp | — | The inks: a tone such as accent, or your own list of colours. |
spark | Ramp | — | Inks a disturbed cell takes instead, so a push shows in a second colour. |
pattern | Pattern | — | The ordered-dither tile: bayer2, bayer4, bayer8, blue noise or halftone. |
cell | number | 4 | CSS pixels per cell. |
inks | number | — | How many inks of a tone ramp to use. Default: the tier's. |
gain | number | — | Tone gain, around 1. Default: the tier's. |
seed | number | — | Where a held frame sits in the field's time, in seconds. |
spread | number | — | How much of the step between inks the pattern may cross, 0–1. |
reveal | number | — | Seconds a mask takes to draw itself on, left to right, with a flash where it lands. Needs motion. |
fps | number | — | Caps the frame rate while it moves. |
Parts
Every element carries a stable name, so you can style it from your own CSS: [data-scope="dither-glyph"] [data-part="glyph-text"]
glyph-text
RelatedDither fieldDither