Bring your SVGs to life
A React.js wrapper component that lets you trigger an "animated lines" effect within your SVGs by applying CSS animations*. Use it to add visual interest to icons, diagrams, loading spinners, or just any fun stuff!
How it works
The component wraps your SVG and animates the
stroke-dashoffset property on every
path element within. To accomplish this, it injects a
style tag with a generated string of CSS. For a description of the technique, see this article.
While CSS animation comes "free", it doesn't work for SVGs on IE/Edge browsers. As of
npm install react-mt-svg-lines --save
SvgLines into your component (you can import it under any name)...
; // ES6+// or...var SvgLines = default;
In your JSX, wrap it around any valid SVG...
<SvgLines = =><svg ="0 0 100 100"><path ="green" ="10" ="none" ="M20.8,51c0,0,20.8,18.2,21.5,18.2c0.6,0,33.3-38.5,33.3-38.5" /></svg></SvgLines>
The component comes with a reasonable set of defaults. The only prop required to engage it is
Any custom CSS class you'd like applied to the component's
span wrapper. Default is
animate: string || number || bool
Your animation "trigger key":
falserender the SVG instantly (default)
true || stringtrigger the animation immediately
numbertrigger the animation after an initial delay of number (ms)
"hide"draw the SVG as invisible (rendered with
If you need to re-trigger the animation, simply pass in a new
number (different from the last value). You can generate it, e.g.
String( Date.now() ). Have a look at the DemoPage code.
Callback function, executes when animation concludes.
Desired duration of one full cycle of the entire animation, across all paths (ms). Default is
false (kicks in on IE/Edge only, via browser sniffing).
Apply a fade-in transition to each path. If a path has a
fill color, the entire element will fade in while the line is drawn. Default is
false. Not supported in JS mode.
Any additional valid CSS
animation shorthand props, specifically
iteration-count || direction || fill-mode || play-state. Default is
"forwards" (play once and stop), but feel free to experiment. For example, the spinner example is set to
"2 alternate-reverse both". Partially supported in JS mode, respects defaults,
stagger: number (0-100)
Delay between the start times of each path (when multiple paths are present within the SVG). Default is
0. Not supported in JS mode.
Desired CSS "timing function" type:
"ease" || "ease-in" || "ease-out" || "ease-in-out" || "linear" || "step-start" || "step-end". Default is
"ease". Mostly supported in JS mode, with Tween.js equivalent presets.
propsare passed through to the wrapper
What if you don't want the animation applied to ALL paths inside your SVG? Add a data attribute of
data-mt="skip" to any path element and it will draw instantly. So will other SVG shapes (see below).
- The technique only applies to SVG
pathelements with a
strokedefined. Other SVG primitives, e.g. circles, rectangles, polylines, will render instantly.
- The path elements should sit at the same nesting level within the SVG structure (otherwise, the generated CSS rules will not target correctly). Also, staggered timing is applied to the elements in the order they appear in the SVG. You can edit your SVGs manually, or try svgo.
- Remember to specify the
viewBoxon your SVGs, so they can be scaled to any size. By default, the SVG content will expand to fill its container, but you can give it a
widthattribute (either in finite units, or percentage).
- IE/Edge: Doesn't seem to work on thick lines, round
stroke-linecapappears regardless of offset, and other irregularities..
- Fork repo, create a new branch, make desired fixes/improvements to
src/utils.js(the source, not the
- Build the demo
npm run buildand make sure it runs well
- Submit a PR!