Svg stroke-dash offset animation - HTML CSS SVG

HTML CSS examples for SVG:Animation

  1. HOME
  2. HTML CSS
  3. SVG
  4. Animation

Description

Svg stroke-dash offset animation

Demo Code

ResultView the demo in separate window 

<html>
 <head> 
  <meta name="viewport" content="width=device-width, initial-scale=1"> 
  <style id="compiled-css" type="text/css">

#one{<!-- ww w.j a v  a2  s . c o m-->
   fill:#97e8da;
   stroke: green;
}
#two{
   fill: #46ceb4;
   stroke: green;
}
#one,#two{
   stroke-width: 0;
   -webkit-animation:load 3s linear;
   animation:load 3s linear;
}
@-webkit-keyframes load {
   0% {
      stroke-width: 7pt;
      stroke: #46ceb4;
      stroke-dashoffset: 1300;
      fill-opacity: 0;
   }
   20%{
      fill-opacity: .3;
      stroke-width: 2pt;
      stroke: #fff;
   }
   50%{
      stroke-width: 1pt;
   }
   90%{
      stroke-width: 0;
      stroke-dashoffset: 500;
   }
   100%{
      stroke-dashoffset:0;
      fill-opacity: 1;
   }
}@keyframes load {
   0% {
      stroke-width: 7pt;
      stroke: #46ceb4;
      stroke-dashoffset: 1300;
      fill-opacity: 0;
   }
   20%{
      fill-opacity: .3;
      stroke-width: 2pt;
      stroke: #fff;
   }
   50%{
      stroke-width: 1pt;
   }
   90%{
      stroke-width: 0;
      stroke-dashoffset: 500;
   }
   100%{
      stroke-dashoffset:0;
      fill-opacity: 1;
   }
}


      </style> 
 </head> 
 <body> 
  <svg id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1" x="0px" y="0px" width="130px" height="113px" viewbox="-10.062 -10.34 130 113" enable-background="new -10.062 -10.34 130 113" xml:space="preserve"> 
   <path id="one" stroke-dasharray="1200 1000" d="M120,81.456L39.094 81.456 50.188 64.799 88.688 64.799 46.472 -10.184 66.943 -10.184 109.18 62.635 z" /> 
   <path id="two" stroke-dasharray="1200 1000" d="M0.011,101.998L-10 83.913 44.068 -8.737 84.229 62.414 63.607 62.414 43.62 27.393 z" /> 
  </svg>  
 </body>
</html>

Related Tutorials