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);
}
);
};