Search code examples
javascripthtmlhtml5-canvasjquery-svg

Animated/ responsive/ live icons on rollover. Example given

I'm trying to find out how to recreate the effects of the icons here:

https://designmodo.com/flat/

especially the retina display icon with the moveable lens.

However, after 2 days of trying to look for a solution/ tutorial I still couldn't find anything like that.

I've looked into JS solutions as well as HTML5 Canvas. Perhaps I've been looking in the wrong place or with the wrong search terms.

Can anyone point me to the right direction?

Cheers Ryan

Solution

  • They're using SVG images (with a PNG fallback for older browsers) and animating certain paths in the SVG using JS and CSS.

    Explanation of the technique here http://css-tricks.com/using-svg/