SVG Path Animator

SVG line-drawing animation is one of the most satisfying visual effects on the web, and it is achieved with a surprisingly simple CSS trick that has become an industry standard technique. The effect requires no JavaScript libraries, no canvas API, and no complex maths — just two CSS properties and a single @keyframes rule. Understanding how it works reveals the elegance of SVG's vector model and the power of CSS animation when applied to presentation attributes. The key to the technique lies in two SVG stroke properties: `stroke-dasharray` and `stroke-dashoffset`. The dasharray property defines a pattern of dashes and gaps for the stroke — for example, `stroke-dasharray: 10 5` means a 10-unit dash followed by a 5-unit gap, repeating. But if you set `stroke-dasharray` to a single value equal to (or larger than) the total length of the SVG path, and set `stroke-dashoffset` to that same value, the entire stroke is "hidden" because the offset pushes the dash pattern past the visible portion of the path. Animating the dashoffset from that maximum value down to zero brings the dash back into view, starting from the beginning of the path and progressing to the end — and because a single dash covers the entire path, this creates the illusion that the path is being drawn in real time. In practical terms, the CSS looks like this: ```css .svg-path { stroke-dasharray: 500; stroke-dashoffset: 500; animation: draw 2s ease forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } ``` When you apply this to an SVG `<path>` element, the browser animates the stroke-dashoffset from 500 to 0 over 2 seconds, and the stroke appears to trace along the path. The magic number 500 is the approximate length of the path — it works as long as the dasharray value is greater than the actual path length (any excess is simply invisible beyond the end of the path). For a truly precise implementation, you would use the JavaScript method `path.getTotalLength()` to get the exact path length and use that as the dasharray/offset value. This tool does exactly that in the preview so the animation is always accurate regardless of the path data you provide. The beauty of this technique is that it works on any SVG path, no matter how complex. A simple straight line draws in a single smooth motion. A cursive signature traces every letterform. An intricate logo with nested paths draws each curve in sequence (when applied individually to each path). A geometric pattern reveals itself line by line. The technique is resolution-independent because SVGs scale natively, so the animation looks sharp at any size, on any screen. Why use a tool for this instead of writing the CSS directly? The challenge is that the dasharray value must be manually set to a number larger than the path length, and getting the path length requires either measuring manually (tedious and error-prone) or using JavaScript (inconvenient). The tool removes this guesswork — you paste the path data, and the preview calculates the real path length, sets the correct dasharray/offset, and shows you the result. If you adjust the stroke width or colour, the preview updates instantly. If you change the animation duration or easing, you see the effect immediately. The five preset shapes provide ready-to-use SVG paths that demonstrate common use cases. The Heart path is a classic icon suitable for like buttons or favicons. The Star is a five-pointed star shape useful for ratings or decorative accents. The Arrow shows a simple chevron or direction indicator — great for scroll-down hints or navigation cues. The Checkmark is a smooth tick symbol perfect for success states and form validation. The Circle is perhaps the most instructive: drawing a circle stroke-by-stroke demonstrates how the technique handles closed paths, where the dashoffset starts at the top (12 o'clock position) and progresses clockwise. Performance of this technique is excellent. The CSS animation runs on the compositor thread because it only changes the `stroke-dashoffset` presentation attribute, which does not trigger layout or paint. SVGs themselves can be hardware-accelerated when they are relatively small and simple (under a few hundred path commands). For very large or complex SVGs with hundreds of path elements, rendering may become CPU-bound, but the animation itself adds trivial overhead. One useful optimisation: apply `will-change: stroke-dashoffset` to the animated path, which hints to the browser to promote the element to a GPU layer before the animation starts. Browser support for animating stroke-dashoffset is universal — it works in Chrome, Firefox, Safari, Edge, and even Internet Explorer 11 (though IE may require the SVG to have explicit `width` and `height` attributes rather than relying on CSS). The @keyframes rule for the animation is also universally supported. The tool generates standards-compliant CSS that works on any browser released in the last decade. Use cases go far beyond decorative effects. Loading spinners made of animated SVG circles are used on thousands of websites. Progress indicators that draw a circular or linear path as a task progresses. Animated logos that reveal themselves on a loading or splash screen. Interactive diagrams where the user clicks a "Reveal" button and sees the structure drawn step by step. Educational illustrations where each line appears as the accompanying text is read. Signature animations on testimonials or personal portfolio pages. The technique is versatile enough to cover all of these with the same simple CSS.