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.


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.

SVG Effects 1  SVG Effects 2  
A link to us would be lovely =:)

Advertisement