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.
2 – Elastic SVG Elements
Some inspiration for elastic components with SVG shape animations for enhanced UI interactions.
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.
4 – Animated SVG Icon
How to optimize SVG code and animate an SVG icon using CSS and Snap.svg library.
5 – Animate Text with SVG Paths
Animate the Drawing of Text via SVG paths and CSS3
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.
7 – SVG Modal Window
A simple modal window with an animated SVG background.
8 – Elastic Progress
An elastic SVG progress loader based on the Dribbble shot “Download” by xjw and implemented with SVG and TweenMax.
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.
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!
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.
12 – Animated SVG Image Slider
A simple, responsive carousel with animated SVG paths used as transition effects.
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.
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.
15 – Card Expansion Effect with SVG clipPath
A morphing card expansion effect enhanced by a low poly background animation, using SVG clipPath and Trianglify.
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.
17 – Animated SVG Hero Slider
A full page slider, with animated SVG elements used as transition effects.
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.