SVG - animate opacity - animation

could you please help me out, how to create SVG animation, which will behave like this? https://framer.cloud/aSUDY/
I did my best, but it always misbehaves :-(
Here is my code, where I used 6 animations to cycle through (3 to animate from 0.5 to 1 opacity and three to animate vice versa)
<?xml version="1.0" encoding="UTF-8"?>
<svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;">
<defs>
<ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" >
<animate
id="anim1"
attributeType="xml"
attributeName="fill-opacity"
begin="0s;anim33.end"
from="0.5"
to="1"
dur="1s"
fill="freeze"
/>
</ellipse>
<path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
<animate
id="anim2"
attributeType="xml"
attributeName="fill-opacity"
begin="anim1.end"
from="0.5"
to="1"
dur="1s"
fill="freeze"
/>
</path>
<path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
<animate
id="anim3"
attributeType="xml"
attributeName="fill-opacity"
begin="anim2.end"
from="0.5"
to="1"
dur="1s"
fill="freeze"
/>
</path>
<ellipse id="CON11" fill="#FFFFFF" fill-opacity="1" cx="0.583333333" cy="1.5" rx="1" ry="1" >
<animate
id="anim11"
attributeType="xml"
attributeName="fill-opacity"
begin="anim3.end"
from="1"
to="0.5"
dur="0.1"
fill="freeze"
/>
</ellipse>
<path id="CON22" fill="#FFFFFF" fill-opacity="1" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
<animate
id="anim22"
attributeType="xml"
attributeName="fill-opacity"
begin="anim11.end"
from="1"
to="0.5"
dur="0.1"
fill="freeze"
/>
</path>
<path id="CON33" fill="#FFFFFF" fill-opacity="0.5" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
<animate
id="anim33"
attributeType="xml"
attributeName="fill-opacity"
begin="anim22.end"
from="1"
to="0.5"
dur="0.1"
fill="freeze"
/>
</path>
</defs>
<g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5">
<path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path>
</g>
<g id="CON3" transform="translate(18.000000, 2.000000)" >
<use xlink:href="#CON33" ></use>
</g>
<g id="CON2" transform="translate(16.000000, 4.000000)" >
<use xlink:href="#CON22" ></use>
</g>
<g id="CON1" transform="translate(15.000000, 5.000000)" >
<use xlink:href="#CON11" ></use>
</g>
</svg>


I've changed the animations to use values, they don't really need to be linked.
I've removed the duplication and the elements that really were'nt doing anything other than add complexity.
<svg width="100%" viewBox="0 0 24 24" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="background: #000085;">
<g id="ACFT" transform="translate(2.000000, 2.000000)" fill="#FFFFFF" fill-opacity="0.5">
<path d="M19,14 L19,12 L11,7 L11,1.5 C11,0.67 10.33,0 9.5,0 C8.67,0 8,0.67 8,1.5 L8,7 L0,12 L0,14 L8,11.5 L8,17 L6,18.5 L6,20 L9.5,19 L13,20 L13,18.5 L11,17 L11,11.5 L19,14 Z" id="Shape"></path>
</g>
<g id="CON3" transform="translate(18.000000, 2.000000)" >
<path id="CON33" fill="#FFFFFF" fill-opacity="1" d="M1.53441961,8.85936702e-16 L0.5,0.99747605 C2.36195529,2.79293294 2.36195529,5.58586588 0.5,7.48107038 L1.53441961,8.47854643 C4.12046863,6.18435151 4.12046863,2.39394252 1.53441961,0 L1.53441961,8.85936702e-16 Z">
<animate
id="anim3"
attributeType="xml"
attributeName="fill-opacity"
begin="0s"
values="0.5;0.5;0.5;0.5;1"
dur="2s"
repeatCount="indefinite"
/>
</path>
</g>
<g id="CON2" transform="translate(16.000000, 4.000000)" >
<path id="CON22" fill="#FFFFFF" fill-opacity="0.5" d="M1.78441961,0.25 L0.75,1.24747605 C1.2672098,1.94570929 1.2672098,2.84343773 0.75,3.54167097 L1.78441961,4.53914702 C3.02572314,3.34217576 3.02572314,1.54671887 1.78441961,0.25 Z">
<animate
id="anim2"
attributeType="xml"
attributeName="fill-opacity"
begin="0s"
values="0.5;0.5;0.5;1;1"
dur="2s"
repeatCount="indefinite"
/>
</path>
</g>
<g id="CON1" transform="translate(15.000000, 5.000000)" >
<ellipse id="CON11" fill="#FFFFFF" fill-opacity="0.5" cx="0.583333333" cy="1.5" rx="1" ry="1" >
<animate
id="anim1"
attributeType="xml"
attributeName="fill-opacity"
begin="0s"
values="0.5;0.5;1;1;1"
dur="2s"
repeatCount="indefinite"
/>
</ellipse>
</g>
</svg>

Related

Hard svg animation

I need your help with the implementation of svg animation.
https://youtu.be/lrWjkARl8Zg
(sorry for the poor video quality)
And I have such a structure of svg
I need the arrow (class = "arrow") itself to move along long lines and draw it.
<svg class="vector" width="1193" height="329" viewBox="0 0 1193 329" fill="none" xmlns="http://www.w3.org/2000/svg">
<path class="long_line" d="M1436 327.98L84.7148 327.98C73.8082 328.219 62.9639 326.275 52.818 322.262C42.6722 318.249 33.4293 312.249 25.6315 304.613C17.8337 296.977 11.6384 287.858 7.40866 277.793C3.17891 267.728 0.999997 256.919 0.999996 246C0.999996 235.081 3.17891 224.272 7.40866 214.207C11.6384 204.142 17.8337 195.023 25.6315 187.387C33.4292 179.751 42.6722 173.75 52.818 169.738C62.9638 165.725 73.8082 163.781 84.7147 164.02L589.173 164.02" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
<path class="arrow" d="M544 204L589 164L548 124" stroke="black" stroke-width="2"/>
<path class="arrow" d="M504 1L459 41L500 81" stroke="black" stroke-width="2"/>
<path class="short_line" d="M1308 41L459 41" stroke="black" stroke-width="2" stroke-miterlimit="10"/>
</svg>
Advise which library I can use

You could do this using svg smil animations:
A Guide to SVG Animations (SMIL)
Your arrow animations could be achieved by
<animateMotion> for moving the arrow element and
animating the stroke-dashoffset property.
Animated example
svg {
border: 1px solid #ccc;
width: 33%;
overflow: visible;
display: block;
}
path {
stroke-width: 10;
stroke: #000;
}
<p>Click on animation for replay</p>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 500">
<defs>
<path id="arrow" fill="none" d="M-45,40L0,0l-41-40" />
</defs>
<use id="arrow1" href="#arrow" />
<use id="arrow2" href="#arrow" />
<g id="graphics">
<rect id="graphics" fill="#fff" fill-opacity="0" x="0" y="0" width="100%" height="100%" />
<path id="mpath-long" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="100" stroke-dasharray="100" d="M1571,413H219.7
c-10.9,0.2-21.8-1.7-31.9-5.7c-10.1-4-19.4-10-27.2-17.6c-7.8-7.6-14-16.8-18.2-26.8S136,341.9,136,331s2.2-21.7,6.4-31.8
s10.4-19.2,18.2-26.8c7.8-7.6,17-13.6,27.2-17.6c10.1-4,21-6,31.9-5.7h504.5" />
<path id="mpath-short" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="100" stroke-dasharray="100" d="M1443,126H594" />
</g>
<animateMotion href="#arrow1" dur="2" rotate="auto" repeatCount="1" begin="0;graphics.click" fill="freeze">
<mpath href="#mpath-long" />
</animateMotion>
<animate attributeType="XML" href="#mpath-long" id="strokeAni" attributeName="stroke-dashoffset" from="100" to="0" dur="2s" repeatCount="1" begin="0;graphics.click" fill="freeze" />
<animateMotion href="#arrow2" dur="2s" rotate="auto" repeatCount="1" begin="0;graphics.click" fill="freeze">
<mpath href="#mpath-short" />
</animateMotion>
<animate attributeType="XML" href="#mpath-short" attributeName="stroke-dashoffset" from="100" to="0" dur="2s" repeatCount="1" fill="freeze" begin="0;graphics.click" />
</svg>
Quite likely, you will have to tweak your svg viewBox to get the desired result.
A common trick is to position element that's supposed to move along the motion path to x/y = 0.
Static example
<style>
svg{
border: 1px solid #ccc;
width: 33%;
overflow:visible;
display:block;
}
path{
stroke-width:10;
stroke: #000;
}
</style>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1400 500">
<defs>
<path id="arrow" fill="none" d="M-45,40L0,0l-41-40" />
</defs>
<use id="arrow1" href="#arrow" />
<use id="arrow2" href="#arrow" />
<g id="graphics">
<rect id="graphics" fill="#fff" fill-opacity="0" x="0" y="0" width="100%" height="100%" />
<path id="mpath-long" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="0" stroke-dasharray="100" d="M1571,413H219.7
c-10.9,0.2-21.8-1.7-31.9-5.7c-10.1-4-19.4-10-27.2-17.6c-7.8-7.6-14-16.8-18.2-26.8S136,341.9,136,331s2.2-21.7,6.4-31.8
s10.4-19.2,18.2-26.8c7.8-7.6,17-13.6,27.2-17.6c10.1-4,21-6,31.9-5.7h504.5" />
<path id="mpath-short" fill="none" pathLength="100" stroke-width="2" stroke-miterlimit="10" stroke-dashoffset="0" stroke-dasharray="100" d="M1443,126H594" />
</g>
</svg>

Animating a defined path's d attribute doesn't work on firefox

I'm animating a d attribute of a path that is wrapped around a defs tag and linked using a
few use tags. This works fine on Chrome, however no animation on Firefox. I tried this with relative and absolute paths to no avail.
<svg viewBox="0 0 300 100">
<defs>
<path id="a" d="M0,20 H200 V70 H0z" />
</defs>
<use xlink:href="#a" />
<animate xlink:href="#a" attributeName="d" values="M0,20 H200 V70 H0z; M0,20 H200 V45 H0z" keyTimes="0;1" dur="1s" begin="0s" fill="freeze" />
</svg>
Is the only way to make this work is by repeating the path and animating them all or is there a way to make this work on Firefox?

As commented by #Robert Longson
I think you'd need to repeat the paths. At the moment SMIL changes to
the things that a element points to do not trigger the to
re-render.
Therefore, it is necessary to transfer the animation directly inside the <path> tags
<svg viewBox="0 0 300 100">
<defs>
<path id="a" d="M0,20 H200 V70 H0z" >
<animate
attributeName="d"
values="
M0,20 H200 V70 H0z;
M0,20 H200 V45 H0z"
keyTimes="0;1"
dur="1s"
begin="0s"
fill="freeze" />
</path>
</defs>
<use xlink:href="#a" />
</svg>
Start animation after click
<svg id ="svg1" viewBox="0 0 300 100">
<defs>
<path id="a" d="M0,20 H200 V70 H0z" >
<animate
attributeName="d"
values="
M0,20 H200 V70 H0z;
M0,20 H200 V45 H0z"
keyTimes="0;1"
dur="1s"
begin="svg1.click"
fill="freeze" />
</path>
</defs>
<use xlink:href="#a" />
</svg>

Easing animateMotion in SVG

I want to apply an easing to an animateMotion tag.
I'm confused about which attributes are relevant to animate a shape: if I understood well calcMode="spline" is required, along with the definition of keyTimes and keySplines; but what about the use of keySplines and values?
However, I tried to insert timings into my animation, but something went wrong:
<g style="transform-origin:50%;transform: rotate(180deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="red" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="0.2s" repeatCount="once" fill="freeze" calcMode="spline" keyPoints="0.25;0.50;0.75;1" keyTimes="0;0.25;0.75;1">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
My aim would be to apply to this example timings to draw from tools like this one

You are specifying calcMode="spline", but you haven't provided a keySplines attribute.
The value for keySplines can just be copied from your spline editing tool.
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="2.2s" repeatCount="once" fill="freeze"
calcMode="spline" keyTimes="0;1" keySplines="0.1 0.8 0.9 0.1">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
Full demo (I've slowed down the animation so you can see it is working).
<!DOCTYPE HTML>
<html>
<body>
<?xml version="1.0"?>
<svg width="400" height="400" viewBox="0 0 200 200"
xmlns="http://www.w3.org/2000/svg" version="1.1"
xmlns:xlink="http://www.w3.org/1999/xlink" style="background:aquamarine">
<style>
path {
animation-name:animateDash;
animation-duration:5s;
animation-iteration-count:once;
animation-fill-mode:forwards;
}
#keyframes animateDash {
from{stroke-dasharray:0,2305}
to {stroke-dasharray:2305,0}
}
</style>
<g style="transform-origin:50%;transform: rotate(180deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="red" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="2.2s" repeatCount="once" fill="freeze"
calcMode="spline" keyTimes="0;1" keySplines="0.1 0.8 0.9 0.1">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
<g style="transform-origin:50%;transform: rotate(60deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="white" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="0.2s" repeatCount="once" fill="freeze">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
<g style="transform-origin:50%;transform: rotate(-60deg);">
<path id="verticalMotionPath" d="m 100,100 0, 50" stroke-width="5px" stroke="blue" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle cx="0" cy="0" r="5" fill="#333333">
<animateMotion dur="0.2s" repeatCount="once" fill="freeze">
<mpath xlink:href="#verticalMotionPath"/>
</animateMotion>
</circle>
</g>
</svg>
</body>
</html>

This is how I would do it although I don't use animateMotion.
Since your path is made up of lines you can define the values for <animateTransform> like this:
Your path's d="M100, 100 L100, 47 146, 73"
the animation's values="100, 100; 100, 47;146, 73"
This is a working example:
<svg width="400" height="400" viewBox="0 0 200 200" style="background:aquamarine">
<path id="theMotionPath" d="M100, 100 L100, 47 146, 73" stroke-width="5px" stroke="antiquewhite" fill="none" stroke-linecap="round" stroke-linejoin="round" />
<circle r="5" >
<animateTransform
attributeType="XML"
attributeName="transform"
type="translate"
values="100,100; 100,47; 146,73"
keySplines= ".5 0 .5 1; 0 .75 .25 1";
calcMode="spline"
dur="4s"
repeatCount="indefinite" />
</circle>
</svg>
The keySplines length must be equal to the length of the values - 1. In this case values.length = 3 thus keySplines.length = 2, i.e: the movement from the first to the second value is defined by the first key spline; the movement from the second to the third value is defined by the second key spline. Every value of the keySplines is defining the 2 control points of a Bézier curve.

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"

SVG animation scaling while keeping the group from moving on one end

I am trying to use svg animation to get a dragonfly to flap its wings.
I am doing this by scaling the left and right wing on the x axis. the problem is when I scale it the wing moves. I want the left or right edge of the wing to stay in one spot when it scales.
here is the code for one wing
<g id="wing_left">
<g>
<path fill="#88C9CE" d="M254.8,132.1c-66.2,6.7-130.7,21.1-193.3,47.2c-7.4,3.1-58.6,24.1-44.8,37.4
c15.2,14.8,88.3,17.3,109.3,11.3C162.6,217.8,279.4,129.7,254.8,132.1z"/>
<path fill="#92D9DE" d="M237.3,113.7c-16.1,3.6-245.9-31.8-250-22.3c-11.5,26.7,38.3,51.9,56.1,58.2
c88.5,31.4,185.6,6.2,202.5-11.3C251.7,132.4,247.9,111.3,237.3,113.7z"/>
<path fill="#FFFFFF" d="M-1.2,97.7c9.1-4.5,84.8,7.2,83.7,7.1c-16.4-1.7-49.9-3.3-56.9-3.5c-32.2-1.2-24,7.4-22.5,11.8
C5,118.4-7.2,100.6-1.2,97.7z"/>
<path fill="#76B0B3" d="M249.3,145.5c-2.9,3-8,7.3-11.5,10.2c-21.1,17.5-102.1,8.9-102.1,8.9s54.5-2.2,86-13.4
c13.2-4.7,21-10.2,23.2-12c0,0,1.1,1.4,2.1,2.5c1,1.1,2.3,1.8,2.3,1.8S249.3,145.5,249.3,145.5z"/>
</g>
<animateTransform id="wlFlapDown" attributeName="transform"
type="scale"
from="1 1" to="0.5 1"
begin="0s;wlFlapUp.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
<animateTransform id="wlFlapUp" attributeName="transform"
type="scale"
from="0.5 1" to="1 1"
begin="wlFlapDown.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
</g>
Here is the whole svg code or you can see it in codepen
<?xml version="1.0" encoding="utf-8"?>
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
viewBox="-14.4 7.7 550.5 426.8" enable-background="new -14.4 7.7 550.5 426.8" xml:space="preserve">
<g id="wing_left">
<g>
<path fill="#88C9CE" d="M254.8,132.1c-66.2,6.7-130.7,21.1-193.3,47.2c-7.4,3.1-58.6,24.1-44.8,37.4
c15.2,14.8,88.3,17.3,109.3,11.3C162.6,217.8,279.4,129.7,254.8,132.1z"/>
<path fill="#92D9DE" d="M237.3,113.7c-16.1,3.6-245.9-31.8-250-22.3c-11.5,26.7,38.3,51.9,56.1,58.2
c88.5,31.4,185.6,6.2,202.5-11.3C251.7,132.4,247.9,111.3,237.3,113.7z"/>
<path fill="#FFFFFF" d="M-1.2,97.7c9.1-4.5,84.8,7.2,83.7,7.1c-16.4-1.7-49.9-3.3-56.9-3.5c-32.2-1.2-24,7.4-22.5,11.8
C5,118.4-7.2,100.6-1.2,97.7z"/>
<path fill="#76B0B3" d="M249.3,145.5c-2.9,3-8,7.3-11.5,10.2c-21.1,17.5-102.1,8.9-102.1,8.9s54.5-2.2,86-13.4
c13.2-4.7,21-10.2,23.2-12c0,0,1.1,1.4,2.1,2.5c1,1.1,2.3,1.8,2.3,1.8S249.3,145.5,249.3,145.5z"/>
</g>
<animateTransform id="wlFlapDown" attributeName="transform"
type="scale"
from="1 1" to="0.5 1"
begin="0s;wlFlapUp.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
<animateTransform id="wlFlapUp" attributeName="transform"
type="scale"
from="0.5 1" to="1 1"
begin="wlFlapDown.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
</g>
<g id="wing_right">
<g>
<path fill="#88C9CE" d="M275.9,134c66.4,4.7,131.2,17.1,194.6,41.4c7.5,2.9,59.3,22.3,45.9,36.1c-14.8,15.2-87.7,19.9-109,14.6
C370.6,216.9,251.2,132.2,275.9,134z"/>
<path fill="#92D9DE" d="M285,113c16.2,3.1,244.8-39.1,249.2-29.7c12.3,26.3-36.8,53-54.4,59.8c-87.6,34-185.4,11.7-202.8-5.2
C271.1,132.1,274.2,110.9,285,113z"/>
<path fill="#FFFFFF" d="M451.2,98.5c25.6-4.3,28.9-4.8,58.9-8.8c1.9-0.3,16.3-1.3,15.6,4.3c-0.2,1.4-6.5,17.8-6,13.2
c0.1-0.8,0.9-9.8-1.3-12.5C513.9,88.7,445.7,99.5,451.2,98.5z"/>
<path fill="#76B0B3" d="M291.3,155.4c21.9,16.6,99.9,5.4,99.9,5.4s-54.7-0.2-86.7-9.9c-13.4-4.1-22.5-9.1-24.1-10.3
c0,0-0.8,0.9-1.8,1.6c0,0,0.1,2.2,0.1,2.2S287.6,152.7,291.3,155.4z"/>
</g>
<animateTransform id="wrFlapDown" attributeName="transform"
type="scale"
from="1 1" to="0.5 1"
begin="0s; wrFlapUp.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
<animateTransform id="wrFlapDown" attributeName="transform"
type="scale"
from="0.5 1" to="1 1"
begin="wrFlapDown.end" dur="160ms"
repeatCount="indefinite"
fill="freeze"
/>
</g>
<g id="body" xmlns:inkpad="http://taptrix.com/inkpad/svg_extensions">
<g id="Layer_2" inkpad:layerName="body">
<path fill="#D9AC32" d="M253.8,83.2c-4.5-29.5-6.4-53.2-16-74.7c-0.8-1.9-4.3,1-3.4,1.6c0.4,0.2,12.6,13.5,17.3,73.2
C252.2,88.9,254.5,87.3,253.8,83.2z"/>
<path fill="#D9AC32" d="M272.2,82.6c5.2-29.3,7.8-53,17.9-74.3c0.9-1.9,4.3,1.1,3.3,1.7c-0.4,0.2-12.9,13.2-19.1,72.7
C273.7,88.2,271.5,86.6,272.2,82.6z"/>
<path fill="#FFE008" d="M249.8,128.8l28.2-0.4c0,0,10.4,208,2.7,260.4c-10.3,71.1-18.9,49.7-27.9,0.4
C243.4,337.1,249.8,128.8,249.8,128.8z"/>
<path fill="#FFE008" d="M242.5,130.2c-0.2-12,9-21.8,20.6-22c11.5-0.2,21.1,9.4,21.2,21.4c0.2,12-9.7,17-21.2,17.2
C251.5,146.9,242.7,142.2,242.5,130.2z"/>
<path fill="#FFE008" d="M236.8,110.7c-0.3-18.4,12-32.8,26.5-33c14.5-0.2,25.8,13.9,26.1,32.2c0.3,18.4-11.7,25.1-26.3,25.3
C248.6,135.4,237.1,129,236.8,110.7z"/>
</g>
<g id="Layer_3" inkpad:layerName="eyes">
<g>
<path fill="#F5F2E1" d="M227.8,95.9c-0.1-8.3,7.2-15.1,16.4-15.3c9.2-0.1,16.7,6.5,16.8,14.8c0.1,8.3-7.2,15.1-16.4,15.3
C235.4,110.9,227.9,104.2,227.8,95.9z"/>
<path d="M255.1,92c-0.6,1.6-7.3-5.5-19.7,3.7c-2.4,1.8-1.8-4.6-0.1-6C244.1,82.6,255.8,90.4,255.1,92z"/>
<path fill="#D8E6C3" d="M228,96.2c-0.1-5.4,2.1,9.9,15.5,11.1c8.1,0.7,14.5-2.9,14.2-2.5c-3.9,4.4-9,5.5-10.5,5.7
C236.8,111.8,228.2,106.5,228,96.2z"/>
</g>
<g>
<path fill="#F5F2E1" d="M295.8,94.9c-0.1-8.3-7.7-14.9-16.8-14.8c-9.2,0.1-16.5,7-16.4,15.3c0.1,8.3,7.7,14.9,16.8,14.8
C288.6,110.1,295.9,103.2,295.8,94.9z"/>
<path d="M268.3,91.8c0.7,1.6,7.1-5.7,19.8,3.1c2.5,1.7,1.7-4.7-0.1-6C279.1,82.1,267.6,90.3,268.3,91.8z"/>
<path fill="#D8E6C3" d="M295.5,95.2c-0.1-5.4-1.8,9.9-15.2,11.5c-8.1,1-14.6-2.5-14.3-2.1c4,4.3,9.2,5.2,10.7,5.4
C287.2,111,295.7,105.5,295.5,95.2z"/>
</g>
</g>
<path fill="#E5C907" d="M242.6,127.9c0-0.1,4.8,8.1,22.5,7.2c13.6-0.7,19-8.1,19-8.1c-0.4,4.9-11.3,11.2-18.3,11.6
C260.3,139,247.3,137.3,242.6,127.9z"/>
<path fill="#E5C907" d="M249.3,143.6c0,0,6,3.9,15,3.2c10.4-0.8,14.4-4.7,14.4-4.6c0.2,4.1,0.5,8.3,0.4,8.6
c-3.5,7.1-20.6,9.4-29.8,2C249,152.5,249.3,147.1,249.3,143.6z"/>
</g>
</svg>

The problem here is that the origin for all scale transforms is at (0,0) which is at the top left of the SVG. So your scale animations are centred on the left side of the SVG (x=0).
Basically you need to move the coordinate space for the wings, so that when the scale is applied, the wings are centred on x=0.
So the steps would be:
Use a translate transform to move your wings so they are centred at x=0
apply your scale animation in this coordinate space
surround that with a group with a transform that moves them back to their original position
For example:
<g id="wings" transform="translate(270,0)">
<g>
<g transform="translate(-270,0)">
<g "left wing">
<g "right wing">
</g>
<animateTransform .../>
</g>
</g>
Demo here

Resources