! Сегодня

Главная » Web и Технологии » Счастливого Рождества, Текстовая SVG-Анимация

Счастливого Рождества, Текстовая SVG-Анимация

Умей ценить того кто без тебя не может, и не гонись за тем, кто счастлив без тебя!

25-декабря-2023, 21:40   3   0

Счастливого Рождества, Текстовая SVG-Анимация

Анимация текста, в которой появляется парящая  надпись «Счастливого Рождества» на красном фоне. Это действительно здорово, если вы хотите добавить красивое сообщения, связанное с Рождеством, то это именно то что вам нужно. 

HTML

<div class="container">
  <svg class="mainSVG"  xmlns:xlink="http://www.w3.org/1999/xlink" width="600" height="600" viewBox="0 0 600 600"><ellipse id="dot" rx="0" ry="4" cx="300" cy="580" fill="#F3F1E2"/><circle id="splashDot" r="0" cx="300" cy="300" fill="#F3F1E2"/><circle opacity="0" id="splashRing" r="6" cx="300" cy="300" fill="none" stroke="#F3F1E2" stroke-width="12"/><defs><circle id="circ" r="1"/><path id="star" d="M4.55 0l1.4 2.85 3.15.45-2.28 2.22.54 3.13-2.81-1.48-2.81 1.48.53-3.13L0 3.3l3.14-.45z"/><path id="cross" d="M4 3.5L2.5 2 4 .5 3.5 0 2 1.5.5 0 0 .5 1.5 2 0 3.5l.5.5L2 2.5 3.5 4z"/><path id="heart" d="M2.9 0c-.37 0-.7.18-.9.47C1.8.18 1.47 0 1.1 0 .49 0 0 .49 0 1.1 0 2.6 1.56 4 2 4s2-1.4 2-2.9C4 .49 3.51 0 2.9 0z"/><path id="flake1" d="M5 2.1l.46-.19-.08-.71.64-.3-.09-.7.41-.2.25.38-.42.56.4.58-.42.57.3.4.49.06.28-.65.71.06.28-.65.45.03.03.45-.65.28.06.71-.65.27.06.5.4.3.57-.42.58.4.56-.42.38.25-.2.41-.7-.09-.3.64-.71-.08L7.9 5l.19.46.71-.08.3.64.7-.09.2.41-.38.25-.56-.42-.58.4-.57-.42-.4.3-.06.49.65.28-.06.71.65.28-.03.45-.45.03-.28-.65-.71.06-.27-.65-.5.06-.3.4.42.57-.4.58.42.56-.25.38-.41-.2.09-.7-.64-.3.08-.71L5 7.9l-.46.19.08.71-.64.3.09.7-.41.2-.25-.38.42-.56-.4-.58.42-.57-.3-.4-.49-.06-.28.65-.71-.06-.28.65-.45-.03-.03-.45.65-.28-.06-.71.65-.27-.06-.5-.4-.3-.57.42-.58-.4-.56.42L0 6.34l.2-.41.7.09.3-.64.71.08L2.1 5l-.19-.46-.71.08-.3-.64-.7.09-.2-.41.38-.25.56.42.58-.4.57.42.4-.3.06-.49-.65-.28.06-.71-.65-.28.03-.45.45-.03.28.65.71-.06.27.65.5-.06.3-.4-.42-.57.4-.58-.42-.56.25-.38.41.2-.09.7.64.3-.07.73z"/><path id="flake2" d="M5 2.29l1.48-.08L6.36.17 7.5 0l.42 1.07-1.82.92.67 1.32.81 1.24 1.7-1.12.72.9-.72.9-1.7-1.12-.81 1.24-.67 1.32 1.82.92-.42 1.07-1.14-.17.12-2.04L5 6.38l-1.48.07.12 2.04-1.14.17-.42-1.07 1.82-.92-.67-1.32-.81-1.24-1.7 1.12-.72-.9.72-.9 1.7 1.12.81-1.24.67-1.32-1.82-.92L2.5 0l1.14.17-.04 2.12z"/><path id="flake3" d="M5 3.3l.51-.45-.06-.91.71-.57L6.1.46 6.55 0l.09.64-.58.69.23.88-.58.7.15.67.68-.07.48-.76.91-.06.48-.77.64-.1-.3.57-.88.22-.33.84-.88.23-.27.63.58.34.85-.33.76.49.84-.34.58.29-.58.28-.84-.34-.76.49-.85-.33-.58.35.27.62.88.23.32.84.89.23.29.57-.63-.11-.48-.77-.91-.05L6.54 6l-.68-.06-.15.66.58.7-.23.88.58.7-.1.63-.44-.46.06-.9-.71-.58.06-.91L5 6.21l-.51.45.06.91-.71.57.06.91-.45.46-.09-.63.58-.7-.23-.88.58-.7-.15-.66-.68.06-.48.77-.91.05-.48.77-.64.1.3-.56.88-.23.33-.84.88-.23.27-.62-.58-.35-.85.33-.76-.49-.84.34L0 4.75l.58-.28.84.34.76-.49.85.33.58-.35-.27-.62-.88-.22-.32-.85-.89-.22-.29-.57.63.1.48.77.91.05.48.77.68.07.15-.67-.58-.7.23-.88-.58-.69.1-.64.44.46-.06.91.71.57-.06.92z"/><mask id="merryMask"><rect class="merryMask" y="265" fill="#FFF" width="100%" height="60"/></mask></defs><mask id="strokeMask1"/><mask id="strokeMask2"/><mask id="strokeMask3"/><g mask="url(#strokeMask1)" stroke="#F3F1E2"><path id="springStroke1" fill="none" stroke-width="32" stroke-miterlimit="10" d="M295.79 306.05c4.88-40 59.64-50.35 89.11-30.94 28.87 19.02 36.98 66.23 9.7 92.82-28.82 28.09-95.93 25.53-125.28 12.41-45.16-20.19-64.58-75.02-50.54-113.88 24.37-67.46 78.03-82.94 124.6-85.46 81.7-4.41 135.04 48.72 138.78 52.04C533.59 278.71 540.15 305 553.67 340"/></g><g mask="url(#strokeMask2)" stroke="#F3F1E2"><path id="springStroke2" fill="none" stroke-width="32" stroke-miterlimit="10" d="M301 299c-8.88-30.88-22.07-52.82-31.33-66-17.16-24.42-38.97-55.44-76-60.67-18.91-2.67-34.3 2.45-41.33 5.33-31.61 12.96-55.3 47.33-56.67 80-2.14 51.11 51.95 61.79 56.67 122.67.49 6.36 3.73 57.6-30.67 80-26.63 17.34-63.99 9.68-86-7.33C-8.02 419.23-2.38 340.44 33 297.67c44.67-54 125.35-28.28 158-12.67 89.2 42.67 161.66 21.25 242.67-8 55.39-20 122.28 9.4 156 34"/></g><g mask="url(#strokeMask3)" stroke="#F3F1E2"><path id="springStroke3" fill="none" stroke-width="32" stroke-miterlimit="10" d="M467.82 270.07c93.65-33.69 90.62-162.02 89.85-169.4-.22-2.15-.86-8.25-4.67-10 0 0-3.04-1.4-8 1.33-9.43 5.19-9.23 122.41-7.33 222"/></g><g id="merryGroup" fill="#F3F1E2"><path d="M86.61 290.78l-9 16.32c-.6 1.08-1.8 1.8-3.06 1.8-1.32 0-2.46-.72-3.06-1.8l-9-16.32V317c0 1.74-1.5 3.18-3.18 3.18-1.74 0-3.18-1.44-3.18-3.18v-36.6c0-1.92 1.62-3.48 3.48-3.48 1.38 0 2.52.78 3.12 1.86l11.82 21.12 11.82-21.12c.6-1.08 1.86-1.86 3.12-1.86 1.92 0 3.48 1.56 3.48 3.48V317c0 1.74-1.5 3.18-3.24 3.18-1.68 0-3.12-1.44-3.12-3.18v-26.22z"/><path d="M105.03 319.57c-2.04 0-3.9-1.68-3.9-3.84v-34.38c0-2.04 1.74-3.84 3.9-3.84h17.4c1.74 0 3.12 1.38 3.12 3.12 0 1.68-1.38 2.94-3.12 2.94h-14.94v11.16h14.16c1.74 0 3.12 1.32 3.12 3.06 0 1.68-1.38 3-3.12 3h-14.16v12.72h15.36c1.68 0 3.12 1.32 3.12 3 0 1.74-1.44 3.06-3.12 3.06h-17.82z"/><path d="M143.73 301.94h-5.4v15.12c0 1.74-1.5 3.12-3.18 3.12-1.74 0-3.18-1.38-3.18-3.12v-35.7c0-2.1 1.74-3.84 3.9-3.84h11.16c3.54 0 6.6 1.14 8.82 3.36 2.28 2.28 3.48 5.4 3.48 9 0 3.6-1.2 6.66-3.42 8.82-1.44 1.38-3.18 2.28-5.22 2.82l8.34 13.98c.3.48.48 1.08.48 1.62 0 1.56-1.44 3.06-3.12 3.06-1.08 0-2.1-.54-2.64-1.5l-10.02-16.74zm3.3-6.06c2.76 0 5.94-1.14 5.94-6 0-3.6-2.1-6.3-5.94-6.3h-8.7v12.3h8.7z"/><path d="M176.97 301.94h-5.4v15.12c0 1.74-1.5 3.12-3.18 3.12-1.74 0-3.18-1.38-3.18-3.12v-35.7c0-2.1 1.74-3.84 3.9-3.84h11.16c3.54 0 6.6 1.14 8.82 3.36 2.28 2.28 3.48 5.4 3.48 9 0 3.6-1.2 6.66-3.42 8.82-1.44 1.38-3.18 2.28-5.22 2.82l8.34 13.98c.3.48.48 1.08.48 1.62 0 1.56-1.44 3.06-3.12 3.06-1.08 0-2.1-.54-2.64-1.5l-10.02-16.74zm3.3-6.06c2.76 0 5.94-1.14 5.94-6 0-3.6-2.1-6.3-5.94-6.3h-8.7v12.3h8.7z"/><path d="M206.37 301.15l-11.58-19.56c-.3-.48-.42-1.02-.42-1.56 0-1.62 1.32-3.12 3.06-3.12 1.08 0 2.16.54 2.7 1.5l9.36 16.44 9.36-16.44c.54-.96 1.62-1.5 2.7-1.5 1.62 0 3.06 1.38 3.06 3.12 0 .54-.12 1.08-.42 1.56l-11.58 19.56v15.9c0 1.74-1.38 3.12-3.12 3.12-1.74 0-3.12-1.38-3.12-3.12v-15.9z"/><path d="M243.15 292.46c0-9.3 6.24-15.54 15.48-15.54 3.24 0 6.36.96 9.24 2.82.9.6 1.44 1.56 1.44 2.58 0 1.62-1.38 2.94-3.12 2.94-.54 0-1.08-.18-1.62-.48-1.92-1.2-3.9-1.98-5.94-1.98-5.82 0-9.12 3.84-9.12 9.66v12.18c0 5.82 3.3 9.66 9.12 9.66 2.04 0 3.96-.84 5.88-2.04.54-.36 1.14-.54 1.74-.54 1.62 0 3.06 1.26 3.06 3 0 1.02-.54 2.04-1.44 2.64-2.88 1.86-6 2.82-9.24 2.82-9.24 0-15.48-6.24-15.48-15.54v-12.18z"/><path d="M296.97 300.79h-15.6v16.2c0 1.74-1.44 3.18-3.12 3.18-1.74 0-3.24-1.44-3.24-3.18v-36.9c0-1.74 1.44-3.18 3.18-3.18 1.68 0 3.18 1.44 3.18 3.18v14.64h15.6V280.1c0-1.74 1.44-3.18 3.18-3.18 1.74 0 3.18 1.44 3.18 3.18V317c0 1.74-1.38 3.18-3.12 3.18-1.74 0-3.24-1.44-3.24-3.18v-16.21z"/><path d="M323.25 301.94h-5.4v15.12c0 1.74-1.5 3.12-3.18 3.12-1.74 0-3.18-1.38-3.18-3.12v-35.7c0-2.1 1.74-3.84 3.9-3.84h11.16c3.54 0 6.6 1.14 8.82 3.36 2.28 2.28 3.48 5.4 3.48 9 0 3.6-1.2 6.66-3.42 8.82-1.44 1.38-3.18 2.28-5.22 2.82l8.34 13.98c.3.48.48 1.08.48 1.62 0 1.56-1.44 3.06-3.12 3.06-1.08 0-2.1-.54-2.64-1.5l-10.02-16.74zm3.3-6.06c2.76 0 5.94-1.14 5.94-6 0-3.6-2.1-6.3-5.94-6.3h-8.7v12.3h8.7z"/><path d="M344.73 280.1c0-1.74 1.44-3.18 3.18-3.18 1.68 0 3.18 1.44 3.18 3.18V317c0 1.74-1.5 3.18-3.18 3.18-1.74 0-3.18-1.44-3.18-3.18v-36.9z"/><path d="M364.59 298.75c-4.68-2.04-7.08-5.7-7.08-10.38 0-7.14 6.72-11.46 13.56-11.46 3.3 0 6.78.6 9.9 1.98 1.26.54 2.34 1.38 2.34 3.06 0 1.56-1.32 2.88-3 2.88-.36 0-.72-.06-1.14-.24-1.44-.54-3.54-1.8-8.4-1.8-2.94 0-6.84 1.2-6.84 5.28 0 2.82 1.38 4.08 3.78 5.16l6.84 3c4.56 1.98 8.88 4.8 8.88 11.22 0 7.26-5.22 12.72-13.32 12.72-3.54 0-7.62-.96-10.74-2.28-1.14-.48-1.86-1.5-1.86-2.82 0-1.68 1.08-3.06 2.88-3.06.78 0 1.38.18 1.92.42 2.46 1.08 4.98 1.86 7.8 1.86 4.32 0 6.9-2.1 6.9-6.06 0-3-2.52-5.1-5.22-6.3l-7.2-3.18z"/><path d="M397.59 283.58h-8.88c-1.74 0-3.06-1.32-3.06-3 0-1.74 1.32-3.06 3.06-3.06h24.06c1.74 0 3.12 1.32 3.12 3.06 0 1.68-1.38 3-3.12 3h-8.82V317c0 1.74-1.44 3.18-3.18 3.18-1.74 0-3.18-1.44-3.18-3.18v-33.42z"/><path d="M450.21 290.78l-9 16.32c-.6 1.08-1.8 1.8-3.06 1.8-1.32 0-2.46-.72-3.06-1.8l-9-16.32V317c0 1.74-1.5 3.18-3.18 3.18-1.74 0-3.18-1.44-3.18-3.18v-36.6c0-1.92 1.62-3.48 3.48-3.48 1.38 0 2.52.78 3.12 1.86l11.82 21.12 11.82-21.12c.6-1.08 1.86-1.86 3.12-1.86 1.92 0 3.48 1.56 3.48 3.48V317c0 1.74-1.5 3.18-3.24 3.18-1.68 0-3.12-1.44-3.12-3.18v-26.22z"/><path d="M485.55 309.01h-14.76l-3.3 9.12c-.48 1.26-1.62 2.04-2.94 2.04-1.62 0-3.06-1.38-3.06-3.12 0-.36.06-.66.18-1.02l13.2-36.84c.48-1.26 1.8-2.28 3.3-2.28 1.38 0 2.82.96 3.3 2.34l13.2 36.78c.12.3.18.72.18 1.02 0 1.62-1.32 3.12-3.12 3.12-1.26 0-2.46-.78-2.94-2.04l-3.24-9.12zm-7.38-20.57l-5.22 14.52h10.44l-5.22-14.52z"/><path d="M505.41 298.75c-4.68-2.04-7.08-5.7-7.08-10.38 0-7.14 6.72-11.46 13.56-11.46 3.3 0 6.78.6 9.9 1.98 1.26.54 2.34 1.38 2.34 3.06 0 1.56-1.32 2.88-3 2.88-.36 0-.72-.06-1.14-.24-1.44-.54-3.54-1.8-8.4-1.8-2.94 0-6.84 1.2-6.84 5.28 0 2.82 1.38 4.08 3.78 5.16l6.84 3c4.56 1.98 8.88 4.8 8.88 11.22 0 7.26-5.22 12.72-13.32 12.72-3.54 0-7.62-.96-10.74-2.28-1.14-.48-1.86-1.5-1.86-2.82 0-1.68 1.08-3.06 2.88-3.06.78 0 1.38.18 1.92.42 2.46 1.08 4.98 1.86 7.8 1.86 4.32 0 6.9-2.1 6.9-6.06 0-3-2.52-5.1-5.22-6.3l-7.2-3.18z"/></g><g id="particleContainer"/><g id="letterI"><path fill="#F3F1E2" d="M533.19 316.27c0-2.16 1.74-3.9 3.9-3.9 2.1 0 3.84 1.74 3.84 3.9s-1.74 3.9-3.84 3.9c-2.16 0-3.9-1.74-3.9-3.9zm.78-36.23c0-1.74 1.38-3.12 3.12-3.12 1.68 0 3.06 1.38 3.06 3.12v23.76c0 1.68-1.38 3.06-3.06 3.06-1.74 0-3.12-1.38-3.12-3.06v-23.76z"/><use class="endFlake" fill="#F3F1E2" xlink:href="#flake2" x="532" y="313"/><use class="endFlake" fill="#F3F1E2" xlink:href="#flake3" x="532" y="313"/><use class="endFlake" fill="#F3F1E2" xlink:href="#flake3" x="532" y="313"/></g></svg>



