Welcome to the Animated SVG Library - a budding collection of small, high-quality SVG animations that are designed to give your web projects an extra flair. Even though it is a small project at the moment, I hope to expand this repository with more unique and versatile SVG animations over time.
I initially created these SVG animations for my personal projects, and found them to be a great asset in adding a touch of creativity and visual appeal. Realizing others might enjoy them as well, I decided to share these handcrafted SVGs with the community. Though the library is small for now, it is my hope that it will grow and become a valuable resource for developers and designers alike.
To start using the SVGs in this library, follow these steps:
- Clone the repository to your local machine using
git clone https://github.com/kyrregjerstad/animated-SVGs.git
. - Navigate to the folder containing the SVG you want.
- Copy the SVG file to your project directory.
- Incorporate it in your HTML either inline or by importing the SVG file through JavaScript.
- Change the fill color by using the CSS custom property --fill-color in the root of each SVG file. For example:
--fill-color: #000000;
. - The animations are triggered on hover, but this can also be changed in the SVG file style section.
Your contributions can help this library grow! If you've created an SVG animation that you'd like to share with the community, please feel free to make a pull request. See the Contribution Guide for more details.
This project is licensed under the MIT License. See LICENSE for more details.
For any inquiries or feedback, feel free to open an issue in the GitHub repository.
Even though our Animated SVG Library is small, we hope you find it helpful. If you do, please consider giving it a star. Your support can help this project grow!
This README is subject to updates. Make sure to pull the latest version of the repository to get the most recent SVG animations.
Happy Coding! โจ