SVG linearGradient animation with loop - animation

Thanks to this topic (pretty old, that's why I'm opening a new one) Animating SVG path fill bottom-top
I finally succeed to do a SVG animation from bottom to the top as I want to :
<linearGradient id="fill" x1="0.5" y1="1" x2="0.5" y2="0">
<stop offset="0%" stop-opacity="0" stop-color="#76b442">
<animate attributeName="offset" values="0;1" repeatCount="1" dur="1s" begin="0" fill="freeze"></animate>
<animate attributeName="stop-opacity" values="0;1" repeatCount="1" dur="0.1s" begin="0" fill="freeze"></animate>
</stop>
<stop offset="100%" stop-opacity="0" stop-color="#76b442">
<animate attributeName="offset" values="0;1" repeatCount="1" dur="1s" begin="0" fill="freeze"></animate>
<animate attributeName="stop-opacity" values="0;1" repeatCount="1" dur="1s" begin="3s" fill="freeze"></animate>
</stop>
</linearGradient>
https://jsfiddle.net/8v5f3cgk/
The only problem is that I want to make it looping from top to bottom. And in an undefinite way, how could I reach this ?
Thanks a lot

Related

How to animate SVG line path?

I never before handle with any SVG code, but I need now to animate some SVG lines width from zero 100%:
<svg viewBox="0 0 93 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="intro_graphics">
<g id="bg_curves">
<path d="M0.002,192l0,-192" style="fill:none;stroke:url(#_Linear1);stroke-width:0.48px;"/>
<path d="M31.165,192l0,-192" style="fill:none;stroke:url(#_Linear2);stroke-width:0.48px;"/>
<path d="M62.493,192l0,-192" style="fill:none;stroke:url(#_Linear3);stroke-width:0.48px;"/>
<path d="M92.206,192l0,-192" style="fill:none;stroke:url(#_Linear4);stroke-width:0.48px;"/>
</g>
<g id="ilustration_curves">
<path d="M47.715,89.243c5.388,4.727 8.791,11.662 8.791,19.385c0,14.229 -11.552,25.782 -25.782,25.782c-13.465,0 -24.534,-10.346 -25.683,-23.516c-0.065,-0.747 -0.074,-1.503 -0.098,-2.266c-0.065,-2.082 3.285,-3 3.567,0c0.073,0.776 0.04,1.55 0.118,2.309c1.157,11.177 10.615,19.906 22.096,19.906c12.261,0 22.215,-9.954 22.215,-22.215c0,-5.447 -1.965,-10.439 -5.224,-14.305l0,-5.08Z" style="fill:url(#_Linear5);"/>
<clipPath id="_clip6">
<path d="M43.213,93.869c4.098,3.52 6.695,8.738 6.695,14.559c0,10.588 -8.596,19.184 -19.184,19.184c-7.84,0 -14.588,-4.713 -17.563,-11.459c-0.174,-0.394 -0.404,-0.865 -0.55,-1.232c-0.581,-1.454 1.78,-3.398 3.122,-0.978c0.178,0.32 0.973,1.849 1.174,2.21c2.711,4.835 7.885,8.104 13.817,8.104c8.737,0 15.83,-7.093 15.83,-15.829c0,-3.665 -1.248,-7.04 -3.341,-9.724l0,-4.835Z"/>
</clipPath>
<g clip-path="url(#_clip6)">
<use xlink:href="#_Image7" x="12.725" y="94.585" width="37.388px" height="33.743px" transform="matrix(0.983896,0,0,0.992433,-1.09139e-13,0)"/>
</g>
<clipPath id="_clip8">
<path d="M15.61,133.301c4.37,2.766 9.556,4.369 15.114,4.369c15.577,0 28.223,-12.587 28.223,-28.091c0,-11.633 -7.12,-21.624 -17.255,-25.888l0,-3.986c12.163,4.472 20.85,16.167 20.85,29.874c0,17.561 -14.257,31.818 -31.818,31.818c-8.138,0 -15.567,-3.062 -21.196,-8.096c0,0 -0.531,-0.52 -0.967,-1.016c-1.683,-1.912 0.543,-4.303 3.181,-1.802c1.109,1.051 3.868,2.818 3.868,2.818Z"/>
</clipPath>
<g clip-path="url(#_clip8)">
<use xlink:href="#_Image9" x="8.04" y="81.103" width="54.566px" height="60.697px" transform="matrix(0.992101,0,0,0.995029,-1.09139e-13,0)"/>
</g>
</g>
<g id="plus_symbol">
<path d="M35.917,110.551c0,-0.454 -0.368,-0.823 -0.823,-0.823l-7.76,0c-0.454,0 -0.823,0.369 -0.823,0.823c0,0.454 0.369,0.823 0.823,0.823l7.76,0c0.455,0 0.823,-0.369 0.823,-0.823Z" style="fill:#bf5af0;"/>
<path d="M31.214,105.848c-0.454,0 -0.823,0.369 -0.823,0.823l0,7.76c0,0.454 0.369,0.823 0.823,0.823c0.455,0 0.823,-0.369 0.823,-0.823l0,-7.76c0,-0.454 -0.368,-0.823 -0.823,-0.823Z" style="fill:#bf5af0;"/>
</g>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,0.00180094,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,31.1652,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,62.4932,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,92.2062,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-7.79155,25.3988,-25.3988,-7.79155,40.0035,91.6304)">
<stop offset="0" style="stop-color:#bf5af0;stop-opacity:0"/>
<stop offset="1" style="stop-color:#bf5af0;stop-opacity:1"/>
</linearGradient>
<image id="_Image7" width="38px" height="34px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAiCAYAAAAzrKu4AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABKElEQVRYhe3VUQqDMAwG4F/nJmxX8Qw7jcfyWF6m0Ooe1rgSrFZt0z4sEIhM5CN1v1U3qDcAbds4M7/2/jb27YTI1QB4bWCCcN2gljkWsgHw3MEEbw6AsUja5HwFRhuLhqOZbfIQkh9ldBxd0ybHvtWhMH6UyXD4bVEDMFtI31EmxVF3g3L/2cYHy4Jjm6T30ezFhSiO5m5QOiQusuBC40IcdyQuRHHicRF6b9a42Lq3mLjgc5FxQbB/XBx5TtFxAXy/mQ2AuRQcwagqhsyG4zCOvNuepHFbMLdq24RMjguFceTDzoSMjjsDW0M+nIdHwV2FuXWzjRi4mLA1ZHsWlwrmli8jdz9JUrWWkZfjIgWSMtINctGj3Cse5OJHGVJLRtaZId4qFvYBLcFgs65CS6MAAAAASUVORK5CYII="/>
<image id="_Image9" width="55px" height="61px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA9CAYAAAAJQPEgAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB6klEQVRoge2YUZKDIBBEO6u7XoZjeSyO5WX8EPcnWEQRBgPMYDlVVOWnY7f9QlAoPXdKzy/ccHoAfwCM0rMBYKZxWJg9ZZsewC8AY5fSc2c/T+NgOM19O4dw+Ay6fZ7GYWVzeXE2LJ21IBC0pTZ9zXU4htsCt9RmEEuEAxul5wWC2yRjebI6HNsUE5SKJTm0JGypWEZ/i77FvQn5sExBkxSYq82z5pJbomprtlkUy5DW7rQo2GYVLGPaUufa6liGVu5zLRuWMX2OTagEltlbvroJpWBZBc2QNrVN2xyr6StayrnWNifGdKo2dK4NbSjNBd5j2yyWMa3Ss2key5D2VljutS1jGdVLxDLbtWtiWf2G5cCSs+XLWIo1TdXGngpEmqZq3aeCZkxTtW5zzZimah8spZmmau+I5aZvCctkvQQsi127JJacN+wyluymqdr9q70mTFO1++aaME3VUt44izNN1T5YSjNN1T5YSjNN1UvG8utrc2BZ7Yb1AF7vLzkzIs40Vdvjc37eC5JNU7X7cL6gqzTTVG0onJ0zbMUHpoRzx21TVEs+bWo4OymbkGgsY+NuQk1jGRvbpost2yEgdzg7LrZsh4BS4dzxbUJVDgE1wtmhbEJZW64Zzp3YX0qWwFzh7LhtrsiM5T8/PF/5U2UUDQAAAABJRU5ErkJggg=="/>
</defs>
</svg>
This is pretty ugly code.
Here is Codepen example: https://codepen.io/trueweb/pen/OJLpLNB
I did something similar with CSS keyframes:
https://codepen.io/trueweb/pen/xxKZrBX
It looks like I cannot animate my rounded chart with keyframes

