Home » Javascript » svg animation not animating smoothly

svg animation not animating smoothly

Posted by: admin August 19, 2018 Leave a comment

Questions:

Here I give code of html which not work properly, how can I get it to move smoothly?

I am happy to use jQuery if necessary.

<svg 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="1362px" height="219px" viewBox="0 0 1362 219" enable-background="new 0 0 1362 219" xml:space="preserve" class="header-svg-nav">
                    <g id="Shape_1">
                        <g>
                            <path fill="#454545" d="M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z" class="header-svg-nav">
                            <animate attributeName="d" attributeType="XML" repeatCount="indefinite"
                            values="M1361.7-0.1L124.1,0.1L4,161.7c0,0-27.6,61.2,61,57.2s1297-110.5,1297-110.5L1361.7-0.1 z; 
                            M1361.7-0.1 L124.1,0.1 L4,161.7 c0,0-9.6,21.3,0.7,37.9 c9.5,15.4,31.4,19.7,60.3,19.3
				c70.7-1,109.2-28.3,161-41.9 c87.3-22.9,103,21.9,238,14c64.4-3.8,55.7-13.6,143-25 c129.3-16.8,154.8,4,273-7 c118.6-11,125.3-35,230-45 c107.5-10.2,196.2,5.9,252,20  C1361.9,89.3,1361.8,44.6,1361.7-0.1z;" begin="0s" dur="5s"/>
                            </path>
                        </g>
                    </g>
                </svg>
Answers: