background preloader

Animated SVG Icons with Snap.svg

Animated SVG Icons with Snap.svg
Using SVGs on websites is becoming more and more easy with great libraries like Snap.svg. Today we want to explore what we can do with it and animate some SVG icons as a practical example. View demo Download source SVG has been one of the most underused technologies when it comes to web development. Despite it’s usefulness and powerful possibilities it’s still a mystery to many and when it comes to integrating it and using animations, many developers don’t know where to start. With great libraries like Snap.svg the use of SVG assets becomes more easy and today we’d like to explore how to animate SVG icons. You’ve surely seen some great examples of animated icons using CSS transitions and animations like the Navicon Transformicons by Bennett Feely which were explained in this excellent collaborative tutorial by Sara Soueidan. Please note that we are working with a modern JavaScript library for manipulating our SVGs. For each icon we want a special animation to happen.

Related:  svghtml cssButtons / iconscanvas, html, svg and js illustrations

SVG Clip Path SVG clip paths, or SVG clipping as it is also called, are used to clip an SVG shape according to a certain path. The parts of the shape inside the path are visible, and the parts outside are invisible. Clip Path Example Here is a simple clip path example: This example defines a clip path that is shaped like a rectangle (the shape inside the <clipPath> element). Simple Icon Hover Effects with CSS Transitions and Animations Previous Demo Back to the Codrops Article Mobile Desktop Partners Support Security Settings Time Videos List Refresh Images Edit Link Mail Location Progress Button Styles A set of flat and 3D progress button styles where the button itself serves as a progress indicator. 3D styles are used for showing the progress indication on one side of the button while rotating the button in perspective. View demo Download source Today we’d like to share some progress button styles with you. You surely know “Ladda” by Hakim El Hattab, a UI concept that indicates progress directly on the button that invokes a loading action. Some of the buttons have a built-in progress bar and today we’d like to explore that idea with some creative progress button styles. Using perspective will allow us to create some fun 3D effects besides the flat “filling” styles.

webdesign.tutsplus In this tutorial we're going to introduce Snap.svg, a JavaScript library which assists in animating and manipulating SVG content. To demonstrate some of the features available, we're going to animate an SVG eye. Snap.svg is a JavaScript library which makes it easy to create and manipulate SVG graphics for modern browsers. It is the successor to Dmitry Baranovskiy's Raphaël; the most popular Javascript library for working with SVG.

SVG-Optimiser SVG Optimiser Because of how Scalable Vector Graphic (SVG) are defined, they can be rewritten without affecting the resulting image. By optimising how SVGs are written, it is often possible to reduce file size and make them easier to work with. Files created in Inkscape or Illustrator are particularly amenable to optimisation. Please note, this app is still under development, so pleased be patient if it doesn't work with your file. Update: Please try my Javascript version for greater flexibility. SVG Masks The SVG masking feature makes it possible to apply a mask to an SVG shape. The mask determines what parts of the SVG shape that is visible, and with what transparency. You can think of an SVG mask as a more advanced version of a clip path.

Fullscreen Overlay Styles & Effects Previous Demo Back to the Codrops Article Genie effect with SVG animation. If you enjoyed this demo you might also like: Perspective Page View Navigation Animated Checkboxes and Radio Buttons with SVG By animating an SVG path with JavaScript, we can do many fancy things. Today we want to show you some effects for checkboxes and radio buttons. The idea is to hide the inputs, use pseudo-elements to create a more appealing style and then animate the SVG paths once an input is selected.