With libraries like Snap.svg the use of SVG assets becomes more easy, and this demo demonstrates how to animate SVG icons.
1
Create SVG icon using an SVG editor or Illustrator. Create groups with ID for each object, for example "pencil", "card", etc.
<g id="pencil"> <g> <rect x="423.8" y="158.1" transform="matrix(-0.6863 0.7273 -0.7273 -0.6863 936.447 111.0321)" fill="#434958" width="41" height="198.8"/> <polygon fill="#434958" points="380.8,169.3 352.6,199.2 330.1,149.7"/> </g> </g>
2
We want a special animation to happen. Take a look at API documentation, and find animation you like to use.
3
The idea is to do something with icon. That can be some kind of transformation, like a rotation or a scale, or a change of a path altogether. With the Snap.svg we can dynamically load our SVGs, which we store in a folder, and manipulate them in a very practical way:
window.onload = function () { // svg objects with IDs var card = Snap.select("#cardOffice"), pencil = card.select("#pencil"), notes = card.select("#notes"), mark = card.select("#mark"), timer; var pivots = [ [44, 147], [92, 126] ]; // rotation function close() { clearTimeout(timer); pencil.animate({ transform: "r" + [-20, pivots[0]] }, 500, mina.backin); notes.animate({ transform: "t" + [600, pivots[1]] }, 500, mina.backin); timer = setTimeout(function () { mark.animate({ transform: "t280,0r0" }, 200); }, 400); } function open() { clearTimeout(timer); pencil.animate({ transform: "r" + [0, pivots[0]] }, 700, mina.elastic); notes.animate({ transform: "r" + [0, pivots[1]] }, 700, mina.elastic); mark.animate({ transform: "t0,0r0" }, 500, mina.elastic); } timer = setTimeout(close, 50); card.hover(open, function () { timer = setTimeout(close, 200); } ); };