If you want to animate a stroke, you have to actually have a stroke, otherwise you're animating something that's not rendered.
svg {
width: 300px;
}
svg .line {
stroke: red;
stroke-dasharray: 1000;
stroke-dashoffset: 0;
animation: dash 13s linear;
}
#keyframes dash {
from {
stroke-dashoffset: 1000;
}
to {
stroke-dashoffset: 0;
}
}
<svg viewBox="0 0 93 192" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linecap:round;stroke-linejoin:round;stroke-miterlimit:1.5;">
<g id="intro_graphics">
<g id="bg_curves">
<path d="M0.002,192l0,-192" style="fill:none;stroke:url(#_Linear1);stroke-width:0.48px;"/>
<path d="M31.165,192l0,-192" style="fill:none;stroke:url(#_Linear2);stroke-width:0.48px;"/>
<path d="M62.493,192l0,-192" style="fill:none;stroke:url(#_Linear3);stroke-width:0.48px;"/>
<path d="M92.206,192l0,-192" style="fill:none;stroke:url(#_Linear4);stroke-width:0.48px;"/>
</g>
<g id="ilustration_curves">
<path class="line" d="M47.715,89.243c5.388,4.727 8.791,11.662 8.791,19.385c0,14.229 -11.552,25.782 -25.782,25.782c-13.465,0 -24.534,-10.346 -25.683,-23.516c-0.065,-0.747 -0.074,-1.503 -0.098,-2.266c-0.065,-2.082 3.285,-3 3.567,0c0.073,0.776 0.04,1.55 0.118,2.309c1.157,11.177 10.615,19.906 22.096,19.906c12.261,0 22.215,-9.954 22.215,-22.215c0,-5.447 -1.965,-10.439 -5.224,-14.305l0,-5.08Z" style="fill:url(#_Linear5);" stroke="black"/>
<clipPath id="_clip6">
<path class="line" d="M43.213,93.869c4.098,3.52 6.695,8.738 6.695,14.559c0,10.588 -8.596,19.184 -19.184,19.184c-7.84,0 -14.588,-4.713 -17.563,-11.459c-0.174,-0.394 -0.404,-0.865 -0.55,-1.232c-0.581,-1.454 1.78,-3.398 3.122,-0.978c0.178,0.32 0.973,1.849 1.174,2.21c2.711,4.835 7.885,8.104 13.817,8.104c8.737,0 15.83,-7.093 15.83,-15.829c0,-3.665 -1.248,-7.04 -3.341,-9.724l0,-4.835Z" stroke="black"/>
</clipPath>
<g clip-path="url(#_clip6)">
<use xlink:href="#_Image7" x="12.725" y="94.585" width="37.388px" height="33.743px" transform="matrix(0.983896,0,0,0.992433,-1.09139e-13,0)"/>
</g>
<clipPath id="_clip8">
<path class="line" d="M15.61,133.301c4.37,2.766 9.556,4.369 15.114,4.369c15.577,0 28.223,-12.587 28.223,-28.091c0,-11.633 -7.12,-21.624 -17.255,-25.888l0,-3.986c12.163,4.472 20.85,16.167 20.85,29.874c0,17.561 -14.257,31.818 -31.818,31.818c-8.138,0 -15.567,-3.062 -21.196,-8.096c0,0 -0.531,-0.52 -0.967,-1.016c-1.683,-1.912 0.543,-4.303 3.181,-1.802c1.109,1.051 3.868,2.818 3.868,2.818Z"/>
</clipPath>
<g clip-path="url(#_clip8)">
<use xlink:href="#_Image9" x="8.04" y="81.103" width="54.566px" height="60.697px" transform="matrix(0.992101,0,0,0.995029,-1.09139e-13,0)"/>
</g>
</g>
<g id="plus_symbol">
<path d="M35.917,110.551c0,-0.454 -0.368,-0.823 -0.823,-0.823l-7.76,0c-0.454,0 -0.823,0.369 -0.823,0.823c0,0.454 0.369,0.823 0.823,0.823l7.76,0c0.455,0 0.823,-0.369 0.823,-0.823Z" style="fill:#bf5af0;"/>
<path d="M31.214,105.848c-0.454,0 -0.823,0.369 -0.823,0.823l0,7.76c0,0.454 0.369,0.823 0.823,0.823c0.455,0 0.823,-0.369 0.823,-0.823l0,-7.76c0,-0.454 -0.368,-0.823 -0.823,-0.823Z" style="fill:#bf5af0;"/>
</g>
</g>
<defs>
<linearGradient id="_Linear1" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,0.00180094,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear2" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,31.1652,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear3" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,62.4932,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear4" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(8.90855e-15,-145.488,-145.488,-8.90855e-15,92.2062,172.335)">
<stop offset="0" style="stop-color:#fff;stop-opacity:0.1"/>
<stop offset="1" style="stop-color:#fff;stop-opacity:0"/>
</linearGradient>
<linearGradient id="_Linear5" x1="0" y1="0" x2="1" y2="0" gradientUnits="userSpaceOnUse" gradientTransform="matrix(-7.79155,25.3988,-25.3988,-7.79155,40.0035,91.6304)">
<stop offset="0" style="stop-color:#bf5af0;stop-opacity:0"/>
<stop offset="1" style="stop-color:#bf5af0;stop-opacity:1"/>
</linearGradient>
<image id="_Image7" width="38px" height="34px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACYAAAAiCAYAAAAzrKu4AAAACXBIWXMAAA7EAAAOxAGVKw4bAAABKElEQVRYhe3VUQqDMAwG4F/nJmxX8Qw7jcfyWF6m0Ooe1rgSrFZt0z4sEIhM5CN1v1U3qDcAbds4M7/2/jb27YTI1QB4bWCCcN2gljkWsgHw3MEEbw6AsUja5HwFRhuLhqOZbfIQkh9ldBxd0ybHvtWhMH6UyXD4bVEDMFtI31EmxVF3g3L/2cYHy4Jjm6T30ezFhSiO5m5QOiQusuBC40IcdyQuRHHicRF6b9a42Lq3mLjgc5FxQbB/XBx5TtFxAXy/mQ2AuRQcwagqhsyG4zCOvNuepHFbMLdq24RMjguFceTDzoSMjjsDW0M+nIdHwV2FuXWzjRi4mLA1ZHsWlwrmli8jdz9JUrWWkZfjIgWSMtINctGj3Cse5OJHGVJLRtaZId4qFvYBLcFgs65CS6MAAAAASUVORK5CYII="/>
<image id="_Image9" width="55px" height="61px" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADcAAAA9CAYAAAAJQPEgAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAB6klEQVRoge2YUZKDIBBEO6u7XoZjeSyO5WX8EPcnWEQRBgPMYDlVVOWnY7f9QlAoPXdKzy/ccHoAfwCM0rMBYKZxWJg9ZZsewC8AY5fSc2c/T+NgOM19O4dw+Ay6fZ7GYWVzeXE2LJ21IBC0pTZ9zXU4htsCt9RmEEuEAxul5wWC2yRjebI6HNsUE5SKJTm0JGypWEZ/i77FvQn5sExBkxSYq82z5pJbomprtlkUy5DW7rQo2GYVLGPaUufa6liGVu5zLRuWMX2OTagEltlbvroJpWBZBc2QNrVN2xyr6StayrnWNifGdKo2dK4NbSjNBd5j2yyWMa3Ss2key5D2VljutS1jGdVLxDLbtWtiWf2G5cCSs+XLWIo1TdXGngpEmqZq3aeCZkxTtW5zzZimah8spZmmau+I5aZvCctkvQQsi127JJacN+wyluymqdr9q70mTFO1++aaME3VUt44izNN1T5YSjNN1T5YSjNN1UvG8utrc2BZ7Yb1AF7vLzkzIs40Vdvjc37eC5JNU7X7cL6gqzTTVG0onJ0zbMUHpoRzx21TVEs+bWo4OymbkGgsY+NuQk1jGRvbpost2yEgdzg7LrZsh4BS4dzxbUJVDgE1wtmhbEJZW64Zzp3YX0qWwFzh7LhtrsiM5T8/PF/5U2UUDQAAAABJRU5ErkJggg=="/>
</defs>
</svg>

