SimplytheBest SVG Effects 1
SVG stands for Scalable Vector Graphics and is an XML-based vector image format for two-dimensional graphics that supports interactivity as well as animation. SVG images can be created and edited with a text editor and can be manipulated with code, which makes it quite different from the image formats you're used to that required graphics editor software. All modern browsers have SVG rendering.
To learn more about SVG, try SVG on the Web - A Practical Guide.
To get you started, here is page 1 of our SimplytheBest SVG Effects Collection.
On this page:
- › SVG Loading icons
- › SVG Encoder
- › SVG Login/Logout Animation
- › SVG CSS Gooey Menu (Version 2)
- › SVG CSS Gooey Menu (Version 3)
- › SVG React Sci-Fi Door Lock UI
- › SVG jParallax
- › SVG Fullscreen drag-slider with parallax
- › SVG Modal Animations
- › SVG Clip Path Hover Effect
You may also need this:
1. SVG Loading icons
See the Pen SVG Loading icons by Aurer (@aurer) on CodePen.
2. SVG Encoder
See the Pen SVG Encoder by yoksel (@yoksel) on CodePen.
3. SVG Login/Logout Animation
See the Pen Login/Logout animation concept by Nikolay Talanov (@suez) on CodePen.
4. SVG CSS Gooey Menu (Version 2)
See the Pen CSS Gooey Menu (Version 2) by Lucas Bebber (@lbebber) on CodePen.
5. SVG CSS Gooey Menu (Version 3)
See the Pen CSS Gooey Menu (Version 3) by Lucas Bebber (@lbebber) on CodePen.
6. SVG React Sci-Fi Door Lock UI
See the Pen React Sci-Fi Door Lock UI by Chris Gannon (@chrisgannon) on CodePen.
7. SVG jParallax
See the Pen jParallax by Monkey Company (@monkey-company) on CodePen.
8. SVG Fullscreen drag-slider with parallax
See the Pen Fullscreen drag-slider with parallax by Nikolay Talanov (@suez) on CodePen.
9. SVG Modal Animations
See the Pen Modal Animations by Jesse Couch (@designcouch) on CodePen.
10. SVG Clip Path Hover Effect
See the Pen SVG clip-path Hover Effect by Noel Delgado (@noeldelgado) on CodePen.
