Dot Wave Animator
The Dot Wave Animator turns a flat icon into something that feels alive. Drop in an SVG — or a PNG logo with a transparent background — and the tool resamples its silhouette into a grid of dots, then sends a travelling crest of brightness, scale, and color sweeping through them. It is the dot-matrix loading animation you have seen on premium SaaS landing pages and conference keynote slides, except here you build it from your own mark, tune every parameter, and walk away with files you actually own: an animated SVG that plays anywhere, a self-contained HTML snippet, a WebM video, or a crisp static frame. Like every tool on this site, it is free and runs entirely in your browser — your logo never leaves your machine.
Six presets — Tidefall, Solar Core, Helix, Terminal Rain, Quiet Static, and True Color — are ordinary saved control sets, not magic: apply one, open the panels, and every choice it made is sitting there ready to be edited. Three built-in sample icons load instantly, so you can feel out the controls before committing your own artwork. If your logo only exists as a raster file and you want a clean vector version first, run it through the Image to SVG Converter and bring the result back here.
From Vector to Living Dot Grid: How the Sampling Works
Under the hood the tool rasterizes your file once, lays a grid over it, and measures how much of each cell your artwork covers. Cells above the coverage threshold become dots; the rest stay empty, so the dot field is literally the shape of your icon. The density slider sets how fine that grid is — low density gives a chunky, retro LED-board look, high density reads almost like a continuous tone. Variable size scales each dot by how fully its cell is covered, which softens curves and preserves anti-aliased edges; edge boost does the opposite, enlarging the dots that sit on the silhouette so the outline pops. The coverage threshold is your rescue lever for tricky artwork: lower it to recover thin strokes, raise it to clean up haze around soft edges.
Dots come in three shapes — circle, square, and diamond — and two color philosophies. By default every dot shares one color and the crest tints it toward a second; switch on “sample colors from source” and each dot instead inherits the average color of the artwork underneath it, so a multi-color logo keeps its identity while the wave animates pure brightness and scale.
Four Wave Modes and the Controls That Shape Them
Every dot is assigned a phase — its position in the wave's journey — and the mode decides how those phases are laid out. Wave sweeps a straight crest across the grid at any angle you choose, from a left-to-right scan at 0° to falling rain at 90° to a classic diagonal at 45°. Radial pulses outward from the center like a sonar ping. Spiral winds the crest around the icon as it travels outward, and Shimmer scatters the phases randomly from a seed, so the whole mark twinkles instead of flowing — press shuffle until you find a scatter you like, and that seed reproduces it forever.
Four sliders then sculpt the crest itself. Speed sets how many full cycles pass per second. Wavelength is the width of the lit band — narrow for a thin scanning line, wide for a slow breathing glow. Crest sharpness controls the falloff, from a soft sine swell to a hard pulse. Rest opacity decides how visible the dots are between crests: at zero the icon assembles out of darkness on every pass, near one it merely glimmers. Size pulse adds physical growth at the crest, which is what makes the wave read as motion rather than a brightness trick. The same grammar of motion applies if you later animate whole SVG elements — rotation, draw-on strokes, fades — with our SVG Animator, which is the right tool when you want to move the artwork itself rather than rebuild it from particles.
Exports: Animated SVG First, Then HTML, WebM, and Stills
The headline export is the animated SVG. It encodes the animation as plain CSS keyframes inside the file — every dot shares one set of keyframes and carries only a tiny per-dot delay — so it plays in any modern browser with no JavaScript, no library, and no build step. Paste it inline into a hero section, commit it to a GitHub README, or set it as an `<img>` source; because it is vector, it stays razor sharp at any size. Untick “include background” and the file is transparent, ready to sit on whatever surface your page provides.
The animated HTML export is a single self-contained file with a canvas renderer and your dot data baked in — useful as an embed or a standalone demo page. WebM records the live preview into a real video file for places that only accept video, like a social post or a slide deck. The static SVG captures one frame mid-wave for thumbnails and print. And the settings JSON saves every control as a small portable preset you can re-import later or hand to a teammate — pair it with a halftone or stipple still from the Photo Effects Lab if you are building out a whole dotted brand system, or shrink the static frame down for a favicon with the Favicon Generator.
Where This Honestly Has Limits
Three things are worth knowing before you build a campaign around it. First, WebM recording depends on your browser's MediaRecorder support: Chrome, Edge, and Firefox record cleanly, but Safari cannot produce WebM at all — the button will tell you rather than silently fail, and the animated SVG and HTML exports work everywhere as the portable alternative. Second, the animated SVG approximates the wave curve with 24 sampled keyframe steps; in practice it is visually indistinguishable from the live preview, but it is an approximation, and at very high crest sharpness with a very narrow wavelength you may notice the exported pulse is a touch softer than the canvas. Third, sampling is inherently lossy: a grid can only hold detail as fine as its cells, so hairline strokes and tiny lettering will drop out at low density. That is the aesthetic — a dot grid is an abstraction of your mark, not a replica — but if a critical detail vanishes, raise the density or lower the coverage threshold before reaching for a different tool.
Frequently Asked Questions
Does my SVG or logo file get uploaded anywhere?
No. The file is rasterized and sampled on your own device using an HTML canvas, the animation runs locally, and every export — animated SVG, HTML, WebM, static SVG, and settings JSON — is generated in your browser. Nothing is transmitted to our servers or any third party, there is no account, and once the page has loaded the tool keeps working offline.
What is the difference between the animated SVG and the animated HTML exports?
The animated SVG is a single vector file whose motion is plain CSS keyframes — it plays inside any modern browser context that renders SVG, including an img tag, an inline hero graphic, or a GitHub README, with no JavaScript and no dependencies. The animated HTML is a complete standalone web page that redraws the dots on a canvas with a small script; it is the better choice when you want a self-hosted demo page or an iframe embed. When in doubt, ship the SVG — it is smaller, sharper, and more portable.
Why does the WebM export not work in Safari?
Video recording uses the browser's built-in MediaRecorder with the WebM format, which Chrome, Edge, and Firefox support and Safari does not. Rather than producing a broken file, the tool detects this and tells you. If you need video and only have Safari, open the page in Chrome or Firefox for the recording step, or use the animated SVG or HTML exports, which work in every modern browser.
Can I use a PNG or JPG logo instead of an SVG?
Yes. Any raster image the browser can decode — PNG, JPG, or WebP — is sampled the same way as an SVG. A PNG with a transparent background gives the cleanest result, because the sampler reads alpha coverage to decide where dots belong. A JPG has no transparency, so the whole rectangle becomes dots; that can still look great as a full-frame texture, but for a floating icon silhouette you want transparency. If you only have a flattened raster logo, our Image to SVG Converter can vectorize it first.
How do I keep my logo's original colors instead of one dot color?
Turn on "sample colors from source" in the Color panel. Each dot then inherits the average color of the artwork in its grid cell, so a multi-color mark keeps its identity, and the travelling wave animates brightness and scale instead of tint. In this mode the dot and crest color pickers are disabled because the source supplies the palette; the background color still applies.
Why do thin lines or small details in my icon disappear?
Sampling quantizes your artwork onto a grid, and any stroke thinner than roughly one grid cell can fall below the coverage threshold and produce no dot. Two controls recover detail: raise the density so the cells get smaller, or lower the coverage threshold so partially covered cells still earn a dot — turning on variable size at the same time keeps those recovered dots proportionally smaller, which preserves the visual weight of the original line.
How big is the animated SVG file, and can I make it smaller?
Size scales with the dot count, since each dot is one SVG element carrying a short delay value — typical icons land between roughly 40 and 250 KB before compression, and SVG text gzips extremely well, often to a quarter of that on the wire. To shrink the file, lower the density (fewer dots is by far the biggest lever), raise the coverage threshold, or use the single-color mode, which lets every dot share one animated fill instead of carrying its own color.
Will the exported animation look exactly like the live preview?
Very close, with one honest caveat. The preview computes the wave curve continuously every frame, while the animated SVG approximates that curve with 24 sampled keyframe steps so it can run as pure CSS. For nearly all settings the two are indistinguishable; at extreme settings — maximum crest sharpness combined with a very narrow wavelength — the exported pulse can read slightly softer than the canvas. The WebM export records the preview canvas itself, so it matches exactly, and the animated HTML export uses the same continuous math as the preview.
Built by Derek Giordano · Part of Ultimate Design Tools · Privacy · Terms