Asset Dotter

Asset Dotter turns regular images, GIFs, and videos into customizable dotted brand assets.

It is built as a small open-source product:

• A Python rendering engine for images, GIFs, SVG output, and optional video rendering.
• A Python CLI for batch workflows.
• A local Python server for the web interface.
• A static HTML/CSS/JavaScript interface that can be opened directly for image preview and PNG/SVG export.
• Tailwind via CDN for no-build styling, with local CSS fallbacks so the app still looks intentional without a frontend build step.

Examples

Each row shows the original source on the left and Asset Dotter output on the right.

Skull — animated GIF

Original	Halftone dots	ASCII

Rubik's Cube — animated GIF

Original	Dithered	Triangles

David — image to SVG

Original	Dotted SVG

Statue of Liberty — image to SVG

Original	Dotted SVG

Quick Start

python -m venv .venv
.venv\Scripts\activate
pip install -e ".[video,dev]"
python -m asset_dotter.server

Then open:

http://127.0.0.1:8787

You can also double-click web/index.html. Client-side image preview, paste import, drag/drop import, and PNG, SVG, and animated GIF export all work directly in the browser (GIFs are re-dotted frame by frame and encoded with a small built-in encoder). MP4 export, and GIF export from a video source, use the Python server.

CLI

asset-dotter input.png output.png --theme examples/themes/studio-grid.json
asset-dotter input.jpg output.svg --cell-size 14 --shape diamond --color-mode palette
asset-dotter input.png output.png --shape triangle --adaptive-spacing
asset-dotter input.jpg output.png --style bayer8 --shape square --color-mode mono
asset-dotter input.jpg output.svg --style ascii --color-mode mono --dot-color "#8fe0c2"
asset-dotter input.gif output.gif --theme examples/themes/mono-ink.json
asset-dotter input.mp4 output.mp4 --cell-size 12 --max-radius 5

--style chooses the rendering style: halftone (default — dot size varies with brightness), a dither pattern (bayer2, bayer4, bayer8 ordered dithers, or noise), or ascii. With a dither style each cell is fully on or off based on a fixed threshold, so tone comes from the density of cells; pair it with --shape square and --color-mode mono for a classic 1-bit look. ascii replaces each cell with a monospace character chosen from a brightness ramp ( .:-=+*#%@). (Min radius and adaptive spacing apply only to halftone; dither and ascii ignore them, and ascii also ignores the dot shape.)

Dot shapes are circle, square, triangle, and diamond. --adaptive-spacing (the "Variable spacing" toggle in the web UI) packs extra, smaller dots into sparse regions so light areas keep their texture instead of leaving large gaps, while dark areas stay coarse.

Min/Max radius are plain pixel radii (in both the CLI and the web UI) and are no longer clamped to half a cell, so a large max radius lets dots overlap and merge into bold shapes (up to the image size).

Theme JSON

{
  "name": "Studio Grid",
  "background": "#111418",
  "dotColor": "#f2f3f4",
  "palette": ["#f2f3f4", "#308888", "#48a080", "#e04840", "#f0c030"],
  "transparent": false
}

Output Philosophy

Asset Dotter is not an ASCII-art tool. It uses a halftone-style grid where sampled brightness controls dot size, and brand settings control color, shape, spacing, transparency, and export format.

The first version intentionally stays compact. It should be easy to fork, understand, and extend.