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.
Key features
- 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
How to use
- 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.
Best practices
- 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.
Limitations / notes
- 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
