SVG Stroke Dasharray Calculator

How to use

1. 1Pick a preset (Signature, Checkmark, Spinning circle, Rounded outline, Underline, Star outline) or pick a shape mode and enter the geometry.
2. 2For custom paths, paste the d attribute exactly as it appears in your SVG. For shapes, enter the center, radius, dimensions, or points.
3. 3Tune the animation: duration in seconds, easing, repeat mode (once, loop, ping pong), and direction (draw in or draw out).
4. 4Watch the live preview to confirm the draw timing reads correctly at the stroke width and viewBox you plan to ship.
5. 5Copy the CSS rule, the SVG markup, the React style object, or the Tailwind class pair into your project.
6. 6Hit Replay any time to retrigger one-shot animations without changing inputs.

About this tool

SVG Stroke Dasharray Calculator measures the exact length of any SVG path and generates the stroke-dasharray, stroke-dashoffset, and CSS animation block needed to make the path draw itself in (or erase itself out) the way illustrators, motion designers, and frontend developers use across hero sections, signatures, checkmarks, loading spinners, animated diagrams, and onboarding flows. Drawing animations work because SVG dashes are computed from a single number: the total length of the rendered path in user units. Set stroke-dasharray to that length and stroke-dashoffset to the same value, animate the offset down to zero, and the dash retracts so the path appears to draw itself. Eyeballing the number does not work, and the wrong length produces an animation that pops, jumps, or finishes short of the end. This tool reads the length directly from the browser using SVGGeometryElement.getTotalLength(), the exact function the SVG renderer uses internally, so the dasharray you copy matches what the browser will draw. Six shape modes cover the real cases: paste a custom d attribute from Figma, Illustrator, or a code snippet; sketch a straight line with two endpoints; build a rounded rectangle outline (sides plus four arcs) with adjustable corner radius; draw a perfect circle from a center and radius; draw an ellipse with separate rx and ry; or paste a polyline points list for stars, arrows, signatures, and zigzags. Every shape is flattened into a single path d string under the hood, so the measurement runs through the same path API regardless of which mode you picked. The animation controls cover everything you actually tweak in real projects: duration in seconds, optional delay, easing (linear, ease, ease-in, ease-out, ease-in-out, and two cubic-bezier curves from common UI kits), once or loop or ping-pong repeat, draw-in or draw-out direction, stroke width, and stroke color. The live preview replays on every change so you can see exactly how the dash advances, and a Replay button lets you re-trigger one-shot animations without changing inputs. Output is shown in four ready-to-paste formats: a CSS rule with the keyframes block, an SVG markup snippet that already uses the .path class, a React inline style object, and a Tailwind arbitrary-value class pair for stroke-dasharray and stroke-dashoffset. The stroke color defaults to currentColor in the copied output so you can theme the path with a parent class. Everything runs in your browser, so the paths, signatures, and SVG snippets you measure here never leave your device.

Free to use. Works in your browser. No signup, no login.