// draw lines with css — stroke-dasharray magic
Create line-drawing animations using stroke-dasharray and stroke-dashoffset. Generate CSS keyframes for any SVG path with live preview and export.
Configure & Generate
Adjust settings then click Generate AnimationChoose a preset shape or paste your own SVG <path> element into the custom path field.
Set duration, delay, stroke width, color, easing, and direction using the controls on the left.
Click Generate to see the live animation and copy the CSS, HTML, or inline SVG code for your project.
The SVG Stroke Animation Generator helps you create line-drawing animations purely with CSS using the stroke-dasharray and stroke-dashoffset technique — no JavaScript animation libraries needed.
Set the dash length to the path's total length, then animate offset from full to zero: the stroke draws itself smoothly across any SVG path.
stroke-dasharray defines a dash pattern for an SVG stroke. When set to the total path length, the path appears as one long dash. stroke-dashoffset shifts that dash — animating it from the full length to zero makes the line appear to draw itself.
In JavaScript you can use pathElement.getTotalLength() to get the exact pixel length of any SVG path. This generator does that automatically and bakes the correct value into the exported CSS.
Yes — paste any <path>, <circle>, <rect>, <polyline>, or <polygon> element. The technique works on any SVG element that supports a stroke.
Yes. The stroke-dasharray and stroke-dashoffset CSS properties have excellent browser support including all modern browsers and IE11+. The CSS animations generated use standard @keyframes with no vendor prefixes needed for modern browsers.
Draw In animates the stroke appearing once. Draw + Erase draws the path, then animates it disappearing — a two-phase animation. Infinite Loop continuously repeats the draw animation.
Add the generated class to your SVG <path> element and include the CSS in your stylesheet. For inline SVGs you can also use the generated <style> tag inside the SVG file itself.
Yes — use the Delay slider to offset each path's animation start time. Generate code for each path with increasing delays (e.g. 0s, 0.3s, 0.6s) to create a sequential drawing effect.
Yes. The exported CSS uses standard @keyframes, no libraries, no external dependencies. Copy it directly into your stylesheet. The HTML output is a complete self-contained example you can drop into any page.
An SVG Stroke Animation Generator is a browser-based tool that automates the creation of CSS-powered line-drawing animations. Instead of manually calculating path lengths, writing keyframes, and experimenting with stroke-dasharray values, you configure your animation visually and get production-ready CSS code in seconds.
The tool works with any SVG path — from simple geometric shapes to complex illustrations. It calculates the precise path length needed for the animation technique and generates clean, browser-compatible CSS that you can immediately drop into your project.
💡 Looking for premium CSS templates and UI kits with pre-built SVG animations? MonsterONE offers unlimited downloads of templates, UI kits, and design assets — worth checking out.
The core mechanic behind SVG stroke animations is surprisingly elegant. Every SVG path has a total length — the number of pixels the stroke travels from start to end. The stroke-dasharray property controls the pattern of dashes and gaps along that stroke. When you set stroke-dasharray equal to the path's total length, the entire stroke becomes one giant "dash" with no visible gap.
The stroke-dashoffset property then shifts where that dash starts relative to the path. At an offset equal to the path length, the dash is shifted completely off the visible portion — the stroke is invisible. At an offset of zero, the full stroke is visible. Animating offset from the full path length down to zero creates the illusion of the line drawing itself.
Here's the fundamental pattern the generator produces:
pathElement.getTotalLength() in JavaScript (or this tool) to get the exact pixel length. For a typical circle at 100px radius, that's approximately 628px.stroke-dasharray: 628 (or whatever your path length is) to make the stroke one continuous dash.stroke-dashoffset: 628 to push the dash entirely off the path — making it invisible.@keyframes to transition stroke-dashoffset from 628 to 0 over your desired duration.This generator supports four animation modes, each suited to different creative goals:
The choice of easing function dramatically changes how an animation feels. A linear draw looks mechanical; an ease-out draw starts fast and settles gracefully. This generator supports all standard CSS easing curves plus a spring overshoot option using cubic-bezier(0.34, 1.56, 0.64, 1) — which creates a satisfying "snap" at the end of the draw. For a typewriter-like effect, the steps() function draws the path in discrete jumps.
The preset shapes cover common use cases, but the real power comes from using your own SVG artwork. Export any vector shape from Figma, Illustrator, or Inkscape as an SVG, copy the <path> element's d attribute, and paste it into the custom path field. The generator handles path length calculation automatically regardless of path complexity.
For best results with custom paths, ensure your SVG uses a consistent viewBox scale. Complex paths with many curves will benefit from slower durations (2–4 seconds) to let the drawing motion read clearly. Paths with sharp direction changes look especially dramatic with ease-in-out easing.
SVG stroke animations are one of the most versatile and performance-friendly animation techniques available on the web. Unlike JavaScript-heavy animation libraries, pure CSS stroke animations run on the GPU compositor thread — they won't cause layout reflows or block the main thread. This makes them safe to use even on complex pages.
Common applications include logo reveal animations (a brand mark that draws itself on page load), animated chart lines that build from left to right, handwriting effects for signatures and decorative text, instructional diagram paths that guide the viewer's eye, and CSS-only loading indicators that replace GIF spinners. Because the technique is pure CSS, it works without any JavaScript framework — just a stylesheet and an inline SVG.
To keep stroke animations smooth at 60fps, always add will-change: stroke-dashoffset to animated elements in production — this hints to the browser to promote the element to its own compositor layer. Avoid animating many complex paths simultaneously on mobile devices. For sequences of multiple paths drawing in order, use CSS animation-delay to stagger start times rather than JavaScript timing, which keeps the animation entirely off the main thread.