How to Animate SVG Strokes — Drawing, Pulsing & Morphing Effects
SVG stroke animations with stroke-dasharray and CSS create powerful draw-on, pulse, and border animation effects.
Drop your image here
Supports PNG, JPG, BMP, WEBP up to 5MB
Pulsing Border Animation with SVG Stroke
Animate a shape's `stroke-dasharray` from a value to 0 while cycling `stroke-dashoffset` to create a marching ants or pulsing border effect. This works well as a button highlight or focus indicator.
- Set stroke-dasharray='5 5' for dashed border
- Animate stroke-dashoffset from 0 to 10 with linear infinite
- Creates marching ants selection effect
Stroke Width Pulse Animation
Animate `stroke-width` between a thin and thick value with CSS keyframes and an `ease-in-out` timing function. This creates a breathing or heartbeat pulse effect around shapes and icons.
- @keyframes pulse { 0% { stroke-width: 1; } 50% { stroke-width: 4; } 100% { stroke-width: 1; } }
- Apply animation to SVG circle or rect for pulsing border
- Use for notification badges, loading states, or attention cues
Frequently Asked Questions
How do I animate a circular SVG border with stroke?
Set stroke-dasharray to the circle circumference (2Ï€r). Animate stroke-dashoffset from the circumference to 0 for a circular fill animation, or loop between two offset values for a spinner.
Can I animate stroke color in SVG?
Yes — animate the stroke property with CSS @keyframes: @keyframes colorCycle { 0% { stroke: blue; } 50% { stroke: red; } 100% { stroke: blue; } }
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