1478035.html (1757B)
1 <!DOCTYPE html> 2 <html class="reftest-wait"><body> 3 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 966 520"> 4 <defs> 5 <filter id="goo"> 6 <feGaussianBlur in="SourceGraphic" stdDeviation="11" result="blur"></feGaussianBlur> 7 <feColorMatrix in="blur" mode="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 21 -9"></feColorMatrix> 8 <feBlend></feBlend> 9 </filter> 10 <path id="bean" d="M468,146.24c8,4.81,3.39,13.19,10.53,14.61s21.48-.6,21.77,9.12c.23,8-18.6,18.21-38,9.64-12-5.29-16.84-17.93-15.69-25.65C448.27,142.45,460.86,142,468,146.24Z"></path> 11 </defs> 12 <g filter="url(#goo)" clip-path="url(#worldMapMask)" opacity="0.1" fill="#3ac0f0" style="opacity: 0.054;"> 13 <use id="animated" xlink:href="#bean" style="transform-origin: 0px 0px 0px;" transform="matrix(0.40499,0,0,0.40499,281.6573805236819,97.17512744903576)"></use> 14 </g> 15 </svg> 16 17 <script> 18 var animated = document.getElementById('animated'); 19 var transforms = [ 20 'matrix(0.40499,0,0,0.40499,281.65738000000005,97.17513000000001)', 21 'matrix(0,0,0,0,473.36901451812747,163.31791128669738)', 22 'matrix(0.40499,0,0,0.40499,281.65738000000005,97.17513000000001)', 23 'matrix(0,0,0,0,473.36901451812747,163.31791128669738)', 24 'matrix(9,0,0,9,-3786.9947244955442,-1306.5579660936737)', 25 'matrix(0,0,0,0,473.36901451812747,163.31791128669738)', 26 'matrix(3,0,0,3,-946.7522318197632,-326.64071450675965)' 27 ]; 28 var index = 0; 29 function nextFrame() { 30 animated.setAttribute('transform', transforms[index]); 31 index++; 32 if (index < transforms.length) { 33 requestAnimationFrame(nextFrame); 34 } else { 35 document.documentElement.classList.remove('reftest-wait'); 36 } 37 } 38 window.addEventListener('load', nextFrame); 39 </script> 40 </body></html>