SVG hover animation glitch issue

I'm trying to activate this animation on hover which is working! but it's glitchy every-time the mouse is moved it fires again. Is there a solution to this issue? also is there a way to force the animation to finish after mouseout?
<svg id="squid" version="1.1"
xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
x="0px" y="0px" width="180px" height="192.8px" viewBox="0 0 130 225"
xml:space="preserve" preserveAspectRatio="xMidyMax meet">
<defs>
</defs>
<g class="squid">
<path id="left-arm" class="left-arm" d="M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9"/>
<path id="right-arm" class="right-arm" d="M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9"/>
<path id="lightning" class="lightning" d="M65.2,43.7L67.7,56l3.1,15.9L63.4,56L52.9,33.2l9.9-0.4l-5-27.6l17.3,38L65.2,43.7z"/>
<path id="left-mid-arm" class="left-mid-arm" d="M58.5,99.6c-31.1,25.5-50,28.7-50,50.8c0,15.8,10.2,22.9,16,26.6"/>
<path id="right-mid-arm" class="right-mid-arm" d="M69.7,99.6c31.1,25.5,50,28.7,50,50.8c0,15.8-10.2,22.9-16,26.6"/>
<g id="right-limb">
<path id="right-leg" class="right-leg" d="M63.2,107.6c0,0,6.3-0.1,10.3,7.6c1.6,3.1,2.4,6.4,2.3,10.2c-0.1,2.7-0.6,6.1-0.6,6.1"/>
<path id="right-foot" class="right-foot" d="M51.5,156.9c-2.3,3-3.7,6.7-3.7,11.9c0,5.1,1.4,8.8,3.1,11.5"/>
</g>
<path id="left-leg" class="left-leg" d="M63.8,107.6c0,0-14.3,0.3-11.6,20.6c2.8,20.8,27.9,19,27.9,40.6c0,14.6-11.2,18-11.2,18"/>
<g class="body">
<path id="body" d="M84.7,62.6c0.1-0.1,5.1-1.5,5-5.1V5c0-2.8-2.2-5-5-5h-42c-2.8,0-5,2.2-5,5v52.4c0,2.4,1.7,4.4,3.9,4.9
c0.2,0,1.1,0.2,1.2,0.3c2,0.8,3.5,2.7,3.5,5c0,2.2-1.4,4.1-3.3,4.9c-0.1,0.1-5.4,1.2-5.3,5.3v0.4c0,2.8,2.2,5,5,5h1.5
c2.2,0,7.3,2.2,8.6,4.2c-1.1,1.9-1.7,4-1.7,6.4c0,6.9,5.6,12.5,12.5,12.5S76,100.6,76,93.7c0-2.2-0.5-4.2-1.5-6
c3.1-2.2,7.6-4.5,8.8-4.5h1.4c2.8,0,5-2.2,5-5v-0.4c0-4.5-5.1-5.2-5.2-5.3c-2-0.8-3.4-2.7-3.4-5C81.1,65.3,82.6,63.3,84.7,62.6z"/>
</g>
<path id="lightning" class="lightning" d="M65.2,43.7L67.7,56l3.1,15.9L63.4,56L52.9,33.2l9.9-0.4l-5-27.6l17.3,38L65.2,43.7z"/>
<animate
xlink:href="#left-arm"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9;
M20,50.1c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;
M-2,140.2c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5c27.9,12.8,46.2-59.2,62.3-102.5;
M6,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;
M10,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;
M6,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4C6,146,46.2,124.7,62.4,81.3;
M-2,140.2c0,0,0,0-4.2,4.4c-5.2,5.5-21.2,30.8-0.2,40.5c27.9,12.8,46.2-59.2,62.3-102.5;
M20,50.1c0,0,2.8-5.8-6.5,13.3c-12.6,25.9-40.3,64-15,78c20.2,11.2,41-11.5,57.1-54.9;
M6,20.8c0,0,21.3,0,21.3,21.2c0,21.2-20.8,18.4-20.8,41.4c0,22.6,36.7,34.4,52.9-8.9;
Z;"/>
<animate
xlink:href="#left-mid-arm"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M58.5,99.6c-31.1,25.5-50,28.7-50,50.8c0,15.8,10.2,22.9,16,26.6;
M58.6,98.4c-21.2,26-37.6,7-50,25.4c-9.7,14.5,10.2,22.9,16,26.6;
M61.5,106.4c-31.1,25.5-33,56.3-33,78.4c0,15.8,0,5.1,0,15.8;
M64.5,106.4c-31.1,25.5-33,56.3-33,78.4c0,15.8,0,5.1,0,15.8;
M61.5,106.4c-31.1,25.5-33,56.3-33,78.4c0,15.8,0,5.1,0,15.8;
M58.6,98.4c-21.2,26-37.6,7-50,25.4c-9.7,14.5,10.2,22.9,16,26.6;
M58.5,99.6c-31.1,25.5-50,28.7-50,50.8c0,15.8,10.2,22.9,16,26.6;
Z;"/>
<animate
xlink:href="#right-mid-arm"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M69.7,99.6c31.1,25.5,50,28.7,50,50.8c0,15.8-10.2,22.9-16,26.6;
M69.7,98.4c21.2,26,37.6,7,50,25.4c9.7,14.5-10.2,22.9-16,26.6;
M68,106.4c31.1,25.5,33,56.3,33,78.4c0,15.8,0,5.1,0,15.8;
M64,106.4c31.1,25.5,33,56.3,33,78.4c0,15.8,0,5.1,0,15.8;
M68,106.4c31.1,25.5,33,56.3,33,78.4c0,15.8,0,5.1,0,15.8;
M69.7,98.4c21.2,26,37.6,7,50,25.4c9.7,14.5-10.2,22.9-16,26.6;
M69.7,99.6c31.1,25.5,50,28.7,50,50.8c0,15.8-10.2,22.9-16,26.6;
Z;"/>
<animate
xlink:href="#right-arm"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9;
M105.9,50.4c0,0-2.3-3.1,10.4,14c12.7,17,44.3,62.7,22,78.3c-22.7,16-50.5-11.9-66.6-55.2;
M128,140.2c0,0,0,0,4.2,4.4c5.2,5.5,21.2,30.8,0.2,40.5c-27.9,12.8-46.2-59.2-62.3-102.5;
M124,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-40.2-75.2-56.3-118.5;
M120,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-40.2-75.2-56.3-118.5;
M124,216.7c0,0,0-1.3,0-5.4c0-5.7,0-1.7,0-11.4c0-53.9-40.2-75.2-56.3-118.5;
M128,140.2c0,0,0,0,4.2,4.4c5.2,5.5,21.2,30.8,0.2,40.5c-27.9,12.8-46.2-59.2-62.3-102.5;
M105.9,50.4c0,0-2.3-3.1,10.4,14c12.7,17,44.3,62.7,22,78.3c-22.7,16-50.5-11.9-66.6-55.2;
M122,20.8c0,0-21.3,0-21.3,21.2c0,21.2,20.8,18.4,20.8,41.4c0,22.6-36.7,34.4-52.8-8.9;
Z;"/>
<animate
xlink:href="#right-leg"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M68.5,108.9c4,2.5,8.9,8.6,7.2,21.3c-0.1,0.4-0.1,0.8-0.2,1.2;
M68.5,105.9c4,2.5,7.2,3.5,7.2,16.3c0,2.2-0.4,4-1.2,5.8;
M68.5,105.7c4,2.5,7.2,8.5,7.2,21.3c0,2-0.1,3.7-0.4,5.1;
M68.5,105.9c4,2.5,7.2,3.5,7.2,16.3c0,2.2-0.4,4-1.2,5.8;
M68.5,108.9c4,2.5,8.9,8.6,7.2,21.3c-0.1,0.4-0.1,0.8-0.2,1.2;
Z;"/>
<animate
xlink:href="#right-foot"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M51.5,156.9c-2.3,3-3.7,6.7-3.7,11.9c0,5.1,1.4,8.8,3.1,11.5;
M48,156.9c0,5.9,0,3,0,4.9c0,3.9,0,2.8,0,3.9;
M52.5,156.9c0,5.9,0,3,0,4.9c0,3.9,0,2.8,0,3.9;
M48,156.9c0,5.9,0,3,0,4.9c0,3.9,0,2.8,0,3.9;
M51.5,156.9c-2.3,3-3.7,6.7-3.7,11.9c0,5.1,1.4,8.8,3.1,11.5;
Z;"/>
<animate
xlink:href="#left-leg"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M63.8,107.6c0,0-14.3,0.3-11.6,20.6c2.8,20.8,27.9,19,27.9,40.6c0,14.6-11.2,18-11.2,18;
M63.9,114.4c0,0,3-0.6,10.2,18.5c6,16.1,6,30.2,6,40.2c0,4,0,10.3,0,10.3;
M60.9,114.4c0,0,3-0.6,10.2,18.5c6,16.1,6,30.2,6,40.2c0,4,0,10.3,0,10.3;
M63.9,114.4c0,0,3-0.6,10.2,18.5c6,16.1,6,30.2,6,40.2c0,4,0,10.3,0,10.3;
M63.8,107.6c0,0-14.3,0.3-11.6,20.6c2.8,20.8,27.9,19,27.9,40.6c0,14.6-11.2,18-11.2,18;
Z;"/>
<animate
xlink:href="#right-leg"
attributeName="d"
dur="1s"
begin="squid.mouseover"
end="squid.mouseout"
repeatCount="indefinite"
values="
M63.2,107.6c0,0,6.3-0.1,10.3,7.6c1.6,3.1,2.4,6.4,2.3,10.2c-0.1,2.7-0.6,6.1-0.6,6.1;
M68.2,107.6c0,0,14.3,0.3,11.6,20.6c-2.8,20.8-27.9,19-27.9,40.6c0,14.6,11.2,18,11.2,18;
M64.7,114.4c0,0-3-0.6-10.2,18.5c-6,16.1-6,30.2-6,40.2c0,4,0,10.3,0,10.3;
M68.7,114.4c0,0-3-0.6-10.2,18.5c-6,16.1-6,30.2-6,40.2c0,4,0,10.3,0,10.3;
M64.7,114.4c0,0-3-0.6-10.2,18.5c-6,16.1-6,30.2-6,40.2c0,4,0,10.3,0,10.3;
M68.2,107.6c0,0,14.3,0.3,11.6,20.6c-2.8,20.8-27.9,19-27.9,40.6c0,14.6,11.2,18,11.2,18;
M63.2,107.6c0,0,6.3-0.1,10.3,7.6c1.6,3.1,2.4,6.4,2.3,10.2c-0.1,2.7-0.6,6.1-0.6,6.1;
Z;"/>
</g>
</svg>
Here's my pen - hover it for example.
http://codepen.io/alcoven/pen/mOrYBd?editors=1100

