Etwas veränderte Animation

media/robot-face-animated.svg

-<svg xmlns="http://www.w3.org/2000/svg" clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" viewBox="0 0 48 48"><g id="_a0" transform="translate(24,24) translate(-21.5,-23)"><ellipse fill="#45413c" fill-opacity=".15" rx="19.5" ry="1.5" transform="translate(-2.5,-1) translate(24,45.5)"/><path d="M42 40.5c0 2.2-1.8 4-4 4h-28c-2.2 0-4-1.8-4-4v-13.5c0-9.9 8.1-18 18-18c9.9 0 18 8.1 18 18Z" fill="#daedf7" fill-rule="nonzero" transform="translate(-2.5,-1)"/><path d="M24 9c-9.9 0-18 8.1-18 18v5c0-9.9 8.1-18 18-18c9.9 0 18 8.1 18 18v-5c0-9.9-8.1-18-18-18Z" fill="#fff" fill-rule="nonzero" transform="translate(-2.5,-1)"/><path d="M42 40.5c0 2.2-1.8 4-4 4h-28c-2.2 0-4-1.8-4-4v-13.5c0-9.9 8.1-18 18-18c9.9 0 18 8.1 18 18Z" fill="none" stroke="#45413c" transform="translate(-2.5,-1)"/><path d="M30.5 44c0 1.1-0.9 2-2 2h-9c-1.1 0-2-0.9-2-2v-8c0-1.1 .9-2 2-2h9c1.1 0 2 .9 2 2Z" fill="#c0dceb" fill-rule="nonzero" transform="translate(-2.5,-1)"/><path d="M17.5 38.5h13v2h-13Z" fill="#adc4d9" transform="translate(-2.5,-1)"/><path d="M45.5 35.9c0 .4-0.2 .7-0.5 .9l-3 1.7v-12.5l3 1.7c.3 .2 .5 .5 .5 .9Z" fill="#adc4d9" fill-rule="nonzero" stroke="#45413c" transform="translate(-2.5,-1)"/><path d="M2.5 35.9c0 .4 .2 .7 .5 .9l3 1.7v-12.5l-3 1.7c-0.3 .2-0.5 .5-0.5 .9Z" fill="#adc4d9" fill-rule="nonzero" stroke="#45413c" transform="translate(-2.5,-1)"/><path id="_a1" d="M24 9c.2-1 2.5-6.8 10.5-5.5" fill="none" stroke="#45413c" transform="translate(-2.5,-1)"/><ellipse id="Kugel" fill="#ff6242" rx="2.5" ry="2.5" stroke="#45413c" transform="translate(-2.5,-1) translate(0,0) translate(36,3.5)"/><path d="M30.5 44c0 1.1-0.9 2-2 2h-9c-1.1 0-2-0.9-2-2v-8c0-1.1 .9-2 2-2h9c1.1 0 2 .9 2 2Z" fill="none" stroke="#45413c" transform="translate(-2.5,-1)"/><path d="M17.5 34h13v2.5c0 1.1-0.9 2-2 2h-9c-1.1 0-2-0.9-2-2Z" fill="#ff6242" fill-rule="nonzero" stroke="#45413c" transform="translate(-2.5,-1)"/><path d="M33.5 11.7c-2.8-1.7-6-2.7-9.5-2.7c-3.5 0-6.7 1-9.5 2.7v12.3h19Z" fill="none" stroke="#45413c" transform="translate(-2.5,-1)"/><path id="Augerechts" fill="#00dfeb" stroke="#45413c" d="M5 0c0 2.8-2.2 5-5 5c-2.8 0-5-2.2-5-5c0-2.8 2.2-4.5 5-4.5c2.8 0 5 1.7 5 4.5Z" transform="translate(-2.5,-1) translate(32.5,25)"/><path id="Pupillerechts" fill="#627b8c" stroke="#45413c" d="M2 0c0 1.1-0.9 2-2 2c-1.1 0-2-0.9-2-2c0-1.1 .9-2 2-2c1.1 0 2 .9 2 2Z" transform="translate(-2.5,-1) translate(32.5,25)"/><path id="Augelinks" fill="#00dfeb" stroke="#45413c" d="M5 0c0 2.6-2.2 4.8-5 4.8c-2.8 0-5-2.2-5-4.8c0-2.6 2.2-4.8 5-4.8c2.8 0 5 2.2 5 4.8Z" transform="translate(-2.5,-5.1) translate(15.5,29.4)"/><path id="Pupillelinks" fill="#627b8c" stroke="#45413c" d="M2 0c0 1.1-0.9 2-2 2c-1.1 0-2-0.9-2-2c0-1.1 .9-2 2-2c1.1 0 2 .9 2 2Z" transform="translate(-2.5,-1) translate(0,0) translate(15.5,25)"/></g><script><![CDATA[/*
+<svg xmlns="http://www.w3.org/2000/svg" clip-rule="evenodd" fill-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="10" viewBox="0 0 48 48"><g id="f" transform="translate(24,24) translate(-21.5,-23)"><ellipse rx="19.5" ry="1.5" fill="#45413c" fill-opacity=".15" transform="translate(-2.5,-1) translate(24,45.5)"/><path d="M42 40.5c0 2.2-1.8 4-4 4h-28c-2.2 0-4-1.8-4-4v-13.5c0-9.9 8.1-18 18-18c9.9 0 18 8.1 18 18Z" fill="#daedf7" fill-rule="nonzero" transform="translate(-2.5,-1)"/><path d="M24 9c-9.9 0-18 8.1-18 18v5c0-9.9 8.1-18 18-18c9.9 0 18 8.1 18 18v-5c0-9.9-8.1-18-18-18Z" fill="#fff" fill-rule="nonzero" transform="translate(-2.5,-1)"/><path d="M42 40.5c0 2.2-1.8 4-4 4h-28c-2.2 0-4-1.8-4-4v-13.5c0-9.9 8.1-18 18-18c9.9 0 18 8.1 18 18Z" fill="none" stroke="#45413c" transform="translate(-2.5,-1)"/><path d="M30.5 44c0 1.1-0.9 2-2 2h-9c-1.1 0-2-0.9-2-2v-8c0-1.1 .9-2 2-2h9c1.1 0 2 .9 2 2Z" fill="#c0dceb" fill-rule="nonzero" transform="translate(-2.5,-1)"/><path d="M17.5 38.5h13v2h-13Z" fill="#adc4d9" transform="translate(-2.5,-1)"/><g id="g" transform="translate(21.5,31.2) translate(0,0) translate(-21.5,-6.2)"><path d="M45.5 35.9c0 .4-0.2 .7-0.5 .9l-3 1.7v-12.5l3 1.7c.3 .2 .5 .5 .5 .9Z" fill="#adc4d9" fill-rule="nonzero" stroke="#45413c" transform="translate(-2.5,-26)"/><path d="M2.5 35.9c0 .4 .2 .7 .5 .9l3 1.7v-12.5l-3 1.7c-0.3 .2-0.5 .5-0.5 .9Z" fill="#adc4d9" fill-rule="nonzero" stroke="#45413c" transform="translate(-2.5,-26)"/></g><path id="h" d="M24 9c.2-1 2.5-6.8 10.5-5.5" fill="none" stroke="#45413c" transform="translate(-2.5,-1)"/><ellipse id="a" rx="2.5" ry="2.5" fill="#ff6242" stroke="#45413c" transform="translate(-2.5,-1) translate(0,0) translate(36,3.5)"/><path d="M30.5 44c0 1.1-0.9 2-2 2h-9c-1.1 0-2-0.9-2-2v-8c0-1.1 .9-2 2-2h9c1.1 0 2 .9 2 2Z" fill="none" stroke="#45413c" transform="translate(-2.5,-1)"/><path d="M17.5 34h13v2.5c0 1.1-0.9 2-2 2h-9c-1.1 0-2-0.9-2-2Z" fill="#ff6242" fill-rule="nonzero" stroke="#45413c" transform="translate(-2.5,-1)"/><path d="M33.5 11.7c-2.8-1.7-6-2.7-9.5-2.7c-3.5 0-6.7 1-9.5 2.7v12.3h19Z" fill="none" stroke="#45413c" transform="translate(-2.5,-1)"/><path id="b" d="M5 0c0 2.8-2.2 5-5 5c-2.8 0-5-2.2-5-5c0-2.8 2.2-4.5 5-4.5c2.8 0 5 1.7 5 4.5Z" fill="#00dfeb" stroke="#45413c" transform="translate(-2.5,-1) translate(32.5,25)"/><path id="c" d="M2 0c0 1.1-0.9 2-2 2c-1.1 0-2-0.9-2-2c0-1.1 .9-2 2-2c1.1 0 2 .9 2 2Z" fill="#627b8c" stroke="#45413c" transform="translate(-2.5,-1) translate(32.5,25)"/><path id="d" d="M5 0c0 2.6-2.2 4.8-5 4.8c-2.8 0-5-2.2-5-4.8c0-2.6 2.2-4.8 5-4.8c2.8 0 5 2.2 5 4.8Z" fill="#00dfeb" stroke="#45413c" transform="translate(-2.5,-5.1) translate(15.5,29.4)"/><path id="e" d="M2 0c0 1.1-0.9 2-2 2c-1.1 0-2-0.9-2-2c0-1.1 .9-2 2-2c1.1 0 2 .9 2 2Z" fill="#627b8c" stroke="#45413c" transform="translate(-2.5,-1) translate(0,0) translate(15.5,25)"/></g><script><![CDATA[/*
  KeyshapeJS v1.0.0 (c) 2018 Pixofield Ltd | pixofield.com/keyshapejs/mit-license */
 window.KeyshapeJS=function(){function A(a){return"undefined"!==typeof a}function v(a,b){return a&&0==a.indexOf(b)}function H(a){if(!isFinite(a))throw Error("Non-finite value");}function Q(a){if(14>=a)return 16;var b=R[a];b||(b=A(ba[a])?0|(a.toLowerCase().indexOf("color")==a.length-5?48:0):1);return b}function J(a){return 0<=a?Math.pow(a,1/3):-Math.pow(-a,1/3)}function ca(a,b,c,d){if(0==a)return 0==b?b=-d/c:(a=Math.sqrt(c*c-4*b*d),d=(-c+a)/(2*b),0<=d&&1>=d?b=d:(d=(-c-a)/(2*b),b=0<=d&&1>=d?d:0)),b;
 var e=c/a-b*b/(a*a)/3;c=b*b*b/(a*a*a)/13.5-b*c/(a*a)/3+d/a;var n=c*c/4+e*e*e/27;b=-b/(3*a);if(0>=n){if(0==e&&0==c)return-J(d/a);a=Math.sqrt(c*c/4-n);d=Math.acos(-c/2/a);c=Math.cos(d/3);d=Math.sqrt(3)*Math.sin(d/3);a=J(a);e=2*a*c+b;if(0<=e&&1>=e)return e;e=-a*(c+d)+b;if(0<=e&&1>=e)return e;e=a*(d-c)+b;if(0<=e&&1>=e)return e}else{a=J(-c/2+Math.sqrt(n));c=J(-c/2-Math.sqrt(n));d=a+c+b;if(0<=d&&1>=d)return d;d=-(a+c)/2+b;if(0<=d&&1>=d)return d}return 0}function da(a,b){if(48==a&&"number"===typeof b)return"#"+
@@ -26,13 +26,14 @@ C.push(z)}l[p]=C}else if(48==w)v(l[p],"#")?l[p]=parseInt(l[p].substring(1),16):v
 r=r.substring(F+1).trim();E=r.indexOf("(")}else break;r=z}y[C]=r}else 64==w?"none"!=l[p]?/^[0-9 .]*$/.test(l[p])?l[p]=W(l[p]," "):(console.warn("unsupported value: "+l[p]),l[p]=[0]):l[p]=[0]:32==w?(H(l[p]),l[p]=parseFloat(l[p])):0===D&&(l[p]=parseFloat(l[p]));D=I(h,"e","easing");l=m.length;for(D||(D=[]);D.length<l;)D.push([1,0,0,.58,1]);for(l=0;l<D.length;++l)D[l]=fa(D[l]);q=[g,q,B,u,m,t,D,x];m=I(h,"mp","motionPath");A(m)&&0===g&&(q[8]=[],q[8][0]=h.motionRotate,h=document.createElementNS("http://www.w3.org/2000/svg",
 "path"),m||(m="M0,0"),h.setAttribute("d",m),q[8][1]=h,q[8][2]=h.getTotalLength());k.push(q)}0<k.length&&(c.B.push(e),c.w.push(k))}c.s=b;c.g=0;c.f=c.s;Z(c);return c},add:Z,remove:O,removeAll:function(){for(var a=t.length-1;0<=a;--a)O(t[a]);return this},timelines:function(){return t.slice()},globalPlay:function(){x&&(U=x-(new Date).getTime(),x=void 0,M());return this},globalPause:function(){x||(x=u,N(!1));return this},globalState:function(){return x?"paused":"running"}}}();
 ]]></script><script><![CDATA[if(KeyshapeJS.version.indexOf('1.')!=0)throw Error('Expected KeyshapeJS v1.*.*');window.ks=document.ks=KeyshapeJS;(function(ks){
-ks.animate("#_a0",[{p:'rotate',t:[0,2800,5000],v:[0,1,0],e:[[1,.4,0,.6,1],[1,.4,0,.6,1],[1,.4,0,.6,1]]}],
-"#_a1",[{p:'d',t:[0,2900,5000],v:["path('M24,9C24.2,8,26.5,2.2,34.5,3.5')","path('M24,9C24.2,8,27.5,4.2,35.5,5.5')","path('M24,9C24.2,8,26.5,2.2,34.5,3.5')"],e:[[1,.4,0,.6,1],[1,.4,0,.6,1],[1,.4,0,.6,1]]}],
-"#Kugel",[{p:'mpath',t:[300,3000,5000],v:['0%','50%','100%'],e:[[1,0,0,.6,1],[1,.4,0,.6,1],[1,.4,0,.6,1]],mp:"M-2.5,-1C-2.5,-1,-2.5,1.7,-2.5,3L-2.5,-1"}],
-"#Augerechts",[{p:'d',t:[0,1900,2000,2100,5000],v:["path('M5,0C5,2.8,2.8,5,0,5C-2.8,5,-5,2.8,-5,0C-5,-2.8,-2.8,-4.5,0,-4.5C2.8,-4.5,5,-2.8,5,0Z')","path('M5,0C5,2.8,2.8,5,0,5C-2.8,5,-5,2.8,-5,0C-5,-2.8,-2.8,-4.5,0,-4.5C2.8,-4.5,5,-2.8,5,0Z')","path('M5,0C5,2.8,2.8,0,0,0C-2.8,0,-5,2.8,-5,0C-5,-2.8,-2.8,0,0,0C2.8,0,5,-2.8,5,0Z')","path('M5,0C5,2.8,2.8,4.5,0,4.5C-2.8,4.5,-5,2.8,-5,0C-5,-2.8,-2.8,-4.5,0,-4.5C2.8,-4.5,5,-2.8,5,0Z')","path('M5,0C5,2.8,2.8,5,0,5C-2.8,5,-5,2.8,-5,0C-5,-2.8,-2.8,-4.5,0,-4.5C2.8,-4.5,5,-2.8,5,0Z')"],e:[[1,0,0,1,1],[1,0,0,1,1],[0],[0],[0]]}],
-"#Pupillerechts",[{p:'d',t:[0,1900,2000,2100],v:["path('M2,0C2,1.1,1.1,2,0,2C-1.1,2,-2,1.1,-2,0C-2,-1.1,-1.1,-2,0,-2C1.1,-2,2,-1.1,2,0Z')","path('M2,0C2,1.1,1.1,2,0,2C-1.1,2,-2,1.1,-2,0C-2,-1.1,-1.1,-2,0,-2C1.1,-2,2,-1.1,2,0Z')","path('M2,0C2,1.1,1.1,.5,0,.5C-1.1,.5,-2,1.1,-2,0C-2,-1.1,-1.1,.5,0,.5C1.1,.5,2,-1.1,2,0Z')","path('M2,0C2,1.1,1.1,2,0,2C-1.1,2,-2,1.1,-2,0C-2,-1.1,-1.1,-2,0,-2C1.1,-2,2,-1.1,2,0Z')"],e:[[0],[0],[0],[0]]}],
-"#Augelinks",[{p:'d',t:[0,1900,2000,2100],v:["path('M5,0C5,2.6,2.8,4.8,0,4.8C-2.8,4.8,-5,2.6,-5,0C-5,-2.6,-2.8,-4.8,0,-4.8C2.8,-4.8,5,-2.6,5,0Z')","path('M5,0C5,2.6,2.8,4.8,0,4.8C-2.8,4.8,-5,2.6,-5,0C-5,-2.6,-2.8,-4.8,0,-4.8C2.8,-4.8,5,-2.6,5,0Z')","path('M5,0C5,2.6,2.8,0,0,0C-2.8,0,-5,2.6,-5,0C-5,-2.6,-2.8,0,0,0C2.8,0,5,-2.6,5,0Z')","path('M5,0C5,2.6,2.8,4.8,0,4.8C-2.8,4.8,-5,2.6,-5,0C-5,-2.6,-2.8,-4.8,0,-4.8C2.8,-4.8,5,-2.6,5,0Z')"],e:[[0],[0],[0],[0]]}],
-"#Pupillelinks",[{p:'mpath',t:[0,1900,2000,2100],v:['0%','0%','0%','0%'],e:[[0],[0],[0],[0]],mp:"M-2.5,-1L-2.5,-1L-2.5,-1L-2.5,-1"},{p:'d',t:[0,1900,2000,2100],v:["path('M2,0C2,1.1,1.1,2,0,2C-1.1,2,-2,1.1,-2,0C-2,-1.1,-1.1,-2,0,-2C1.1,-2,2,-1.1,2,0Z')","path('M2,0C2,1.1,1.1,2,0,2C-1.1,2,-2,1.1,-2,0C-2,-1.1,-1.1,-2,0,-2C1.1,-2,2,-1.1,2,0Z')","path('M2,0C2,1.1,1.1,0,0,0C-1.1,0,-2,1.1,-2,0C-2,-1.1,-1.1,0,0,0C1.1,0,2,-1.1,2,0Z')","path('M2,0C2,1.1,1.1,2,0,2C-1.1,2,-2,1.1,-2,0C-2,-1.1,-1.1,-2,0,-2C1.1,-2,2,-1.1,2,0Z')"],e:[[0],[0],[0],[0]]}],
+ks.animate("#f",[{p:'rotate',t:[0,2800,5000],v:[0,1,0],e:[[1,.4,0,.6,1],[1,.4,0,.6,1],[0]]}],
+"#g",[{p:'mpath',t:[3500,3600,3700],v:['0%','50%','100%'],e:[[0],[1,.4,0,.6,1],[0]],mp:"M21.5,31.2L21.5,30.7L21.5,31.2"}],
+"#h",[{p:'d',t:[0,2900,5000],v:["path('M24,9C24.2,8,26.5,2.2,34.5,3.5')","path('M24,9C24.2,8,27.5,4.2,35.5,5.5')","path('M24,9C24.2,8,26.5,2.2,34.5,3.5')"],e:[[1,.4,0,.6,1],[1,.4,0,.6,1],[0]]}],
+"#a",[{p:'mpath',t:[300,3000,5000],v:['0%','50%','100%'],e:[[1,0,0,.6,1],[1,.4,0,.6,1],[0]],mp:"M-2.5,-1C-2.5,-1,-2.5,1.7,-2.5,3L-2.5,-1"},{p:'fill',t:[0,2300,3000,4100,4800],v:['#ff6242','#ff6241','#21e61e','#21e61e','#ff6241'],e:[[0],[1,.4,0,.6,1],[1,.4,0,.6,1],[1,.4,0,.6,1],[1,.4,0,.6,1]]}],
+"#b",[{p:'d',t:[0,1900,2000,2100,5000],v:["path('M5,0C5,2.8,2.8,5,0,5C-2.8,5,-5,2.8,-5,0C-5,-2.8,-2.8,-4.5,0,-4.5C2.8,-4.5,5,-2.8,5,0Z')","path('M5,0C5,2.8,2.8,5,0,5C-2.8,5,-5,2.8,-5,0C-5,-2.8,-2.8,-4.5,0,-4.5C2.8,-4.5,5,-2.8,5,0Z')","path('M5,0C5,2.8,2.8,0,0,0C-2.8,0,-5,2.8,-5,0C-5,-2.8,-2.8,0,0,0C2.8,0,5,-2.8,5,0Z')","path('M5,0C5,2.8,2.8,4.5,0,4.5C-2.8,4.5,-5,2.8,-5,0C-5,-2.8,-2.8,-4.5,0,-4.5C2.8,-4.5,5,-2.8,5,0Z')","path('M5,0C5,2.8,2.8,5,0,5C-2.8,5,-5,2.8,-5,0C-5,-2.8,-2.8,-4.5,0,-4.5C2.8,-4.5,5,-2.8,5,0Z')"],e:[[1,0,0,1,1],[1,0,0,1,1],[0],[0],[0]]}],
+"#c",[{p:'d',t:[0,1900,2000,2100],v:["path('M2,0C2,1.1,1.1,2,0,2C-1.1,2,-2,1.1,-2,0C-2,-1.1,-1.1,-2,0,-2C1.1,-2,2,-1.1,2,0Z')","path('M2,0C2,1.1,1.1,2,0,2C-1.1,2,-2,1.1,-2,0C-2,-1.1,-1.1,-2,0,-2C1.1,-2,2,-1.1,2,0Z')","path('M2,0C2,1.1,1.1,.5,0,.5C-1.1,.5,-2,1.1,-2,0C-2,-1.1,-1.1,.5,0,.5C1.1,.5,2,-1.1,2,0Z')","path('M2,0C2,1.1,1.1,2,0,2C-1.1,2,-2,1.1,-2,0C-2,-1.1,-1.1,-2,0,-2C1.1,-2,2,-1.1,2,0Z')"],e:[[0],[0],[0],[0]]}],
+"#d",[{p:'d',t:[0,1900,2000,2100],v:["path('M5,0C5,2.6,2.8,4.8,0,4.8C-2.8,4.8,-5,2.6,-5,0C-5,-2.6,-2.8,-4.8,0,-4.8C2.8,-4.8,5,-2.6,5,0Z')","path('M5,0C5,2.6,2.8,4.8,0,4.8C-2.8,4.8,-5,2.6,-5,0C-5,-2.6,-2.8,-4.8,0,-4.8C2.8,-4.8,5,-2.6,5,0Z')","path('M5,0C5,2.6,2.8,0,0,0C-2.8,0,-5,2.6,-5,0C-5,-2.6,-2.8,0,0,0C2.8,0,5,-2.6,5,0Z')","path('M5,0C5,2.6,2.8,4.8,0,4.8C-2.8,4.8,-5,2.6,-5,0C-5,-2.6,-2.8,-4.8,0,-4.8C2.8,-4.8,5,-2.6,5,0Z')"],e:[[0],[0],[0],[0]]}],
+"#e",[{p:'mpath',t:[0,1900,2000,2100],v:['0%','0%','0%','0%'],e:[[0],[0],[0],[0]],mp:"M-2.5,-1L-2.5,-1L-2.5,-1L-2.5,-1"},{p:'d',t:[0,1900,2000,2100],v:["path('M2,0C2,1.1,1.1,2,0,2C-1.1,2,-2,1.1,-2,0C-2,-1.1,-1.1,-2,0,-2C1.1,-2,2,-1.1,2,0Z')","path('M2,0C2,1.1,1.1,2,0,2C-1.1,2,-2,1.1,-2,0C-2,-1.1,-1.1,-2,0,-2C1.1,-2,2,-1.1,2,0Z')","path('M2,0C2,1.1,1.1,0,0,0C-1.1,0,-2,1.1,-2,0C-2,-1.1,-1.1,0,0,0C1.1,0,2,-1.1,2,0Z')","path('M2,0C2,1.1,1.1,2,0,2C-1.1,2,-2,1.1,-2,0C-2,-1.1,-1.1,-2,0,-2C1.1,-2,2,-1.1,2,0Z')"],e:[[0],[0],[0],[0]]}],
 {autoremove:false}).range(0,5000).loop(true);
 if(document.location.search.substr(1).split('&').indexOf('global=paused')>=0)ks.globalPause()})(KeyshapeJS);
 ]]></script></svg>
\ No newline at end of file