How to Create SVG Draw-On Animations  Path Writing Effect
The SVG draw-on effect animates stroke-dashoffset from path length to zero, making paths appear to write themselves on screen.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
SVG Draw Animation Setup
Get the path's total length with `path.getTotalLength()`. Set `stroke-dasharray` and `stroke-dashoffset` to that value. Animate `stroke-dashoffset` to 0 with CSS  the stroke appears to draw from start to end.
- const len = path.getTotalLength()
- path.style.strokeDasharray = len
- path.style.strokeDashoffset = len
- CSS: @keyframes draw { to { stroke-dashoffset: 0; } }
Sequencing Multiple SVG Path Draws
For multi-path SVGs (like a signature or logo), sequence each path with `animation-delay`. Calculate cumulative durations from each path's length to keep constant drawing speed.
- animation-delay on each path for sequential drawing
- Use animation-fill-mode: forwards to hold the drawn state
- Normalize speed: duration = pathLength / drawSpeed
Frequently Asked Questions
Can I control SVG draw speed per path?
Yes  set animation-duration proportional to each path's getTotalLength() result to maintain consistent drawing speed across all paths.
Does the SVG draw animation work on all browsers?
Yes  stroke-dasharray and CSS animations are universally supported in all modern browsers including Safari and Firefox.
Related guides
Ready to Convert Your Image to SVG?
Free online converter — no sign-up, no watermarks, results in under 3 seconds.
Try It Free — Convert Image to SVG