Dot Matrix Icon turns pasted SVG markup into a crisp dot-grid render. It rasterizes your SVG into a configurable rows × columns grid and draws circular dots wherever the SVG alpha exceeds your threshold. Use it for logos, hero accents, badges, loaders, or subtle animated UI details.
Enable Random Pulse to periodically highlight a percentage of dots using an active color, creating a clean, modern motion accent without distracting loops.
Paste full <svg>...</svg> markup to generate the dot mask automatically
Adjustable grid resolution with Rows and Cols
Alpha thres control to capture more detail or simplify the silhouette
Style controls for dot size, base/active colors, background, and radius
Optional Random Pulse animation with Active % and Speed ms
Add the component to your canvas.
Paste your full SVG markup into SVG.
Adjust Rows and Cols to set the level of detail.
Tune Alpha thres until the silhouette looks right.
Customize Base and Active colors, plus Background and Radius.
(Optional) Turn Anim to Random and set Active % and Speed ms.
Start around 16×16 and increase for more detail.
If dots disappear, lower Alpha thres.
For smoother performance, avoid very high grid sizes and keep Active % modest.
Very complex SVG effects (filters, masks, unusual strokes) may rasterize differently when converted to a dot grid.
Higher grid sizes can increase render cost on low-end devices.
Framer Lists
