How to Animate SVG Circle with shapes

SVG circle animation
SVG circle animation
SVG circle animation

SVG (Scalable Vector Graphics), today in this post we will learn how to animate svg circle.



HTML CODE

 <div class="html5">
        <svg class="html" 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"
                                 viewBox="0 0 400 400" enable-background="new 0 0 400 400" xml:space="preserve">
<circle class="cir-1" fill="none" stroke="#ff5722" stroke-width="2" stroke-miterlimit="10" cx="196.751" cy="199.999" r="88.82" />

<polygon fill="#FF5722" points="149.113,153.726 157.79,251.724 196.751,262.612 235.698,251.73 244.389,153.726 " />

<polygon class="fivetxt" fill="none" stroke="#fff" stroke-width="1" points="225.571,185.772 196.751,185.772 179.907,185.772 180.996,198.083 196.751,198.083 224.482,198.083
	221.209,234.996 196.751,241.821 196.73,241.829 172.285,234.996 170.577,215.688 182.555,215.688 183.446,225.706 196.737,229.32
	196.751,229.313 196.751,229.313 210.056,225.7 211.443,210.108 196.751,210.108 196.751,210.108 170.087,210.108 166.861,173.761
	196.751,173.761 226.634,173.761 " />

   </svg>
  </div>

CSS CODE

<style>
    
    .html5 {
    width:400px;
    height:400px;
    position: absolute;
    top:0;
    left: -50px;
    z-index: 2; 
}

.cir-1 {
    stroke-dasharray: 5;
    animation: dash1 3s linear infinite;
}

@keyframes dash1 {
    to {
        stroke-dashoffset: 30;
    }
}
    
</style>

Leave a Reply

avatar
  Subscribe  
Notify of