18 Examples of SVG With Awesome Effects

SVG is much more powerful than other image formats we can use on the web as we can manipulate them with code (either in our text editor or with CSS / JS). Otherwise, it can look crisp at all screen resolutions, can have super small file sizes, and can be easily edited and modified.

In this post, we collected 18 examples of SVG with awesome effects. Enjoy.


1 – Svg Loaders


Loading icons and small animations built purely in SVG, no CSS or JS.

Demo Download

2 – Elastic SVG Elements


Some inspiration for elastic components with SVG shape animations for enhanced UI interactions.

Demo Download


3 – Animated text fills with CSS and SVG


A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.

Demo Download


4 – Animated SVG Icon


How to optimize SVG code and animate an SVG icon using CSS and Snap.svg library.

Demo Download


5 – Animate Text with SVG Paths


Animate the Drawing of Text via SVG paths and CSS3

Demo Download


6 – Animating an SVG Menu Icon with Segment


A tutorial on how to implement an animated menu icon based on the Dribbble shot by Tamas Kojo using SVG and Segment, a JavaScript library for drawing and animating SVG paths.

Demo Download


7 – SVG Modal Window


A simple modal window with an animated SVG background.

Demo Download


8 – Elastic Progress


An elastic SVG progress loader based on the Dribbble shot “Download” by xjw and implemented with SVG and TweenMax.

Demo Download


9 – Animate Plus


Animate Plus is a CSS and SVG animation library for modern browsers. Animate Plus is performant and lightweight (3KB gzipped), making it particularly well-suited for mobile.

Demo Download


10 – jQuery DrawSVG


This plugin uses the jQuery built-in animation engine to transition the stroke on every <path> inside the selected <svg> element, using stroke-dasharray and stroke-dashoffset properties.

  • Weights less than 2KB minified and 800 bytes gzipped.
  • Easy to use.
  • Easing and stagger support.
  • Free!

Demo Download

11 – Motion Blur Effect with SVG


A tutorial on how to create a motion blur effect on HTML elements using JavaScript and an SVG blur filter.

Demo Download


12 – Animated SVG Image Slider


A simple, responsive carousel with animated SVG paths used as transition effects.

Demo Download


13 – Interactive Drag and Drop Coloring Concept


A little fun experiment where you can color a website mockup by dragging and dropping a color droplet from a palette.

Demo Download


14 –  Creative Gooey Effects


A set of examples that use a gooey SVG filter for creating a variety of different effects for all kinds of website components.

Demo Download


15 – Card Expansion Effect with SVG clipPath


A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.

Demo Download


16 – Inspiration for Text Styles and Hover Effects


A couple of creative text styles and hover effects for your inspiration. Some effects use experimental techniques including SVG masking and Canvas.

Demo Download


17 – Animated SVG Hero Slider


A full page slider, with animated SVG elements used as transition effects.

Demo Download


18 – Playful Trampoline Effect


A little playful content navigation effect that uses the draggable Elastic Stack and Snap.svg for animating a background shape like a trampoline. The demos are a tribute to Leonard Nimoy.

Demo Download


You may also like...

Leave a Reply

Your email address will not be published. Required fields are marked *