SVG stroke animation

svg stroke animation examples

Hello friends today in this article we will learn how to create stroke animation for SVG.

Stroke Animation

HTML CODE

<svg class="svg_bt" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="600px" height="300px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<path fill="#FBA919" stroke="#000000" stroke-width="2" stroke-miterlimit="10" d="M155.095,107.257c0,6.628-5.373,12-12,12H64.054
	c-6.627,0-12-5.372-12-12V96.203c0-6.627,5.373-12,12-12h79.041c6.627,0,12,5.373,12,12V107.257z"/>
<text transform="matrix(1 0 0 1 58.8779 105.1484)" font-family="'MyriadPro-Regular'" font-size="12">Stroke Animation</text>
</svg>

CSS CODE

<style>
    .svg_bt path {
  float: left;
  stroke-dasharray: 100;
  animation: dash 5s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}

</style>

Stroke Animation

Stroke Animation
<svg class="svg_bt1" version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
	 width="600px" height="300px" viewBox="0 0 200 200" enable-background="new 0 0 200 200" xml:space="preserve">
<path fill="#FBA919" stroke="#000000" stroke-width="1" stroke-miterlimit="10" d="M155.095,107.257c0,6.628-5.373,12-12,12H64.054
	c-6.627,0-12-5.372-12-12V96.203c0-6.627,5.373-12,12-12h79.041c6.627,0,12,5.373,12,12V107.257z"/>
<text transform="matrix(1 0 0 1 58.8779 105.1484)" font-family="'MyriadPro-Regular'" font-size="12">Stroke Animation</text>
</svg>
<style>
    .svg_bt1 path {
  float: left;
  stroke-dasharray: 5;
  animation: dash 10s linear infinite;
}

@keyframes dash {
  to {
    stroke-dashoffset: 1000;
  }
}
</style>

Leave a Reply

avatar
  Subscribe  
Notify of