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

svg-loader

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

Demo Download

2 – Elastic SVG Elements

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

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

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-Text-with-SVG-Paths

Animate the Drawing of Text via SVG paths and CSS3

Demo Download

 

6 – Animating an SVG Menu Icon with Segment

awesome_burger

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

svg-modal-window-featured

A simple modal window with an animated SVG background.

Demo Download

 

8 – Elastic Progress

ElasticProgress

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

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

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

MotionBlur

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

animated-svg-image-slider-featured

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

Demo Download

 

13 – Interactive Drag and Drop Coloring Concept

ColoringConcept

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

CreativeGooeyEffects1

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

CardExpansion

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

LinkStylesHoverEffects

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

animated-svg-hero-slider-featured

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

Demo Download

 

18 – Playful Trampoline Effect

PlayfulTrampolineEffect

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 *