</div>


CSS

body {
  background-color:#B51541;
  overflow: hidden;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}
.container{
  position:absolute;
  max-width:100%;
  height:600px;
}

svg{
  max-width:100%;
  visibility:hidden;
   overflow:visible
}


JS

(function(){function f(a,b,d,f){for(var g=h=0;g<a;g++){var c=document.createElementNS("http://www.w3.org/2000/svg","rect");isFirefox?mainSVG.appendChild(c):b.appendChild(c);g>h*p&&h++;c.setAttributeNS(null,"fill",maskValueArr[h]);c.setAttributeNS(null,"width",16);c.setAttributeNS(null,"rx",16);c.setAttributeNS(null,"ry",16);c.setAttributeNS(null,"height",16);TweenMax.set(c,{transformOrigin:"50% 50%",scaleY:1-g/100});var e=new TimelineMax;e.to(c,1.52,{bezier:{type:"cubic",values:d,autoRotate:!0},ease:Linear.easeNone}).to(c,
.1,{alpha:0},"-=0.1");f.add(e,g/200);isFirefox&&b.appendChild(c)}}function d(a,b){return Math.floor(Math.random()*(b-a+1)+a)}select=function(a){return document.querySelector(a)};selectAll=function(a){return document.querySelectorAll(a)};container=select(".container");mainSVG=select(".mainSVG");merryGroup=select("#merryGroup");springStroke1=select("#springStroke1");springStroke2=select("#springStroke2");springStroke3=select("#springStroke3");particleContainer=select("#particleContainer");strokeMask1=
select("#strokeMask1");strokeMask2=select("#strokeMask2");strokeMask3=select("#strokeMask3");allTextMasks=selectAll(".textMask *");maskValueArr="#111 #222 #333 #444 #555 #666 #777 #888 #999 #aaa #bbb #ccc #ddd #eee #FFF".split(" ").reverse();particleColorArray=["#F3F1E2"];particleTypeArray=["#flake1","#flake2","#flake3","#star","#heart"];particlePool=[];particleCount=0;numParticles=512;isFirefox=-1<navigator.userAgent.toLowerCase().indexOf("firefox");TweenMax.set(container,{position:"absolute",top:"50%",
left:"50%",xPercent:-50,yPercent:-50});TweenMax.set("svg",{visibility:"visible"});TweenMax.set(particleContainer,{x:0,y:0});var k=new TimelineMax({paused:!0}),l=new TimelineMax({paused:!0}),m=new TimelineMax({paused:!0}),h,p=Math.round(100/maskValueArr.length),q=MorphSVGPlugin.pathDataToBezier(springStroke1.getAttribute("d"),{offsetX:-8,offsetY:-8}),n=MorphSVGPlugin.pathDataToBezier(springStroke2.getAttribute("d"),{offsetX:-8,offsetY:-8}),r=MorphSVGPlugin.pathDataToBezier(springStroke3.getAttribute("d"),
{offsetX:-8,offsetY:-8}),e=new TimelineMax({repeat:-1,paused:!0});e.to("#dot",.4,{attr:{cy:200,rx:12,ry:12},ease:Power2.easeOut}).to("#dot",.3,{attr:{cy:300},ease:Power2.easeIn}).set("#splashRing",{alpha:1}).to("#dot",1.2,{attr:{rx:76,ry:76},alpha:0,ease:Power1.easeOut}).to("#splashRing",1.2,{attr:{r:50},strokeWidth:0,ease:Power1.easeOut},"-=1.2").to(k,3,{time:2.33,ease:Power2.easeOut},"-=1.2").to(l,3.9,{time:2.33,ease:Power2.easeOut},"-=2.9").staggerFrom("#merryGroup path",.9,{rotation:-95,alpha:0,
transformOrigin:"50% 150%",ease:Elastic.easeOut.config(2,.8)},.036,"-=3.3").to(m,1,{time:2.1,ease:SlowMo.ease.config(.1,.86,!1)},"-=2.9").to(particleContainer,1.4,{bezier:{type:"cubic",values:n,autoRotate:!1},onUpdate:function(a){a=particlePool[particleCount];TweenMax.set(a,{x:particleContainer._gsTransform.x,y:particleContainer._gsTransform.y,scale:d(1,15)/10,transformOrigin:"50% 50%"});(new TimelineMax).to(a,d(3,6),{physics2D:{velocity:d(5,10),angle:0,gravity:d(23,577)},scale:0,rotation:d(180,780),
onStart:function(a){TweenMax.killTweensOf(a,{opacity:!0});TweenMax.fromTo(a,.7,{alpha:1},{alpha:Math.random(),ease:RoughEase.ease.config({template:Power0.easeNone,strength:3,points:6,taper:"both",randomize:!0,clamp:!1}),repeat:-1})},onStartParams:[a]});particleCount++;particleCount=particleCount>=numParticles?0:particleCount},ease:Linear.easeNone},"-=4").from("#letterI",.76,{y:-200,alpha:0,ease:Power4.easeIn},"-=2.7").from("#letterI",1,{rotation:23,transformOrigin:"50% 100%",ease:Elastic.easeOut.config(1,
.3)},"-=2.2").staggerTo(selectAll(".endFlake"),.6,{cycle:{x:[-10,0,10],y:[200,100,300],transformOrigin:["50% 50%","50% 150%"]},alpha:0,rotation:d(200,360),ease:SlowMo.ease.config(.1,.4,!1)},.02,"-=1.95").staggerTo("#merryGroup *",.6,{alpha:0},.05).to("#letterI",.6,{alpha:0},"-=0.6");(function(){for(var a=numParticles,b;-1<--a;)b=document.createElementNS("http://www.w3.org/2000/svg","use"),b.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",particleTypeArray[a%particleTypeArray.length]),mainSVG.appendChild(b),
b.setAttributeNS(null,"fill",particleColorArray[a%particleColorArray.length]),b.setAttributeNS(null,"opacity",0),b.setAttribute("class","particle"),particlePool.push(b)})();f(100,strokeMask1,q,k);f(100,strokeMask2,n,l);f(100,strokeMask3,r,m);e.timeScale(.8);TweenMax.delayedCall(2,function(){e.play()})})();

