Glossary · Animation
SVG stroke
The outline of an SVG shape (line, curve, circle, rectangle), with its own color and thickness, separate from the fill.
In detail
In an SVG graphic, each shape has two parts that are painted separately: the fill (fill) and the stroke (stroke), which is the line that traces the outline. A stroke can have color, thickness, and, if you want, a dash pattern.
A stroke can only be animated when the shape has a measurable outline: in BannerMotion it works on path, line, polyline, circle, and rect. Text converted to outlines or a logo made only of fills has no stroke to draw.
Example
<path d="M10 80 Q 95 10 180 80" fill="none" stroke="#0E1116" stroke-width="4" />Related terms
Where it appears
[This term does not appear in any guide yet.]