Today we are going to show how to use SVG Filters to apply a gooey-like effect to HTML elements. We’ll first cover some basics of the technique and then we’ll demonstrate several creative use cases for common website elements, like menus, apps, selections, paginations and more.
Best jQuery SVG Tutorial Plugins & Tutorials with Demo
Playful Trampoline Effect with CSS3 & SVG
Today we want to share a fun little effect with you. The idea is to simulate the bounciness of a trampoline when navigating the image stack. For the draggable image stack we are using the Elastic Stack. The SVG animations are done with the help of Snap.svg. We will also use CSS Transitions for all the effects.
Animated Text Fills with CSS3 & SVG
A tutorial on how to create various types of (animated) fills and strokes for text using different techniques including CSS and SVG.
In this article I’m going to share my experiments and five ways to create patterned filled text. In three out of these five cases we will retain the ability to select the text. Of course we’d like to have that for every case but with some workarounds we can solve this problem, too.
Animated SVG Globe with Markers and Logos
Spinning Earth Globe animations with markers and logos’ carousel for Desktop and Mobile. Perfect way to visualize location of event/office/store/city or to showcase partners/sponsors logos.
Features:
- Globe rotation made up with flat world maps animated in circle mask
- Smooth animation (done with Velocity.js)
- Animation speed and sequence controlled with Javascript (defined variables)
- Animation shows up when the Globe becomes visible in the browser
- Resolution independent SVG graphics (perfect for displays with higher pixel density, such as Retina)
- Easy to change width, colors or visibility of elements, animation parameters
Elastic SVG Elements Animation
Today we’d like to share some inspiration for adding elasticity to elements. The idea is to integrate an SVG element into a component and then animate it from one path to another with an elastic animation. Using SVGs like this can make things like menus, buttons or other elements more interesting and make the interaction look more organic with a natural feel to it.