Mouseover fires every time you move the mouse. Try mouseenter instead.
begin="squid.mouseenter"

How to loop a specifically timed SVG animation sequence?

So I'm looking to loop my svg animation sequence indefinitely. Heres my code:
<animateTransform xlink:href="#tri" id="anim1" attributeName="transform" attributeType="XML" type="rotate" from="0" to="180" begin="4750ms;" dur="0.5s" fill="freeze"/>
<animateTransform xlink:href="#tri" id="anim2" attributeName="transform" attributeType="XML" type="rotate" from="180" to="0" begin="8000ms;" dur="0.5s" fill="freeze"/>
<animateTransform xlink:href="#tri" id="anim3" attributeName="transform" attributeType="XML" type="rotate" from="0" to="180" begin="9750ms" dur="0.5s" fill="freeze"/>
<animateTransform xlink:href="#tri" id="anim4" attributeName="transform" attributeType="XML" type="rotate" from="180" to="0" begin="13000ms" dur="0.5s" fill="freeze"/>
After a quick google I discovered what I thought I was looking for in this SO answer, alas it was close but didn't fulfil what I needed totally.
See the difference with problem and theres is that I have specific times I want the animation to take effect (4750ms, 8000ms, 9750ms and 13000ms), whereas in the SO answer there was only a set time.
Another google brought me to this answer but it seemed the OP wasn't fussed about timings.

