SVG flat style icons with 150 draw effects

This is a set of beautifully crafted animated icons based on SVG. This group of icons Total 150, divided into 6 categories. These icons are flat style icons, some with a long shadow effect, all icons with a certain animation effect when the mouse is out of date.

How to use

Online preview Source Download

HTML Structure

These SVG icons use <span> elements as containers to dynamically add SVG signatures through jquery. For example, the HTML code for the browser icon is:

<class= "Svg-icon flat-filled"  ID= "Filled-browser"> </span>          

JavaScript

In this demo, the SVG icon code is dynamically added via jquery. You can also add these SVG code directly to the <span> container.

var browserfilled = "<svg class= ' Flat_icon ' xmlns= ' http://www.w3.org/2000/svg ' width= ' 100px ' height= ' 100px ' viewbox= ' 0 0 ' ><path class= ' circle ' d= ' m50,2.125c26.441,0,47.875,21.434,47.875,47.875s76.441, 97.875,50,97.875c17.857,97.875,2.125,76.441,2.125,50s23.559,2.125,50,2.125z '/><g class= ' icon ' ><path Class= ' base ' d= ' m28.692,24.431h42.615c2.353,0,4.262,1.908,4.262,4.262v42.615c0, 2.354-1.909,4.262-4.262,4.262h28.692c-2.354,0-4.262-1.908-4.262-4.262v28.692c24.431, 26.338,26.339,24.431,28.692,24.431z '/><path class= ' screen ' d= ' m27.982,38.637h44.036v32.672h27.982v38.637z ' /><path class= ' top ' d= ' m24.431,24.431h51.139v11.364h24.431v24.431z '/><path class= ' green ' d= ' M47.159, 27.271c1.57,0,2.841,1.273,2.841,2.841s-1.271,2.841-2.841,2.841c-1.569,0-2.841-1.272-2.841-2.841s45.589, 27.271,47.159,27.271z '/><path class= ' orange ' d= ' m38.344,27.271c1.569,0,2.841,1.273,2.841,2.841s-1.271, 2.841-2.841,2.841s-2.841-1.272-2.841-2.841s36.776,27.271,38.344,27.271z '/&Gt;<path class= ' red ' fill= ' d= ' m29.858,27.271c1.569,0,2.841,1.273,2.841,2.841s-1.272,2.841-2.841,2.841c-1.569 , 0-2.841-1.272-2.841-2.841s28.289,27.271,29.858,27.271z '/></g></svg> '$ (browserfilled). AppendTo (' #filled-browser ');

CSS Styles

The animation effect of the SVG icon is done via CSS. The following code does not use the prefix for each browser manufacturer.

#filled-browser Green.{Fill:#FFF}#filled-browser. Orange{Fill:#FFF}#filled-browser. Red{Fill:#FFF}/*change the color of the browser when the mouse is out of date*/#filled-browser:hover. Circle{Fill:#B1EB5B}#filled-browser:hover. screen{Fill:#d6d6d6}#filled-browser:hover. Base{Fill:#b0b0b0}#filled-browser:hover. Top{Fill:#8F8F8F}#filled-browser:hover Green.{Fill:#AEE42D}#filled-browser:hover. Orange{Fill:#FFD02C}#filled-browser:hover. Red{Fill:#E64545}/*animated mouse-over browser*/#filled-browser:hover. screen{Animation-delay:0.2s;animation-timing-function:Linear;Animation-iteration-count:1;Transform-origin:50% 50%;animation-duration:. 4s;Animation-name: Left;}#filled-browser:hover. Base{animation-timing-function:Linear;Animation-iteration-count:1;Transform-origin:50% 50%;animation-duration:. 4s;Animation-name: Right;}#filled-browser:hover. Top{Animation-delay:0.1s;animation-timing-function:Linear;Animation-iteration-count:1;Transform-origin:50% 50%;animation-duration:. 4s;Animation-name:Right-top;}#filled-browser:hover Green.{animation-timing-function:Linear;Animation-iteration-count:1;Transform-origin:50% 50%;animation-duration:. 4s;Animation-name:Left-top;}#filled-browser:hover. Orange{Animation-delay:0.05s;animation-timing-function:Linear;Animation-iteration-count:1;Transform-origin:50% 50%;animation-duration:. 4s;Animation-name:Left-top;}#filled-browser:hover. Red{animation-timing-function:Linear;Transform-origin:50% 50%;animation-duration:. 4s;Animation-name:Left-top;}/*Frame Animation*/@keyframes left-top{0% {Transform:Translate ( -100px, -100px) scale (3,3)}1%{Transform:Translate ( -100px, -100px) scale (3,3)}100%{Transform:translate (0px, 0px) scale (+)}} @keyframes right-top{0% {Transform:Translate (100px, -200px) scale (3,3)}1%{Transform:Translate (100px, -200px) scale (3,3)}100%{Transform:translate (0px, 0px) scale (+)}} @keyframes Right{0% {Transform:Translate (100px, 0px)}1%{Transform:Translate (100px, 0px)}100%{Transform:translate (0px, 0px)}} @keyframes Left{0% {Transform:Translate ( -100px, 0px)}1%{Transform:Translate ( -100px, 0px)}100%{Transform:translate (0px, 0px)}}          

For the full implementation code of each SVG icon, please refer to the download file.

via:http://www.w2bc.com/article/114332

SVG flat style icons with 150 draw effects