svg-dither-filter

Dithering is a technique that simulates gradients and shading by placing a pattern of shapes or dots rather than using continuous color. This tool applies that technique to images and videos, but instead of plain dots it uses SVG graphics that you provide or choose from a built-in set.

This is a single HTML file you open directly in a web browser. No installation, no build process, no server needed. You drag in an image or a video clip, and the tool renders a grid of shapes onto it, where each shape represents a tone level from shadow to highlight. It ships with a default circle shape but lets you upload up to seven custom SVG graphics, one per tone level. You can control the grid size, the background color, the shape scale, and whether shapes rotate.

The main output is a hero background for a website. A hero is the large visual panel displayed at the top of a page. The tool can export a self-contained HTML file with your video URL, your dither settings, and your SVG shapes all baked in, plus a basic headline and call-to-action text layer sitting over the dither effect. Alternatively, you can copy a JSON configuration intended for use with a React component in a more complex web project.

Live video processing works frame by frame inside the browser, though the tool notes that high-resolution grids on video can be demanding on a computer's processor and graphics card. For practical use, the README suggests a short looping clip and a moderate grid size.

The entire tool is a single HTML file. It runs in any modern browser without additional plugins and is licensed under MIT.