Sounds like you want some values and key times for those values. E.g.
<animateTransform xlink:href="#tri" id="anim1" attributeName="transform" attributeType="XML" type="rotate" values="0;0;180;180;0;0;180;180;0" keyTimes="0;4750ms;5250ms;8000ms;8500ms;9750ms;10250ms;13000ms;13500ms" fill="freeze"/>

How about this? How to make SVG Loop Animation?
Sample code:
<svg>
<rect>
<animate id="o1" begin="0;o1.end" dur="10s"
attributeName="visibility" from="hide" to="hide"/>
</rect>
<circle fill="orange" cx="-50" cy="100" r="20">
<animate begin="o1.begin"
attributeName="cx" from="250" to="50" dur="5.05s"/>
</circle>
<circle fill="blue" cx="150" cy="100" r="50" />
<circle fill="orange" cx="-50" cy="100" r="20">
<animate begin="o1.begin+5s"
attributeName="cx" from="50" to="250" dur="5.05s"/>
</circle>
</svg>

RMagick::Image.from_blob method don't work

I using Ruby, Sinatra and RMagick
I wont take browser icon (.svg file), add to icon text - version of browser - and return new .svg as respond to user
I wont open .svg as string, add some lines with my text and save this as new .svg file using RMagick.
but method to_blob and from_blob doesn't work correct
# myapp.rb
require 'sinatra'
require 'rmagick'
get '/test/:browser' do
img = Magick::Image::read("icons/default/#{params[:browser]}.svg")[0]
str = img.to_blob
"<textarea name='image' cols='100' rows='100'>#{str}</textarea>"
end
documentation from https://rmagick.github.io/image3.html#to_blob
img.to_blob [ { optional arguments } ]-> string
Description: Creates a Binary Large OBject, a direct-to-memory version
of the image.
chrome.svg:
<svg xmlns="http://www.w3.org/2000/svg" viewBox="15.5 15.5 224.5 224.5">
<defs>
<radialGradient cy="0" cx="0.5" id="r">
<stop stop-color="#f06b59"/>
<stop offset="1" stop-color="#df2227"/>
</radialGradient>
<radialGradient r="0.76" cy="0.3" cx="0.65" id="g">
<stop offset="0.65" stop-color="#4cb749"/>
<stop offset="1" stop-color="#388b41"/>
</radialGradient>
<radialGradient r="0.8" cy="0.25" cx="0.36" id="y">
<stop offset="0.6" stop-color="#FCD209"/>
<stop offset="0.7" stop-color="#f7c616"/>
<stop offset="1" stop-color="#bc821e"/>
</radialGradient>
<radialGradient r="1" cy="0" cx="0.5" spreadMethod="pad" id="cf">
<stop offset="0.1" stop-color="#7FB3DF"/>
<stop offset="0.9" stop-color="#0F5B94"/>
</radialGradient>
<radialGradient id="cb" r="1" cy="0" cx="0.5">
<stop offset="0" stop-color="#F6F0EE"/>
<stop offset="1" stop-color="#ddd"/>
</radialGradient>
</defs>
<path d="m198,148a70,70 0 0 0 -140,0l20,0a50,50 0 0 1 100,0" fill-opacity="0.1"/>
<circle r="45" cx="127.5" cy="127.6" fill="url(#cf)" stroke="url(#cb)" stroke-width="9" />
<path d="m228,78a112,112 0 0 0 -193,-13l45,78a50,50 0 0 1 47,-65" fill="url(#r)"/>
<path d="m35,65a112,112 0 0 0 84,174l47,-80a50,50 0 0 1 -86,-16" fill="url(#g)"/>
<path d="m119,239a112,112 0 0 0 109,-161l-101,0a50,50 0 0 1 39,81" fill="url(#y)"/>
<path d="m35,65l45,78a50,50 0 0 1 2,-34l-45,-47" opacity="0.075"/>
<path d="m119,239l47,-80a50,50 0 0 1 -29,17l-20,63" opacity="0.05"/>
<path d="m228,78l-101,0a50,50 0 0 1 39,19l64,-16" opacity="0.05"/>
</svg>
But to_blob return this:
<?xml version="1.0" standalone="no"?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
"http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
<svg width="225" height="225">
<circle cx="0" cy="0" r="1" fill="white"/>
<circle cx="1" cy="0" r="1" fill="white"/>
<circle cx="2" cy="0" r="1" fill="white"/>
==============================
about 50 000 such lines here
if this save to file, size of file will be about 3 MB
==============================
<circle cx="220" cy="224" r="1" fill="white"/>
<circle cx="221" cy="224" r="1" fill="white"/>
<circle cx="222" cy="224" r="1" fill="white"/>
<circle cx="223" cy="224" r="1" fill="white"/>
<circle cx="224" cy="224" r="1" fill="white"/>
</svg>
What I doing wrong?
Or, if you have another idea how to do this task - please, share.

