SVG and CSS animation get along better than most people realize. Because an SVG is just markup, its shapes are elements you can target and animate the same way you would a div. No plugin, no export step, no timeline software. Two effects cover the bulk of what teams actually ship: a line that draws itself, and an icon that resolves into a checkmark.
The self-drawing line
This is the effect where a stroke appears to draw itself onto the screen, popular for signatures, logos, and illustrations. It leans on one lovely quirk of SVG strokes: stroke-dasharray and stroke-dashoffset. Set the dash length to the full length of the path, offset it by that same amount so the whole line is pushed out of view, then animate the offset back to zero.
.draw {
stroke-dasharray: 300;
stroke-dashoffset: 300;
animation: draw 2s ease forwards;
}
@keyframes draw {
to { stroke-dashoffset: 0; }
}The number 300 stands in for the length of your path. You rarely guess it by hand, because a browser will tell you exactly: document.querySelector('.draw').getTotalLength() returns the real figure, and you drop that into both properties. Once the dash equals the path and the offset matches it, the animation walking the offset to zero reels the visible dash into place, one end to the other.
Note forwards on the fill mode. Without it, the moment the animation ends the line snaps back to its hidden starting state, which looks broken. That single keyword holds the finished frame in place, a detail explained in the keyframes guide.
An animated checkmark
The same draw trick makes a satisfying success tick, the kind that appears after a form submits. It is a two-segment path, drawn quickly, usually paired with a circle that draws first.
.check .circle {
stroke-dasharray: 166;
stroke-dashoffset: 166;
animation: draw 0.5s ease forwards;
}
.check .tick {
stroke-dasharray: 48;
stroke-dashoffset: 48;
animation: draw 0.3s ease 0.45s forwards;
}The tick carries a delay of 0.45 seconds, which is roughly how long the circle takes to complete, so the checkmark lands just as the ring finishes. Sequencing two draws with a delay like that is how you choreograph anything more complex than a single move, and it reads as intentional rather than automatic.
Why bother instead of a GIF
You could export a checkmark GIF and be done. Weigh what you give up. A GIF is a fixed grid of pixels, so it blurs the moment it scales past its native size, and it bakes in its colors, so it cannot follow your dark mode or your brand. It also weighs far more than a few lines of markup.
An animated SVG stays razor sharp on a 4K display and a phone alike, inherits currentColor so it recolors itself for free, and often ships in under a kilobyte. For anything vector, a line, an icon, a logo, it is the better answer nearly every time.
One caution: honor reduced motion here too, and show the finished SVG in its completed state rather than mid-draw. For the accessibility pattern see accessible animation, and for the sharp check-drawing cousin of this effect there is the check animation walkthrough. It all ladders up to the pillar on CSS animation.