Pixel Dither Transitions

Generate two-tone section transitions with ordered (Bayer) dithering. Pure math, no images.

Colors

Color 1

Color 2

Canvas

Width 640px Height 640px Pixel size 6px

Dither

Bayer matrix Direction Easing Offset 0.00 Contrast 1.00×

640 × 640 106 × 106 cells 4×4 Bayer

Each pixel compares a gradient value g(x, y) to a Bayer-matrix threshold M[y mod N][x mod N] / N². If g > threshold it becomes color 2; otherwise color 1. That's the whole trick.

Built by @MuseCraftman