get '/test/:browser' do
image = File.open('icons/default/chrome.svg')
blob = image.read
"<textarea name='image' cols='100' rows='100'>#{blob}</textarea>"
end
This is what i need.
First open file, then use read method.
In this case all work correct and .to_blob not needed

SVG horizontal gradient animation

I've created the fiddle
<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="280.089px" height="280.089px" viewBox="0 0 280.089 280.089" enable-background="new 0 0 280.089 280.089" xml:space="preserve">
<linearGradient id="SVGID_1_" gradientUnits="userSpaceOnUse" x1="-229.002" y1="335.0444" x2="-47.9087" y2="335.0444" gradientTransform="matrix(1 0 0 -1 278.5 475.0889)">
<stop offset="0" style="stop-color:#4D75B1" />
<stop offset="0.1138" style="stop-color:#4C7BB0" />
<stop offset="0.2617" style="stop-color:#4A8BAD" />
<stop offset="0.4278" style="stop-color:#46A6A7" />
<stop offset="0.5117" style="stop-color:#44B6A4" />
<stop offset="0.9093" style="stop-color:#828282" />
<animate attributeName="offset" dur="20s" values="0;1;0" repeatCount="indefinite" />
<stop offset="1" style="stop-color:#77D5C0" />
</linearGradient>
<polygon class="wdgreyAnim" fill="url(#largeGradient)" points="49.498,91.095 73.592,188.992 101.322,188.992 115.607,135.212 129.191,188.994 150.898,188.994 177.931,110.705 195.294,167.986 162.38,167.986 155.238,188.994 230.591,188.994 199.076,91.095 158.711,91.211 141.919,136.94 132.27,91.095 103.699,91.095 91.522,142.325 79.75,91.095 " />
<defs>
<linearGradient id="largeGradient" x2="100%">
<stop offset="0%" stop-color="#4c7eaf"></stop>
<stop offset="25%" stop-color="#4a8eac"></stop>
<stop offset="50%" stop-color="#46a5a7"></stop>
<stop offset="75%" stop-color="#53bfac"></stop>
<stop offset="100%" stop-color="#828282"></stop>
<animate attributeName="x2" dur="5s" from="0%" to="100%" repeatCount="indefinite" />
</linearGradient>
</defs>
the animation is moving vertically but i want it be moved horizontally.
I am not able to do this . someone please help me out
My confusion is the gradient is like vertical. how can i set the stop tag with the offset for the different colors and animation.
and also in animate tag. if i use freeze instead of repeatcount attribute that will take full single color but i want it to filled with the gradient i.e how it animates.
Better if the animation come like the waves from the bottom to top.(liquid filling effect)
JSfiddle
Added the svg code for the final image i needed after the animation
<?xml version="1.0" encoding="utf-8"?>
js fiddle updated
the animation movement to be from bottom to top and gradient color should be from left to right .and also i need that to be animated like the water waves

You mean like this? I've just used y2 instead of x2
<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="280.089px" height="280.089px" viewBox="0 0 280.089 280.089" enable-background="new 0 0 280.089 280.089" xml:space="preserve">
<polygon class="wdgreyAnim" fill="url(#largeGradient)" points="49.498,91.095 73.592,188.992 101.322,188.992 115.607,135.212 129.191,188.994 150.898,188.994 177.931,110.705 195.294,167.986 162.38,167.986 155.238,188.994 230.591,188.994 199.076,91.095 158.711,91.211 141.919,136.94 132.27,91.095 103.699,91.095 91.522,142.325 79.75,91.095 " />
<defs>
<linearGradient id="largeGradient" x2="0" y2="100%">
<stop offset="0%" stop-color="#4c7eaf"></stop>
<stop offset="25%" stop-color="#4a8eac"></stop>
<stop offset="50%" stop-color="#46a5a7"></stop>
<stop offset="75%" stop-color="#53bfac"></stop>
<stop offset="100%" stop-color="#828282"></stop>
<animate attributeName="y2" dur="5s" from="0%" to="100%" repeatCount="indefinite" />
</linearGradient>
</defs>
</svg>

Resources