I created an svg animation ↓
<svg height="40%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
viewBox="0 0 400 379" width="40%" >
<circle cx="199.348" cy="164.564" id="circle" r="64.38" style="fill:=black" />
<path d="M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z" id="logo2"
style="fill:#fff;">
<animate attributeName="d" dur="3000ms" repeatCount="indefinite" id="logo2a1" values="
M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z;
M149.185,177.484l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
M272.008,54.66l41.676,-41.676l6.919,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
M307.037,339.778l41.676,-41.677l6.919,0l-0,9.74l-38.635,38.635l-9.96,-0l0,-6.698Z;
M11.858,314.811l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
M162.228,164.44l41.677,-41.676l6.918,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z"
</path>
</svg>
I wanted the movement of the white line to look more natural, so I'm trying to add some ease-in/ease-out effects with keySpline attributes on the animate
tag ↓, but the animation is no longer happening.
<svg height="40%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
viewBox="0 0 400 379" width="40%" >
<circle cx="199.348" cy="164.564" id="circle" r="64.38" style="fill:=black" />
<path d="M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z" id="logo2"
style="fill:#fff;">
<animate attributeName="d" dur="3000ms" repeatCount="indefinite" calcMode="spline" id="logo2a1" values="
M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z;
M149.185,177.484l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
M272.008,54.66l41.676,-41.676l6.919,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
M307.037,339.778l41.676,-41.677l6.919,0l-0,9.74l-38.635,38.635l-9.96,-0l0,-6.698Z;
M11.858,314.811l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
M162.228,164.44l41.677,-41.676l6.918,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z"
keyTimes="0;0.5;1;1.5;2;2.5;3.0"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1 " />
</path>
</svg>
What can I do to get the animation working again, and get the white line to animate with a ease-in/ease-out effect?
Keytimes run from 0 to 1. Numbers outside this range are invalid.
Correcting that seems to make things work correctly.
<svg height="40%" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;"
viewBox="0 0 400 379" width="40%" >
<circle cx="199.348" cy="164.564" id="circle" r="64.38" style="fill:=black" />
<path d="M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z" id="logo2"
style="fill:#fff;">
<animate attributeName="d" dur="3000ms" repeatCount="indefinite" calcMode="spline" id="logo2a1" values="
M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z;
M149.185,177.484l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
M272.008,54.66l41.676,-41.676l6.919,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
M307.037,339.778l41.676,-41.677l6.919,0l-0,9.74l-38.635,38.635l-9.96,-0l0,-6.698Z;
M11.858,314.811l41.676,-41.677l6.918,0l0,9.74l-38.634,38.635l-9.96,-0l-0,-6.698Z;
M162.228,164.44l41.677,-41.676l6.918,-0l-0,9.739l-38.635,38.635l-9.96,0l0,-6.698Z;
M159.888,166.78l41.677,-41.676l6.918,-0l0,9.739l-38.635,38.635l-9.96,-0l0,-6.698Z"
keyTimes="0;0.16;.3;.4;.6;.8;1.0"
keySplines="0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1; 0.5 0 0.5 1 " />
</path>
</svg>