lightweight and customizable React component to smoothly animate text reveals through SVG animations.
MIT License
React SVG Reveal is a lightweight and customizable React component that allows you to create SVG reveal animations. With this component, you can gradually reveal text in a visually appealing way, adding an element of suspense and elegance to your web projects.
git clone https://github.com/TommyRiquet/react-svg-reveal.git
cd react-svg-reveal
npm install react-svg-reveal --save
# or
yarn add react-svg-reveal
import React from 'react';
import SVGReveal from 'react-svg-reveal';
function App() {
return (
<div>
<SVGReveal
width={750},
height={600},
strokeWidth={2},
viewBox='0 0 800 100',
path={['M0 100V0l50 50 50-50v100L75 75l-25 25-25-25z']}
/>
</div>
);
}
function App() {
return (
<div>
<SVGReveal
width={750},
height={600},
strokeWidth={2},
viewBox='0 0 800 100',
path={['M0 100V0l50 50 50-50v100L75 75l-25 25-25-25z']}
backgroundColor='black'
stroke='white'
strokeWidth={2}
strokeLineCap='square'
/>
</div>
);
}
The following props are available for customizing the SVGReveal component:
Prop | Type | Default | Description |
---|---|---|---|
path | Array of strings | (required) | svg path representing the text to be revealed. |
viewBox | string | (required) | svg viewBox representing the size of the text to be revealed. |
height | number | (required) | height of the svg element. |
width | number | (required) | width of the svg element. |
backgroundColor | string | transparent | background color of the svg element. |
stroke | string | black | stroke color of the svg element. |
strokeWidth | number | 20 | stroke width of the svg element. |
strokeLinecap | string | round | stroke |
For more usage examples and ideas, check out the 'examples' folder in this repository.
Contributions to this project are welcome! If you find any issues or have suggestions for improvements, please open an issue or submit a pull request.
This project is licensed under the MIT License - see the LICENSE.md file for details.