Free tools Windows power users keep installed
One-click scans. No signup required.
SVG line animation creates the familiar self-drawing effect by moving a dash pattern along a stroked shape. The path itself stays the same: the animation changes which parts of its stroke are painted.
What makes an SVG line look like it is drawing itself?
SVG strokes can be painted as alternating dashes and gaps. The stroke-dasharray property sets the lengths of those painted and unpainted segments; stroke-dashoffset shifts the pattern along the shape.
Set a dash and gap long enough to span the path, then start with the dash offset near the path’s length. The stroke appears hidden because the gap covers it. Animate the offset toward zero, and the dash moves into view along the path.
This is a paint effect, not a geometry animation. It reveals a stroke that follows the existing path; it does not change the path’s d data or make the path itself grow.
#1 Best Overall
How to create a basic line-reveal animation
The following example uses a cubic Bézier path. Its dash values are illustrative, not universal: adjust them to the path’s effective length.
<svg viewBox="0 0 240 80" aria-hidden="true">
<path class="draw" d="M10 40 C60 5 170 5 230 40" />
</svg>.draw {
fill: none;
stroke: currentColor;
stroke-width: 4;
stroke-linecap: round;
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: draw 1.5s ease forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}For an SVG that is 300 user units long, the initial dash and offset can hide the stroke, and the animation reveals it. If the path is shorter or longer, a value of 300 may leave part of it visible or unrevealed. The browser’s getTotalLength() method can return the computed length of an SVG path in user units.
How to size the dash to the path
Measure the path with JavaScript
For a path whose length is not known in advance, call getTotalLength() and use the returned value for the dash and starting offset. This is useful when one script needs to handle paths of different lengths.
const path = document.querySelector(".draw");
const length = path.getTotalLength();
path.style.strokeDasharray = length;
path.style.strokeDashoffset = length;Then animate stroke-dashoffset from that length to zero. This example sets the initial values only; the animation can still be defined in CSS.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsUse the SVG pathLength attribute
An author can assign a convenient scale to a path with SVG’s pathLength attribute, which can make dash values easier to manage. Check the chosen scale against the path and rendering you intend to use.
Why percentages are usually not a substitute
Dash-offset percentages are based on the normalized diagonal of the current SVG viewport, not on the path’s total length. A percentage therefore does not reliably mean “this fraction of the line.” For a path-relative reveal, use a measured length or a deliberate pathLength scale instead.
What the dash properties control
stroke-dasharraysets the alternating lengths of painted dashes and gaps. A single value repeats as both a dash and a gap; if the list has an odd number of values, SVG repeats it to form an even-length pattern.stroke-dashoffsetshifts that repeated pattern along the path. Animating it changes where the painted portion appears.stroke-linecapcontrols the stroke’s end shape. Rounded caps can make the moving end of a reveal look softer.
These stroke properties work on paths and other stroked SVG shapes, including lines, circles, ellipses, polygons, polylines, rectangles, and SVG text elements.
How to animate several paths or choose an animation method
Each SVG element has its own stroke properties, so multi-part artwork can reveal one path at a time. Set separate durations or delays when the drawing order matters; SVG does not automatically sequence a group of paths for this effect.
What’s actually slowing this PC down?
Pick the symptom - the matching free tool is one click away.
| Method | Useful when | Considerations |
|---|---|---|
| CSS keyframes | You want a straightforward reveal coordinated with page styling. | Set the stroke properties on each element and define its timing in CSS. |
SVG <animate> |
You want the animation specified within the SVG. | It can animate an SVG attribute over time; CSS is often easier to coordinate with surrounding page styles. |
| JavaScript | You need runtime path-length measurement, custom values, or coordination among many paths. | It adds scripting, but getTotalLength() can supply path-specific measurements. |
For a visual workflow, SVGator documents a Stroke Offset animator and SVG export on its official site. Figma Motion documents motion authoring, code handoff, and SVG export, though its cited page does not specifically demonstrate line-reveal animation. Keyshape documents vector path editing, keyframe animation, and SVG animation export. These are optional; hand-coded CSS is enough for the basic effect.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.How to handle reduced motion and automatic animation
Respect a visitor’s reduced-motion preference by disabling the animation or showing the completed stroke immediately. The prefers-reduced-motion media feature lets CSS detect that preference:
@media (prefers-reduced-motion: reduce) {
.draw {
animation: none;
stroke-dashoffset: 0;
}
}WCAG 2.2 Success Criterion 2.2.2 addresses automatically started moving, blinking, or scrolling information that lasts more than five seconds and appears alongside other content: it requires a way for users to pause, stop, or hide it unless the movement is essential. A brief, one-time reveal does not automatically meet those conditions; a long-running loop may.
Browser support and compatibility checks
MDN describes the dash properties as widely available and well established. Its compatibility references report availability across browsers since March 2020 for the SVG attributes and since April 2017 for the CSS stroke-dashoffset property. If the animation must work in a legacy browser or embedded SVG renderer, check the compatibility tables for that specific environment.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →If the SVG uses both a presentation attribute and a CSS declaration for stroke-dashoffset, the CSS property takes precedence. Keep the two forms consistent or remove the one you do not need to avoid confusion.
Quick Recap
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
