SVG Animation

Animating m Owl's eyes.

by Joshua Powell

HTML

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" id="Layer_1" x="0px" y="0px" width="500px" height="505px" viewBox="0 0 103 105" enable-background="new 0 0 103 105" xml:space="preserve" xmlns:xml="http://www.w3.org/XML/1998/namespace">
<path fill="#3B3B3B" d="M59.609,10.062L59.609,10.062C56.808,8.727,53.185,7.833,48.5,7.833s-8.308,0.893-11.109,2.229v-0.001  C32.094,9.249,28,0,28,0v22v16v23c0,0,0.5,11.5,16.834,11.5c0,0,15.166,0.833,15.166,9.666V90c0,0,9-9.834,9-25.5V38V22V0  C69,0,64.906,9.249,59.609,10.062z"/>
<path opacity="0.1" fill="#FFFFFF" d="M56.922,15.75c-3.508,0-6.604,1.733-8.5,4.384c-1.896-2.651-4.992-4.384-8.5-4.384  c-5.773,0-10.453,4.68-10.453,10.453s4.68,10.453,10.453,10.453c3.508,0,6.604-1.733,8.5-4.384c1.896,2.651,4.992,4.384,8.5,4.384  c5.773,0,10.453-4.68,10.453-10.453S62.695,15.75,56.922,15.75z"/>
<circle opacity="0.8" fill="#FFFFFF" cx="57.094" cy="26.281" r="6.719"/>
<circle opacity="0.8" fill="#FFFFFF" cx="40.094" cy="26.281" r="6.719"/>
<circle fill="#CC7900" cx="40.141" cy="26.234" r="5.672"/>
<circle fill="#CC7900" cx="57.141" cy="26.234" r="5.672"/>
<circle fill="#2B2B2B" cx="40.198" cy="26.229" r="3.729"/>
<circle fill="#2B2B2B" cx="57.198" cy="26.229" r="3.729"/>
<circle class="eye" opacity="0.0" fill="#2b2b2b" cx="57.094" cy="26.281" r="7"/>
<circle class="eye" opacity="0.0" fill="#2b2b2b" cx="40.094" cy="26.281" r="7"/>
<path fill="#333333" d="M69,34.072c-4.671,0.112-8.425,4.03-8.425,8.855c0,4.827,3.754,24.909,8.425,25.484  C69,68.412,73.188,49.207,69,34.072z"/>
<path fill="#333333" d="M28,34.072c-4.312,11.947,0,34.34,0,34.34c0.559-0.217,0.863-0.434,0.957-0.506  c3.717-3.176,7.468-20.535,7.468-24.979C36.425,38.102,32,34.185,28,34.072z"/>
<path opacity="0.1" fill="#FFFFFF" d="M60.125,56.906c0,7.404-5.177,10.219-11.562,10.219S37,64.311,37,56.906  S42.177,42.25,48.562,42.25S60.125,49.502,60.125,56.906z"/>
<path fill="#CC7900"...

JavaScript

$('.eye').attr('r', 50).animate({opacity: 1}, 500, function() {
    $(this).hide();
});