No Login Data Private Local Save

SVG Line Drawing Animation Generator - Online stroke‑dasharray

Developer Tools Generator animation line draw stroke‑dasharray SVG
63
0
0
0
Path: -- px
Stroke Color
Stroke Width 3px
Duration 2.0s
Easing
Delay 0s
Fill Mode
Iterations
Generated Code
Frequently Asked Questions
What is an SVG line drawing animation?
SVG line drawing animation is a technique that makes SVG paths appear as if they're being drawn in real-time. It uses the CSS properties stroke-dasharray and stroke-dashoffset to control which parts of a path are visible, creating the illusion of a pen tracing the outline. This technique is widely used for logo animations, icon reveals, and artistic web effects.
How do stroke-dasharray and stroke-dashoffset work together?
stroke-dasharray defines the pattern of dashes and gaps on a stroke. For line animations, you set it to the total path length so the entire path becomes one long "dash." stroke-dashoffset shifts this dash pattern. By animating stroke-dashoffset from the path length down to 0, the dash appears to gradually reveal the entire path. The path length is obtained using JavaScript's getTotalLength() method.
Can I animate multiple SVG paths simultaneously?
Yes! All <path> elements within your SVG can be animated together. Simply apply the same CSS animation class to each path, or use a group selector. Each path will need its own stroke-dasharray value matching its individual length. Our tool automatically calculates lengths for all paths in your SVG and generates the appropriate CSS rules.
What browsers support SVG line animations?
SVG line drawing animations are supported in all modern browsers: Chrome 36+, Firefox 31+, Safari 7.1+, Edge 79+, and Opera 23+. Mobile browsers including iOS Safari 8+ and Android Chrome also fully support this technique. The getTotalLength() method has near-universal support. For IE11, a polyfill or fallback may be needed.
How do I make the animation loop continuously?
Set the CSS animation-iteration-count property to infinite. In our tool, select "infinite (loop)" from the Iterations dropdown. For a smooth continuous loop, you may also want to use the alternate animation direction, which makes the line draw and then undraw in a seamless cycle.
How do I calculate the total length of an SVG path?
JavaScript provides the getTotalLength() method on SVG <path> elements. Simply select the path element and call this method to get its exact length in user units. For example: document.querySelector('path').getTotalLength(). This tool automatically performs this calculation for you and displays the result in the preview area.
Can I use SVG files exported from Illustrator or Figma?
Absolutely! Export your artwork as an SVG file, open it in a text editor, and copy the <path> elements or the entire SVG code. Paste it into our Custom input area. The tool will automatically extract all paths, calculate their lengths, and generate animation code. For best results, use outlined/stroked artwork rather than filled shapes.
Why does my path animation look choppy or incomplete?
Common causes include: (1) The stroke-dasharray value is smaller than the actual path length, causing the dash to repeat. Always use getTotalLength() for accuracy. (2) The path has multiple disconnected sub-paths (multiple 'M' commands) — getTotalLength() sums all sub-paths, but each sub-path animates simultaneously. (3) Stroke-linecap rounding can cause slight visual artifacts at path endpoints.
🔧 Related Tools