SVG to interactive ASCII art. Matrix-style animations. Cursor-reactive glow.
I wanted to render SVGs as animated ASCII art with mouse-reactive effects. The kind of thing you see in hacker movie terminals, but interactive. So I built ASCII Animate. Drop in any SVG (or pick from 20+ Font Awesome icons), and it converts to a canvas-rendered ASCII grid. Characters animate Matrix-style. Your cursor creates a glow effect that brightens nearby characters. Optional orbiting halo for extra flair. Built with Svelte 5 and HTML Canvas. Ships as a single embeddable component.
The SVG gets rasterized to a hidden canvas, then sampled into a grid. Each cell gets a brightness value based on the pixel data. That brightness maps to a character from the selected charset.
The render loop runs on requestAnimationFrame. Characters cycle through the charset over time (the Matrix effect). Mouse position feeds into a distance calculation that boosts brightness for nearby cells (the glow). Two-color rendering lets you define primary and secondary tones.
Three sizing modes for embedding. Fullscreen (100vw × 100vh) for hero sections. Contained (100% × 100%) for flexible containers. Fixed pixels for precise control.
Copy the generated code, drop it in your project. One script tag, zero dependencies beyond Svelte.
DOM-based ASCII would mean hundreds of span elements updating every frame. Canvas gives us a single drawing surface. The text rendering is fast, the glow calculations are cheap, and the whole thing stays smooth at 60fps even on large grids.