Также не забудьте подключить скрипты ( можно отдельным файлом)

https://cdnjs.cloudflare.com/ajax/libs/gsap/2.1.2/TweenMax.min.js

И Вот этот этот скрипт с названием MorphSVGPlugin.min.js отдельным файлом

/*!
 * VERSION: 0.9.1
 * DATE: 2019-02-21
 * UPDATES AND DOCS AT: http://greensock.com
 *
 * @license Copyright (c) 2008-2019, GreenSock. All rights reserved.
 * MorphSVGPlugin is a Club GreenSock membership benefit; You must have a valid membership to use
 * this code without violating the terms of use. Visit http://greensock.com/club/ to sign up or get more details.
 * This work is subject to the software agreement that was issued with your membership.
 *
 * @author: Jack Doyle, jack@greensock.com
 */
var _gsScope="undefined"!=typeof module&&module.exports&&"undefined"!=typeof global?global:this||window;(_gsScope._gsQueue||(_gsScope._gsQueue=[])).push(function(){"use strict";function A(e){_gsScope.console&&console.log(e)}function R(e){function t(e,t,r,o){g=(r-e)/3,p=(o-t)/3,s.push(e+g,t+p,r-g,o-p,r,o)}var r,o,n,i,a,h,s,l,f,g,p,c,u,d=(e+"").replace(q,function(e){var t=+e;return t<1e-4&&-1e-4<t?0:t}).match(V)||[],m=[],_=0,C=0,y=d.length,S=0,v="ERROR: malformed path: "+e;if(!e||!isNaN(d[0])||isNaN(d[1]))return A(v),m;for(r=0;r<y;r++)if(u=a,isNaN(d[r])?h=(a=d[r].toUpperCase())!==d[r]:r--,n=+d[r+1],i=+d[r+2],h&&(n+=_,i+=C),r||(l=n,f=i),"M"===a)s&&(s.length<8?--m.length:S+=s.length),_=l=n,C=f=i,s=[n,i],m.push(s),r+=2,a="L";else if("C"===a)h||(_=C=0),(s=s||[0,0]).push(n,i,_+ +d[r+3],C+ +d[r+4],_+=+d[r+5],C+=+d[r+6]),r+=6;else if("S"===a)g=_,p=C,"C"!==u&&"S"!==u||(g+=_-s[s.length-4],p+=C-s[s.length-3]),h||(_=C=0),s.push(g,p,n,i,_+=+d[r+3],C+=+d[r+4]),r+=4;else if("Q"===a)g=_+2/3*(n-_),p=C+2/3*(i-C),h||(_=C=0),_+=+d[r+3],C+=+d[r+4],s.push(g,p,_+2/3*(n-_),C+2/3*(i-C),_,C),r+=4;else if("T"===a)g=_-s[s.length-4],p=C-s[s.length-3],s.push(_+g,C+p,n+2/3*(_+1.5*g-n),i+2/3*(C+1.5*p-i),_=n,C=i),r+=2;else if("H"===a)t(_,C,_=n,C),r+=1;else if("V"===a)t(_,C,_,C=n+(h?C-_:0)),r+=1;else if("L"===a||"Z"===a)"Z"===a&&(n=l,i=f,s.closed=!0),("L"===a||.5<Math.abs(_-n)||.5<Math.abs(C-i))&&(t(_,C,n,i),"L"===a&&(r+=2)),_=n,C=i;else if("A"===a){if(c=function(e,t,r,o,n,i,a,h,s){if(e!==h||t!==s){r=Math.abs(r),o=Math.abs(o);var l=n%360*U,f=Q(l),g=E(l),p=(e-h)/2,c=(t-s)/2,u=f*p+g*c,d=-g*p+f*c,m=u*u,_=d*d,C=m/(r*r)+_/(o*o);1<C&&(r=W(C)*r,o=W(C)*o);var y=r*r,S=o*o,v=(y*S-y*_-S*m)/(y*_+S*m);v<0&&(v=0);var x=(i===a?-1:1)*W(v),w=r*d/o*x,b=-o*u/r*x,M=f*w-g*b+(e+h)/2,T=g*w+f*b+(t+s)/2,N=(u-w)/r,P=(d-b)/o,z=(-u-w)/r,A=(-d-b)/o,R=N*N+P*P,O=(P<0?-1:1)*Math.acos(N/W(R)),L=(N*A-P*z<0?-1:1)*Math.acos((N*z+P*A)/W(R*(z*z+A*A)));isNaN(L)&&(L=H),!a&&0<L?L-=Z:a&&L<0&&(L+=Z),O%=Z,L%=Z;for(var G=Math.ceil(Math.abs(L)/(Z/4)),I=[],F=L/G,Y=4/3*E(F/2)/(1+Q(F/2)),j=f*r,B=g*r,V=g*-o,X=f*o,D=0;D<G;D++)u=Q(n=O+D*F),d=E(n),N=Q(n+=F),P=E(n),I.push(u-Y*d,d+Y*u,N+Y*P,P-Y*N,N,P);for(D=0;D<I.length;D+=2)u=I[D],d=I[D+1],I[D]=u*j+d*V+M,I[D+1]=u*B+d*X+T;return I[D-2]=h,I[D-1]=s,I}}(_,C,+d[r+1],+d[r+2],+d[r+3],+d[r+4],+d[r+5],(h?_:0)+ +d[r+6],(h?C:0)+ +d[r+7]))for(o=0;o<c.length;o++)s.push(c[o]);_=s[s.length-2],C=s[s.length-1],r+=7}else A(v);return(r=s.length)<6?(m.pop(),r=0):s[0]===s[r-2]&&s[1]===s[r-1]&&(s.closed=!0),m.totalPoints=S+r,m}function x(e,t){for(var r,o,n,i,a,h,s,l,f,g,p,c,u,d=0,m=e.length,_=t/((m-2)/6),C=2;C<m;C+=6)for(d+=_;.999999<d;)r=e[C-2],o=e[C-1],n=e[C],i=e[C+1],a=e[C+2],h=e[C+3],s=e[C+4],l=e[C+5],f=r+(n-r)*(u=1/((Math.floor(d)||1)+1)),f+=((p=n+(a-n)*u)-f)*u,p+=(a+(s-a)*u-p)*u,g=o+(i-o)*u,g+=((c=i+(h-i)*u)-g)*u,c+=(h+(l-h)*u-c)*u,e.splice(C,4,r+(n-r)*u,o+(i-o)*u,f,g,f+(p-f)*u,g+(c-g)*u,p,c,a+(s-a)*u,h+(l-h)*u),C+=6,m+=6,d--;return e}function O(e,t){for(var r,o,n="",i=e.length,a=Math.pow(10,t||2),h=0;h<e.length;h++){for(i=(o=e[h]).length,n+="M"+(o[0]*a|0)/a+" "+(o[1]*a|0)/a+" C",r=2;r<i;r++)n+=(o[r]*a|0)/a+" ";o.closed&&(n+="z")}return n}function w(e){for(var t=[],r=e.length-1,o=0;-1<--r;)t[o++]=e[r],t[o++]=e[r+1],r--;for(r=0;r<o;r++)e[r]=t[r];e.reversed=!e.reversed}function b(e){for(var t=e.length,r=0,o=0,n=0;n<t;n++)r+=e[n++],o+=e[n];return[r/(t/2),o/(t/2)]}function M(e){for(var t,r,o=e.length,n=e[0],i=n,a=e[1],h=a,s=6;s<o;s+=6)n<(t=e[s])?n=t:t<i&&(i=t),a<(r=e[s+1])?a=r:r<h&&(h=r);return e.centerX=(n+i)/2,e.centerY=(a+h)/2,e.size=(n-i)*(a-h)}function L(e,t){t=t||3;for(var r,o,n,i,a,h,s,l,f,g,p,c,u,d,m,_,C=e.length,y=e[0][0],S=y,v=e[0][1],x=v,w=1/t;-1<--C;)for(r=(a=e[C]).length,i=6;i<r;i+=6)for(f=a[i],g=a[i+1],p=a[i+2]-f,d=a[i+3]-g,c=a[i+4]-f,m=a[i+5]-g,u=a[i+6]-f,_=a[i+7]-g,h=t;-1<--h;)y<(o=((s=w*h)*s*u+3*(l=1-s)*(s*c+l*p))*s+f)?y=o:o<S&&(S=o),v<(n=(s*s*_+3*l*(s*m+l*d))*s+g)?v=n:n<x&&(x=n);return e.centerX=(y+S)/2,e.centerY=(v+x)/2,e.left=S,e.width=y-S,e.top=x,e.height=v-x,e.size=(y-S)*(v-x)}function T(e,t){return t.length-e.length}function N(e,t){var r=e.size||M(e),o=t.size||M(t);return Math.abs(o-r)<(r+o)/20?t.centerX-e.centerX||t.centerY-e.centerY:o-r}function P(e,t){var r,o,n=e.slice(0),i=e.length,a=i-2;for(t|=0,r=0;r<i;r++)o=(r+t)%a,e[r++]=n[o],e[r]=n[1+o]}function z(e,t,r,o,n){var i,a,h,s,l=e.length,f=0,g=l-2;for(r*=6,a=0;a<l;a+=6)s=e[i=(a+r)%g]-(t[a]-o),h=e[1+i]-(t[a+1]-n),f+=W(h*h+s*s);return f}function G(e,t,r,o,n){var i,a,h,s,l,f,g,p=t.length-e.length,c=0<p?t:e,u=0<p?e:t,d=0,m="complexity"===o?T:N,_="position"===o?0:"number"==typeof o?o:.8,C=u.length,y="object"==typeof r&&r.push?r.slice(0):[r],S="reverse"===y[0]||y[0]<0,v="log"===r;if(u[0]){if(1<c.length&&(e.sort(m),t.sort(m),c.size||L(c),u.size||L(u),f=c.centerX-u.centerX,g=c.centerY-u.centerY,m===N))for(C=0;C<u.length;C++)c.splice(C,0,function(e,t,r,o,n,i){for(var a,h,s,l=t.length,f=0,g=Math.min(e.size||M(e),t[r].size||M(t[r]))*o,p=1e20,c=e.centerX+n,u=e.centerY+i,d=r;d<l&&!((t[d].size||M(t[d]))<g);d++)a=t[d].centerX-c,h=t[d].centerY-u,(s=W(a*a+h*h))<p&&(f=d,p=s);return s=t[f],t.splice(f,1),s}(u[C],c,C,_,f,g));if(p)for(p<0&&(p=-p),c[0].length>u[0].length&&x(u[0],(c[0].length-u[0].length)/6|0),C=u.length;d<p;)c[C].size||M(c[C]),s=(h=function(e,t,r){for(var o,n,i,a,h,s,l=e.length,f=1e20,g=0,p=0;-1<--l;)for(s=(o=e[l]).length,h=0;h<s;h+=6)n=o[h]-t,i=o[h+1]-r,(a=W(n*n+i*i))<f&&(f=a,g=o[h],p=o[h+1]);return[g,p]}(u,c[C].centerX,c[C].centerY))[0],l=h[1],u[C++]=[s,l,s,l,s,l,s,l],u.totalPoints+=8,d++;for(C=0;C<e.length;C++)i=t[C],a=e[C],(p=i.length-a.length)<0?x(i,-p/6|0):0<p&&x(a,p/6|0),S&&!1!==n&&!a.reversed&&w(a),(r=y[C]||0===y[C]?y[C]:"auto")&&(a.closed||Math.abs(a[0]-a[a.length-2])<.5&&Math.abs(a[1]-a[a.length-1])<.5?"auto"===r||"log"===r?(y[C]=r=function(e,t,r){for(var o,n,i=e.length,a=b(e),h=b(t),s=h[0]-a[0],l=h[1]-a[1],f=z(e,t,0,s,l),g=0,p=6;p<i;p+=6)(n=z(e,t,p/6,s,l))<f&&(f=n,g=p);if(r)for(o=e.slice(0),w(o),p=6;p<i;p+=6)(n=z(o,t,p/6,s,l))<f&&(f=n,g=-p);return g/6}(a,i,!C||!1===n),r<0&&(S=!0,w(a),r=-r),P(a,6*r)):"reverse"!==r&&(C&&r<0&&w(a),P(a,6*(r<0?-r:r))):!S&&("auto"===r&&Math.abs(i[0]-a[0])+Math.abs(i[1]-a[1])+Math.abs(i[i.length-2]-a[a.length-2])+Math.abs(i[i.length-1]-a[a.length-1])>Math.abs(i[0]-a[a.length-2])+Math.abs(i[1]-a[a.length-1])+Math.abs(i[i.length-2]-a[0])+Math.abs(i[i.length-1]-a[1])||r%2)?(w(a),y[C]=-1,S=!0):"auto"===r?y[C]=0:"reverse"===r&&(y[C]=-1),a.closed!==i.closed&&(a.closed=i.closed=!1));return v&&A("shapeIndex:["+y.join(",")+"]"),e.shapeIndex=y}}function n(e,t){for(var r,o,n,i,a=0,h=parseFloat(e[0]),s=parseFloat(e[1]),l=h+","+s+" ",f=e.length,g=.5*t/(.5*f-1),p=0;p<f-2;p+=2){if(a+=g,n=parseFloat(e[p+2]),i=parseFloat(e[p+3]),.999999<a)for(o=1/(Math.floor(a)+1),r=1;.999999<a;)l+=(h+(n-h)*o*r).toFixed(2)+","+(s+(i-s)*o*r).toFixed(2)+" ",a--,r++;l+=n+","+i+" ",h=n,s=i}return l}function r(e){var t=e[0].match(X)||[],r=e[1].match(X)||[],o=r.length-t.length;0<o?e[0]=n(t,o):e[1]=n(r,-o)}function I(t){return isNaN(t)?r:function(e){r(e),e[1]=function(e,t){if(!t)return e;for(var r,o=e.match(X)||[],n=o.length,i="",a="reverse"===t?(r=n-1,-2):(r=(2*(parseInt(t,10)||0)+1+100*n)%n,2),h=0;h<n;h+=2)i+=o[r-1]+","+o[r]+" ",r=(r+a)%n;return i}(e[1],parseInt(t,10))}}function a(e,t){var r,o,n,i,a,h,s,l,f,g,p,c,u,d,m,_,C,y,S,v,x,w,b=e.tagName.toLowerCase(),M=.552284749831;return"path"!==b&&e.getBBox?(h=function(e,t){var r,o=_gsScope.document.createElementNS("http://www.w3.org/2000/svg","path"),n=Array.prototype.slice.call(e.attributes),i=n.length;for(t=","+t+",";-1<--i;)r=n[i].nodeName.toLowerCase(),-1===t.indexOf(","+r+",")&&o.setAttributeNS(null,r,n[i].nodeValue);return o}(e,"x,y,width,height,cx,cy,rx,ry,r,x1,x2,y1,y2,points"),w=function(e,t){for(var r=t?t.split(","):[],o={},n=r.length;-1<--n;)o[r[n]]=+e.getAttribute(r[n])||0;return o}(e,ee[b]),"rect"===b?(i=w.rx,a=w.ry,o=w.x,n=w.y,g=w.width-2*i,p=w.height-2*a,r=i||a?"M"+(_=(d=(u=o+i)+g)+i)+","+(y=n+a)+" V"+(S=y+p)+" C"+[_,v=S+a*M,m=d+i*M,x=S+a,d,x,d-(d-u)/3,x,u+(d-u)/3,x,u,x,c=o+i*(1-M),x,o,v,o,S,o,S-(S-y)/3,o,y+(S-y)/3,o,y,o,C=n+a*(1-M),c,n,u,n,u+(d-u)/3,n,d-(d-u)/3,n,d,n,m,n,_,C,_,y].join(",")+"z":"M"+(o+g)+","+n+" v"+p+" h"+-g+" v"+-p+" h"+g+"z"):"circle"===b||"ellipse"===b?(l="circle"===b?(i=a=w.r)*M:(i=w.rx,(a=w.ry)*M),r="M"+((o=w.cx)+i)+","+(n=w.cy)+" C"+[o+i,n+l,o+(s=i*M),n+a,o,n+a,o-s,n+a,o-i,n+l,o-i,n,o-i,n-l,o-s,n-a,o,n-a,o+s,n-a,o+i,n-l,o+i,n].join(",")+"z"):"line"===b?r="M"+w.x1+","+w.y1+" L"+w.x2+","+w.y2:"polyline"!==b&&"polygon"!==b||(r="M"+(o=(f=(e.getAttribute("points")+"").match(X)||[]).shift())+","+(n=f.shift())+" L"+f.join(","),"polygon"===b&&(r+=","+o+","+n+"z")),h.setAttribute("d",O(h._gsRawPath=R(r))),t&&e.parentNode&&(e.parentNode.insertBefore(h,e),e.parentNode.removeChild(e)),h):e}function F(e,t,r){var o,n,i="string"==typeof e;return(!i||h.test(e)||(e.match(X)||[]).length<3)&&((o=i?p.selector(e):e&&e[0]?e:[e])&&o[0]?(n=((o=o[0]).nodeName+"").toUpperCase(),t&&"PATH"!==n&&(o=a(o,!1),n="PATH"),e=o.getAttribute("PATH"===n?"d":"points")||"",o===r&&(e=o.getAttributeNS(null,"data-original")||e)):(A("WARNING: invalid morph to: "+e),e=!1)),e}function Y(e,t){for(var r,o,n,i,a,h,s,l,f,g,p,c,u=e.length,d=.2*(t||1);-1<--u;){for(p=(o=e[u]).isSmooth=o.isSmooth||[0,0,0,0],c=o.smoothData=o.smoothData||[0,0,0,0],p.length=4,l=o.length-2,s=6;s<l;s+=6)n=o[s]-o[s-2],i=o[s+1]-o[s-1],a=o[s+2]-o[s],h=o[s+3]-o[s+1],f=y(i,n),g=y(h,a),(r=Math.abs(f-g)<d)&&(c[s-2]=f,c[s+2]=g,c[s-1]=W(n*n+i*i),c[s+3]=W(a*a+h*h)),p.push(r,r,0,0,r,r);o[l]===o[0]&&o[1+l]===o[1]&&(n=o[0]-o[l-2],i=o[1]-o[l-1],a=o[2]-o[0],h=o[3]-o[1],f=y(i,n),g=y(h,a),Math.abs(f-g)<d&&(c[l-2]=f,c[2]=g,c[l-1]=W(n*n+i*i),c[3]=W(a*a+h*h),p[l-2]=p[l-1]=!0))}return e}function j(e){var t=e.trim().split(" ");return{x:(0<=e.indexOf("left")?0:0<=e.indexOf("right")?100:isNaN(parseFloat(t[0]))?50:parseFloat(t[0]))/100,y:(0<=e.indexOf("top")?0:0<=e.indexOf("bottom")?100:isNaN(parseFloat(t[1]))?50:parseFloat(t[1]))/100}}var B,H=Math.PI,U=H/180,V=/[achlmqstvz]|(-?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi,X=/(?:(-|-=|\+=)?\d*\.?\d*(?:e[\-+]?\d+)?)[0-9]/gi,h=/(^[#\.][a-z]|[a-y][a-z])/gi,D=/[achlmqstvz]/gi,q=/[\+\-]?\d*\.?\d+e[\+\-]?\d+/gi,y=Math.atan2,Q=Math.cos,E=Math.sin,W=Math.sqrt,Z=2*H,c=.3*H,u=.7*H,p=_gsScope._gsDefine.globals.TweenLite,k="MorphSVGPlugin",J=String.fromCharCode(103,114,101,101,110,115,111,99,107,46,99,111,109),K=String.fromCharCode(47,114,101,113,117,105,114,101,115,45,109,101,109,98,101,114,115,104,105,112,47),$=function(e){for(var t=-1!==(window?window.location.href:"").indexOf(String.fromCharCode(103,114,101,101,110,115,111,99,107))&&-1!==e.indexOf(String.fromCharCode(108,111,99,97,108,104,111,115,116)),r=[J,String.fromCharCode(99,111,100,101,112,101,110,46,105,111),String.fromCharCode(99,111,100,101,112,101,110,46,112,108,117,109,98,105,110,103),String.fromCharCode(99,111,100,101,112,101,110,46,100,101,118),String.fromCharCode(99,111,100,101,112,101,110,46,97,112,112),String.fromCharCode(112,101,110,115,46,99,108,111,117,100),String.fromCharCode(112,101,110,115,46,105,111),String.fromCharCode(109,111,116,105,111,110,116,114,105,99,107,115,46,99,111,109),String.fromCharCode(99,115,115,45,116,114,105,99,107,115,46,99,111,109),String.fromCharCode(99,100,112,110,46,105,111),String.fromCharCode(103,97,110,110,111,110,46,116,118),String.fromCharCode(99,111,100,101,99,97,110,121,111,110,46,110,101,116),String.fromCharCode(116,104,101,109,101,102,111,114,101,115,116,46,110,101,116),String.fromCharCode(99,101,114,101,98,114,97,120,46,99,111,46,117,107),String.fromCharCode(116,121,109,112,97,110,117,115,46,110,101,116),String.fromCharCode(116,119,101,101,110,109,97,120,46,99,111,109),String.fromCharCode(116,119,101,101,110,108,105,116,101,46,99,111,109),String.fromCharCode(112,108,110,107,114,46,99,111),String.fromCharCode(104,111,116,106,97,114,46,99,111,109),String.fromCharCode(119,101,98,112,97,99,107,98,105,110,46,99,111,109),String.fromCharCode(97,114,99,104,105,118,101,46,111,114,103),String.fromCharCode(99,111,100,101,115,97,110,100,98,111,120,46,105,111),String.fromCharCode(115,116,97,99,107,98,108,105,116,122,46,99,111,109),String.fromCharCode(99,111,100,105,101,114,46,105,111),String.fromCharCode(106,115,102,105,100,100,108,101,46,110,101,116)],o=r.length;-1<--o;)if(-1!==e.indexOf(r[o]))return!0;return t&&window&&window.console&&console.log(String.fromCharCode(87,65,82,78,73,78,71,58,32,97,32,115,112,101,99,105,97,108,32,118,101,114,115,105,111,110,32,111,102,32)+k+String.fromCharCode(32,105,115,32,114,117,110,110,105,110,103,32,108,111,99,97,108,108,121,44,32,98,117,116,32,105,116,32,119,105,108,108,32,110,111,116,32,119,111,114,107,32,111,110,32,97,32,108,105,118,101,32,100,111,109,97,105,110,32,98,101,99,97,117,115,101,32,105,116,32,105,115,32,97,32,109,101,109,98,101,114,115,104,105,112,32,98,101,110,101,102,105,116,32,111,102,32,67,108,117,98,32,71,114,101,101,110,83,111,99,107,46,32,80,108,101,97,115,101,32,115,105,103,110,32,117,112,32,97,116,32,104,116,116,112,58,47,47,103,114,101,101,110,115,111,99,107,46,99,111,109,47,99,108,117,98,47,32,97,110,100,32,116,104,101,110,32,100,111,119,110,108,111,97,100,32,116,104,101,32,39,114,101,97,108,39,32,118,101,114,115,105,111,110,32,102,114,111,109,32,121,111,117,114,32,71,114,101,101,110,83,111,99,107,32,97,99,99,111,117,110,116,32,119,104,105,99,104,32,104,97,115,32,110,111,32,115,117,99,104,32,108,105,109,105,116,97,116,105,111,110,115,46,32,84,104,101,32,102,105,108,101,32,121,111,117,39,114,101,32,117,115,105,110,103,32,119,97,115,32,108,105,107,101,108,121,32,100,111,119,110,108,111,97,100,101,100,32,102,114,111,109,32,101,108,115,101,119,104,101,114,101,32,111,110,32,116,104,101,32,119,101,98,32,97,110,100,32,105,115,32,114,101,115,116,114,105,99,116,101,100,32,116,111,32,108,111,99,97,108,32,117,115,101,32,111,114,32,111,110,32,115,105,116,101,115,32,108,105,107,101,32,99,111,100,101,112,101,110,46,105,111,46)),t}(window?window.location.host:""),ee={rect:"rx,ry,x,y,width,height",circle:"r,cx,cy",ellipse:"rx,ry,cx,cy",line:"x1,x2,y1,y2"},te="Use MorphSVGPlugin.convertToPath(elementOrSelectorText) to convert to a path before morphing.",re=_gsScope._gsDefine.plugin({propName:"morphSVG",API:2,global:!0,version:"0.9.2",overwriteProps:["morphSVG"],init:function(e,t,r,o){var n,i,a,h,s,l,f,g,p,c,u,d,m,_,C,y,S,v,x,w,b,M,T=e.nodeType?window.getComputedStyle(e):{},N=T.fill+"",P=!("none"===N||"0"===(N.match(X)||[])[3]||"evenodd"===T.fillRule),z=(t.origin||"50 50").split(",");if("function"==typeof t&&(t=t(o,e)),!$)return window.location.href="http://"+J+K+"?plugin="+k+"&source=codepen",!1;if(s="POLYLINE"===(n=(e.nodeName+"").toUpperCase())||"POLYGON"===n,"PATH"!==n&&!s&&!t.prop)return A("WARNING: cannot morph a <"+n+"> element. "+te),!1;if(i="PATH"===n?"d":"points",("string"==typeof t||t.getBBox||t[0])&&(t={shape:t}),!t.prop&&"function"!=typeof e.setAttribute)return!1;if(h=F(t.shape||t.d||t.points||"","d"==i,e),s&&D.test(h))return A("WARNING: a <"+n+"> cannot accept path data. "+te),!1;if(l=t.shapeIndex||0===t.shapeIndex?t.shapeIndex:"auto",f=t.map||re.defaultMap,this._prop=t.prop,this._render=t.render||re.defaultRender,this._apply="updateTarget"in t?t.updateTarget:re.defaultUpdateTarget,this._rnd=Math.pow(10,isNaN(t.precision)?2:+t.precision),this._tween=r,h){if(this._target=e,S="object"==typeof t.precompile,c=this._prop?e[this._prop]:e.getAttribute(i),this._prop||e.getAttributeNS(null,"data-original")||e.setAttributeNS(null,"data-original",c),"d"==i||this._prop){if(c=R(S?t.precompile[0]:c),u=R(S?t.precompile[1]:h),!S&&!G(c,u,l,f,P))return!1;for("log"!==t.precompile&&!0!==t.precompile||A('precompile:["'+O(c)+'","'+O(u)+'"]'),(b="linear"!==(t.type||re.defaultType))&&(c=Y(c,t.smoothTolerance),u=Y(u,t.smoothTolerance),c.size||L(c),u.size||L(u),w=j(z[0]),this._origin=c.origin={x:c.left+w.x*c.width,y:c.top+w.y*c.height},z[1]&&(w=j(z[1])),this._eOrigin={x:u.left+w.x*u.width,y:u.top+w.y*u.height}),m=(this._rawPath=e._gsRawPath=c).length;-1<--m;)for(C=c[m],y=u[m],g=C.isSmooth||[],p=y.isSmooth||[],_=C.length,d=B=0;d<_;d+=2)y[d]===C[d]&&y[d+1]===C[d+1]||(b?g[d]&&p[d]?(v=C.smoothData,x=y.smoothData,M=d+(d===_-4?7-_:5),this._controlPT={_next:this._controlPT,i:d,j:m,l1s:v[d+1],l1c:x[d+1]-v[d+1],l2s:v[M],l2c:x[M]-v[M]},a=this._tweenRotation(C,y,d+2),this._tweenRotation(C,y,d,a),this._tweenRotation(C,y,M-1,a),d+=4):this._tweenRotation(C,y,d):(a=this._addTween(C,d,C[d],y[d]),a=this._addTween(C,d+1,C[d+1],y[d+1])||a))}else a=this._addTween(e,"setAttribute",e.getAttribute(i)+"",h+"","morphSVG",!1,i,I(l));b&&(this._addTween(this._origin,"x",this._origin.x,this._eOrigin.x),a=this._addTween(this._origin,"y",this._origin.y,this._eOrigin.y)),a&&(this._overwriteProps.push("morphSVG"),a.end=h,a.endProp=i)}return $},set:function(e){var t,r,o,n,i,a,h,s,l,f,g,p,c,u=this._rawPath,d=this._controlPT,m=this._anchorPT,_=this._rnd,C=this._target;if(this._super.setRatio.call(this,e),1===e&&this._apply)for(o=this._firstPT;o;)o.end&&(this._prop?C[this._prop]=o.end:C.setAttribute(o.endProp,o.end)),o=o._next;else if(u){for(;m;)a=m.sa+e*m.ca,i=m.sl+e*m.cl,m.t[m.i]=this._origin.x+Q(a)*i,m.t[m.i+1]=this._origin.y+E(a)*i,m=m._next;for(r=e<.5?2*e*e:(4-2*e)*e-1;d;)c=(h=d.i)+(h===(n=u[d.j]).length-4?7-n.length:5),a=y(n[c]-n[h+1],n[c-1]-n[h]),g=E(a),p=Q(a),l=n[h+2],f=n[h+3],i=d.l1s+r*d.l1c,n[h]=l-p*i,n[h+1]=f-g*i,i=d.l2s+r*d.l2c,n[c-1]=l+p*i,n[c]=f+g*i,d=d._next;if(C._gsRawPath=u,this._apply){for(t="",s=0;s<u.length;s++)for(i=(n=u[s]).length,t+="M"+(n[0]*_|0)/_+" "+(n[1]*_|0)/_+" C",h=2;h<i;h++)t+=(n[h]*_|0)/_+" ";this._prop?C[this._prop]=t:C.setAttribute("d",t)}}this._render&&u&&this._render.call(this._tween,u,C)}});re.prototype._tweenRotation=function(e,t,r,o){var n,i=this._origin,a=this._eOrigin,h=e[r]-i.x,s=e[r+1]-i.y,l=W(h*h+s*s),f=y(s,h),h=t[r]-a.x,s=t[r+1]-a.y,g=y(s,h)-f,p=(n=g)!==n%H?n+(n<0?Z:-Z):n;return!o&&B&&Math.abs(p+B.ca)<c&&(o=B),this._anchorPT=B={_next:this._anchorPT,t:e,sa:f,ca:o&&p*o.ca<0&&Math.abs(p)>u?g:p,sl:l,cl:W(h*h+s*s)-l,i:r}},re.pathFilter=function(e,t,r,o,n){var i=R(e[0]),a=R(e[1]);G(i,a,t||0===t?t:"auto",r,n)&&(e[0]=O(i),e[1]=O(a),"log"!==o&&!0!==o||A('precompile:["'+e[0]+'","'+e[1]+'"]'))},re.pointsFilter=r,re.getTotalSize=L,re.subdivideRawBezier=re.subdivideSegment=x,re.rawPathToString=O,re.defaultType="linear",re.defaultUpdateTarget=!0,re.defaultMap="size",re.stringToRawPath=re.pathDataToRawBezier=function(e){return R(F(e,!0))},re.equalizeSegmentQuantity=G,re.convertToPath=function(e,t){"string"==typeof e&&(e=p.selector(e));for(var r=e&&0!==e.length?e.length&&e[0]&&e[0].nodeType?Array.prototype.slice.call(e,0):[e]:[],o=r.length;-1<--o;)r[o]=a(r[o],!1!==t);return r},re.pathDataToBezier=function(e,t){var r,o,n,i,a=R(F(e,!0))[0]||[],h=0,s=(t=t||{}).align||t.relative,l=t.matrix||[1,0,0,1,0,0],f=t.offsetX||0,g=t.offsetY||0;if("relative"===s||!0===s?(f-=a[0]*l[0]+a[1]*l[2],g-=a[0]*l[1]+a[1]*l[3],h="+="):(f+=l[4],g+=l[5],(s=s&&("string"==typeof s?p.selector(s):s&&s[0]?s:[s]))&&s[0]&&(f-=(i=s[0].getBBox()||{x:0,y:0}).x,g-=i.y)),r=[],n=a.length,l&&"1,0,0,1,0,0"!==l.join(","))for(o=0;o<n;o+=2)r.push({x:h+(a[o]*l[0]+a[o+1]*l[2]+f),y:h+(a[o]*l[1]+a[o+1]*l[3]+g)});else for(o=0;o<n;o+=2)r.push({x:h+(a[o]+f),y:h+(a[o+1]+g)});return r}}),_gsScope._gsDefine&&_gsScope._gsQueue.pop()(),function(){"use strict";function e(){return(_gsScope.GreenSockGlobals||_gsScope).MorphSVGPlugin}"undefined"!=typeof module&&module.exports?(require("../TweenLite.js"),module.exports=e()):"function"==typeof define&&define.amd&&define(["TweenLite"],e)}();

+2

Поделиться

Tags

  • bowtiesmilelaughingblushsmileyrelaxedsmirk
    heart_eyeskissing_heartkissing_closed_eyesflushedrelievedsatisfiedgrin
    winkstuck_out_tongue_winking_eyestuck_out_tongue_closed_eyesgrinningkissingstuck_out_tonguesleeping
    worriedfrowninganguishedopen_mouthgrimacingconfusedhushed
    expressionlessunamusedsweat_smilesweatdisappointed_relievedwearypensive
    disappointedconfoundedfearfulcold_sweatperseverecrysob
    joyastonishedscreamtired_faceangryragetriumph
    sleepyyummasksunglassesdizzy_faceimpsmiling_imp
    neutral_faceno_mouthinnocent
Спутник земли ?

Редакторы выбирают

Web и Технологии