Dither Pattern
SVG dithered background patterns using ordered Bayer matrices and halftone/line/dot patterns. Zero dependencies — pure React + math.
"use client";
import { DitherPattern, DITHER_PRESETS } from "@/components/vritti/dither-pattern";
export function DitherPatternExample() {
return (
<div className="grid grid-cols-2 sm:grid-cols-3 gap-3 p-4">
{/* B&W Bayer4 */}
<div className="rounded-lg overflow-hidden aspect-video">
<DitherPattern
pattern="bayer4"
gradientType="linear"
palette={[...DITHER_PRESETS.bw.palette]}
percentages={[...DITHER_PRESETS.bw.percentages]}
width={320}
height={180}
cellSize={6}
angle={45}
/>
</div>
{/* GameBoy Halftone */}
<div className="rounded-lg overflow-hidden aspect-video">
<DitherPattern
pattern="halftone"
gradientType="radial"
palette={[...DITHER_PRESETS.gameboy.palette]}
percentages={[...DITHER_PRESETS.gameboy.percentages]}
width={320}
height={180}
cellSize={8}
shape="circle"
/>
</div>
{/* Sepia Lines */}
<div className="rounded-lg overflow-hidden aspect-video">
<DitherPattern
pattern="lines"
gradientType="conic"
palette={[...DITHER_PRESETS.sepia.palette]}
percentages={[...DITHER_PRESETS.sepia.percentages]}
width={320}
height={180}
cellSize={6}
/>
</div>
{/* CGA Dots */}
<div className="rounded-lg overflow-hidden aspect-video">
<DitherPattern
pattern="dots"
gradientType="linear"
palette={[...DITHER_PRESETS.cga.palette]}
percentages={[...DITHER_PRESETS.cga.percentages]}
width={320}
height={180}
cellSize={8}
angle={135}
shape="circle"
/>
</div>
{/* Neon Bayer8 scaled */}
<div className="rounded-lg overflow-hidden aspect-video">
<DitherPattern
pattern="bayer8"
gradientType="radial"
style="scaled"
palette={[...DITHER_PRESETS.neon.palette]}
percentages={[...DITHER_PRESETS.neon.percentages]}
width={320}
height={180}
cellSize={8}
shape="square"
/>
</div>
{/* Rust Scales */}
<div className="rounded-lg overflow-hidden aspect-video">
<DitherPattern
pattern="scales"
gradientType="noise"
palette={[...DITHER_PRESETS.rust.palette]}
percentages={[...DITHER_PRESETS.rust.percentages]}
width={320}
height={180}
cellSize={10}
shape="diamond"
/>
</div>
</div>
);
}
Installation
pnpm dlx shadcn@latest add "https://vritti.thesatyajit.com/r/dither-pattern"