Snap! SVG Animation with Mouseover
Description
This code uses Snap.svg to create a simple animation. A circle changes color on mouseover and reverts on mouseout.
Code Snippet
// Create a Snap.svg canvas
var s = Snap(800, 600);
// Create a circle
var circle = s.circle(100, 100, 50);
circle.attr({
fill: "blue",
stroke: "black",
strokeWidth: 3
});
// Add mouseover and mouseout events
circle.mouseover(function() {
this.animate({fill: "red"}, 200, mina.easeout);
});
circle.mouseout(function() {
this.animate({fill: "blue"}, 200, mina.easeout);
});