SVG Path Animator
Paste a path, measure its real length, and animate it with a stroke-dash draw-on, an optional travelling dot and a scrubber. Export the CSS, the SMIL markup or a standalone SVG.
Live preview
length —Path
Animation
Stroke
CSS
/* 2500ms, cubic-bezier(0.65,0,0.35,1), forward draw */
.draw {
stroke-dasharray: 0.00 0;
stroke-dashoffset: 0.00;
animation: draw-path 2500ms cubic-bezier(0.65,0,0.35,1) 0ms infinite forwards;
}
@keyframes draw-path {
to { stroke-dashoffset: 0; }
}
<!-- path length measured by getTotalLength(): 0.000 -->SMIL (self-contained SVG)
<path d="M 100 10 L 123 74 L 190 74 L 136 114 L 156 180 L 100 142 L 44 180 L 64 114 L 10 74 L 77 74 Z" fill="none" stroke="#4F46E5" stroke-width="6" stroke-linecap="round" stroke-linejoin="round"
stroke-dasharray="0.00 0"
stroke-dashoffset="0.00">
<animate attributeName="stroke-dashoffset" from="0.00" to="0"
dur="2500ms" begin="0ms" repeatCount="indefinite" />
</path>About this tool
The path length comes from the browser's own getTotalLength(), and the travelling dot uses getPointAtLength(), so the draw-on is exact for arcs, curves and sub-paths rather than an approximation. Everything — measuring, animating, scrubbing and exporting — runs entirely in your browser; nothing is uploaded.
- 100% free — no account needed
- Runs in your browser
- Nothing is uploaded
Frequently asked questions
Is SVG Path Animator really free?
Yes. SVG Path Animator is completely free on PureBrowser — every feature, with no account, no trial, and no credit card.
Does SVG Path Animator upload my data?
No. SVG Path Animator runs entirely inside your browser, so anything you type, paste, or open stays on your own device.
Do I need to sign up or install anything?
Neither. There is no account and nothing to download — open the page and SVG Path Animator is ready to use on desktop or mobile.
Does SVG Path Animator work offline?
Once the page has loaded, yes. All of the processing happens locally in your browser, so it keeps working without a connection.
More design & visual
CSS Gradient Generator
Create linear CSS gradients with a live preview.
CSS Box Shadow Generator
Build and preview CSS box-shadow values with one-click copy.
CSS Glassmorphism Generator
Generate frosted-glass CSS with backdrop blur and copy-ready styles.
QR Code Generator
Generate custom QR codes for any text or URL.
WiFi QR Code Generator
Generate a scannable QR code to share WiFi credentials instantly.
Letter Profile Picture
Generate avatar images from initials with custom colors.