SVG酷炫描边

<!DOCTYPE html>
<html>
<head>
   <title></title>
   <style type="text/css">

       html,body{
           100%;
           height:100%;
           margin:0;
           padding:0;
           background-color: #e7e7e7;
       }

   </style>
</head>
<body>
   <svg width="300" height="300" viewBox="0 0 300 300" id="svg" xmlns="http://www.w3.org/2000/svg" style="margin-left:200px;margin-top:100px" >


   </svg>
   <div style="position: absolute; 292px;height:288px;overflow: hidden;top:104px;left:204px;">
      <img src="http://f.hiphotos.baidu.com/zhidao/pic/item/d833c895d143ad4b4c7b3e3180025aafa50f06ed.jpg" height="292px">
   </div>
</body>
</html>
<script src="https://cdn.bootcss.com/snap.svg/0.4.1/snap.svg.js"></script>

<script type="text/javascript">
   var strokeWidth=4;
   var width=300;

   var svg = Snap("#svg");

   var rect = svg.paper.rect(strokeWidth/2,strokeWidth/2,width-strokeWidth,width/2-strokeWidth).attr({
       strokeWidth:""+strokeWidth,
       stroke:"#FF1687",
       fill:"none",
       strokeLinecap:"round",

       strokeDasharray:width-strokeWidth*3+" "+(width*3-width+strokeWidth*3),
       strokeDashoffset:(width+strokeWidth)*1.5+""
   }),
       rect2 = svg.paper.rect(strokeWidth/2,width/2-strokeWidth/2,width-strokeWidth,width/2-strokeWidth).attr({
       strokeWidth:""+strokeWidth,
       strokeLinecap:"round",

       stroke:"#FF1687",
       fill:"none",
       strokeDasharray:width-strokeWidth*3+" "+(width*3-width+strokeWidth*3),
       strokeDashoffset:-strokeWidth+""
   });

   function animate(){
       rect.attr("strokeDashoffset",(width+strokeWidth)*1.5+"");
       rect2.attr("strokeDashoffset",-strokeWidth+"");

   rect.animate({strokeDashoffset:-width/2},500,mina.easein,function(){
       rect.animate({strokeDashoffset:-width/2-width/5},1500,function(){
           rect.animate({strokeDashoffset:-width*1.5+strokeWidth},500);
       });
   });

   rect2.animate({strokeDashoffset:-width*2-strokeWidth*2},500,mina.easein,function(){
       rect2.animate({strokeDashoffset:-width*2-width/5},1500,function(){
           rect2.animate({strokeDashoffset:-width*3-strokeWidth},500);
       });
   });
}
   window.onload=function(){
       animate();
       setInterval(animate,3200);
   };

</script>