Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using it's URL and the proper URL extention.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <svg id="demo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1500 1000">
  <title>CustomWiggle Demo</title>
  <g style="isolation: isolate">
    <g id="Layer_1" data-name="Layer 1">
      <rect id="background" width="1500" height="1000" fill="#333"/>
      <rect width="750" height="500" fill="#8cc63f"/>
      <rect x="750" width="750" height="500" fill="#2a88bc"/>
      <rect x="750" y="500" width="750" height="500" fill="#1a1a1a"/>
      <rect y="500" width="750" height="500" fill="#c1b3a4"/>
      <g id="bottomHand">
        <path d="M1177.95,188.21" fill="#f8c192"/>
        <path d="M1095.26,255.27l-56.28-13a12.1,12.1,0,0,1-6.56-4,11.62,11.62,0,0,1-2.55-5.36,7.94,7.94,0,0,1,3.06-7.74,9,9,0,0,1,7.69-1.73l46.53,10.74c.61.14,1.09-.31,1.06-1v-.31a1.67,1.67,0,0,0-1.16-1.53l-60.72-14a12.44,12.44,0,0,1-6.74-4.11,12,12,0,0,1-2.58-5.3,7.87,7.87,0,0,1,0-2.52,8.66,8.66,0,0,1,3.12-5.18,9.12,9.12,0,0,1,7.78-1.75l58.81,13.34a1,1,0,0,0,1.18-1.07,1.5,1.5,0,0,0-1.07-1.49l-62.65-14.46a9.83,9.83,0,0,1-5.33-3.25,9.43,9.43,0,0,1-2.23-5.73l-.07-1.69a7.81,7.81,0,0,1,2.94-6.42,8.23,8.23,0,0,1,7-1.58l68.38,15.79c.61.14,1.09-.31,1.06-1v-.31a1.67,1.67,0,0,0-1.16-1.53l-52.53-12.13a10.17,10.17,0,0,1-6.29-4.41,9.67,9.67,0,0,1-1.54-5.65,8.33,8.33,0,0,1,.57-2.47,9.78,9.78,0,0,1,3.91-4.46,10.27,10.27,0,0,1,7.67-1.22l92.81,21.43a4,4,0,0,0,4.12-1.51,3.79,3.79,0,0,0,.6-3.19,5.07,5.07,0,0,0-1.33-1.94c-.61-.58-1.52-1.41-2.64-2.33a13.42,13.42,0,0,0-1.93-1.26A60.19,60.19,0,0,1,1114,146.05l-.23-.4a10.21,10.21,0,0,1-1-7.48c1.22-5.31,6.05-8.72,10.78-7.63a8.27,8.27,0,0,1,5.3,4c.33.58.81,1.56,1.16,2.13a41.73,41.73,0,0,0,24.91,18.81,6.32,6.32,0,0,1,2,1c2.44,2,2.81,3.17,4.68,6.08l6.84,10.71,1.2,1.88c2.19,4,4.81,7.91,7,12.37,2.12,4.77,1,10.77,5.43,13.62a9.13,9.13,0,0,0,1.62,1,8.75,8.75,0,0,0,1.76.61l40.34,9.31-14.24,61.69-23-5.32-1.87-.43c-10.12-2.53-20.06-6.47-30.53-.88q-1.24.18-2.47.24a37.23,37.23,0,0,1-12.48-1.67l-2.06-.46C1120.92,261.17,1095.26,255.27,1095.26,255.27Z" fill="#f8c192"/>
        <path d="M1201.51,271.45l14.39-62.32a1.52,1.52,0,0,0-1-1.88l-24.76-5.72a1.52,1.52,0,0,0-1.75,1.24L1174,265.09a1.52,1.52,0,0,0,1,1.88l24.76,5.72A1.52,1.52,0,0,0,1201.51,271.45Z" fill="#f5f5f5"/>
        <path d="M1174,265.09l7.27-31.47,27.55,6.36-7.27,31.47a1.52,1.52,0,0,1-1.75,1.24L1175,267A1.52,1.52,0,0,1,1174,265.09Z" fill="#ededed" style="mix-blend-mode: multiply"/>
        <path d="M1181.53,274.86a1.59,1.59,0,0,1-1.18-1.92l17.33-75.05a1.59,1.59,0,0,1,1.9-1.21l28.23,6.52-18,78.17Z" fill="#545454"/>
        <path d="M1181.53,274.86a1.59,1.59,0,0,1-1.18-1.92l8.66-37.53,29.77,6.87-9,39.09Z" fill="#545454" opacity="0.18" style="mix-blend-mode: multiply"/>
        <path d="M1087.83,210.74a1.53,1.53,0,0,0-.87-1.43l-1,2.34.7.16A1,1,0,0,0,1087.83,210.74Z" fill="none"/>
        <path d="M1016.5,183.37c0,.25,0,.5,0,.75l.07,1.69a9.43,9.43,0,0,0,2.23,5.73,9.83,9.83,0,0,0,5.33,3.25l62.65,14.46.19.07a14.39,14.39,0,0,0,4.2-9.81Z" fill="#f8c192" opacity="0.5" style="mix-blend-mode: multiply"/>
        <path d="M1034.48,165.93a6.5,6.5,0,0,0-.12.94,9.67,9.67,0,0,0,1.54,5.65,10.17,10.17,0,0,0,6.29,4.41l52.53,12.13h0a12,12,0,0,0,3.62-9Z" fill="#f8c192" opacity="0.5" style="mix-blend-mode: multiply"/>
        <path d="M1016.87,206.76a7.24,7.24,0,0,0,.12,1.16,12,12,0,0,0,2.58,5.3,12.44,12.44,0,0,0,6.74,4.11l60.72,14a1.24,1.24,0,0,1,.39.18l3.26-8.52Z" fill="#f8c192" opacity="0.5" style="mix-blend-mode: multiply"/>
        <path d="M1029.79,230.68a8.9,8.9,0,0,0,.08,2.24,11.62,11.62,0,0,0,2.55,5.36,12.1,12.1,0,0,0,6.56,4l43.08,9.95a16.73,16.73,0,0,0,2.53-9.6Z" fill="#f8c192" opacity="0.5" style="mix-blend-mode: multiply"/>
        <path d="M1163.17,246.11a.78.78,0,0,0-.86-.09L1152,253.77c-3.89,3.21-8.38,4.09-13.56,4.44-4.82.32-9.61-.74-14.12-1.53l-40.68-7.86a18,18,0,0,1-1.62,3.41l13.2,3s25.66,5.9,43.83,10l2.06.46a37.23,37.23,0,0,0,12.48,1.67q1.23-.07,2.47-.24c.51-.27,1-.51,1.52-.74l5.81-19.46A.78.78,0,0,0,1163.17,246.11Z" fill="#e3b186" opacity="0.46" style="mix-blend-mode: multiply"/>
        <path d="M1112,183.3l-13.07,60.33,2.77-3.9a19.22,19.22,0,0,0,2.13-4.17,39.71,39.71,0,0,0,1.68-5.69l5.59-25.38a66.89,66.89,0,0,0,1.47-10.9,43.78,43.78,0,0,0-.45-9.56Z" fill="#f8c192" opacity="0.5" style="mix-blend-mode: multiply"/>
        <path d="M1125.45,135.27c1.88,5,5.2,8.39,7.42,7.56a2.17,2.17,0,0,0,1-.77,45.68,45.68,0,0,1-3.88-5.36c-.35-.57-.83-1.55-1.16-2.13a8.36,8.36,0,0,0-4.48-3.79A20,20,0,0,0,1125.45,135.27Z" fill="#e8d9cb"/>
        <path d="M1160.44,182.6l-1.2-1.88L1152.4,170c-1.87-2.91-2.24-4.1-4.68-6.08a6.33,6.33,0,0,0-2-1,41.73,41.73,0,0,1-24.91-18.81c-.35-.57-.83-1.55-1.16-2.13-.75-1.3-2.59-5.62-4.42-8.63a10.49,10.49,0,0,0-1.47,12.28l.23.4a60.19,60.19,0,0,0,24.16,23.86,13.42,13.42,0,0,1,1.93,1.26c1.11.92,2,1.75,2.64,2.33a5.07,5.07,0,0,1,1.33,1.94,3.79,3.79,0,0,1-.6,3.19,4,4,0,0,1-4.12,1.51l-8.23-1.9c-2.05,8.66-4.89,31,16.29,43.18l21.41,6.08a.83.83,0,0,0,1-.55l4.95-16a1.51,1.51,0,0,0-.72-1.71,10.75,10.75,0,0,1-1.14-.69c-4.4-2.86-3.31-8.86-5.43-13.62C1165.25,190.52,1162.63,186.62,1160.44,182.6Z" fill="#f8c192" opacity="0.5" style="mix-blend-mode: multiply"/>
      </g>
      <g id="topHand">
        <g>
          <path d="M1040.7,173.74a10.4,10.4,0,0,0-6.6-6.25,9.18,9.18,0,0,0-9.38,2,13.4,13.4,0,0,0-3.49,5.89c-.12.43-.22.86-.3,1.29l8.73,2a1.93,1.93,0,0,1,1.34,1.76v.36c0,.81-.52,1.33-1.23,1.17l-9.08-2.1a14.1,14.1,0,0,0,.91,4.36l7.54,19.74,10,2.3,15.34,3.52Z" fill="#999" opacity="0.77" style="mix-blend-mode: multiply"/>
          <path d="M1166.62,188.11a14.38,14.38,0,0,0-6.37,5.15,14.87,14.87,0,0,0-1.17,2.07l-.27.59a94,94,0,0,0-8.82,36.33l21.88,5.44,9.79-45.67A12.42,12.42,0,0,0,1166.62,188.11Z" fill="#999" opacity="0.33" style="mix-blend-mode: multiply"/>
          <path d="M1092.06,218.36a42.93,42.93,0,0,0,14.38,1.92q1.42-.08,2.84-.28c9.66-5.16,18.93-3.28,28.23-.83l-31.09-81.42a11.84,11.84,0,0,0-6.1-6.56,11.26,11.26,0,0,0-6.78-.87,9.62,9.62,0,0,0-2.73,1,11.14,11.14,0,0,0-4.41,5.11,11.71,11.71,0,0,0-.17,8.86l22.18,58.07a1.93,1.93,0,0,1-.71,2.1l-.29.21a1,1,0,0,1-1.65-.37l-28.87-75.6a9.48,9.48,0,0,0-6-5.7,9,9,0,0,0-8,1.31l-1.58,1.15a10.88,10.88,0,0,0-4,5.82,11.34,11.34,0,0,0,.32,7.19L1084,208.78a1.73,1.73,0,0,1-.75,2,1.2,1.2,0,0,1-1.78-.44l-25.06-64.86a10.52,10.52,0,0,0-6.68-6.32,10,10,0,0,0-7,.35,9,9,0,0,0-2.38,1.66A13.76,13.76,0,0,0,1037,147a14.37,14.37,0,0,0,.4,9.09l20.84,54.57c9.73,2.22,21.57,4.92,31.49,7.14Z" fill="#999" opacity="0.77" style="mix-blend-mode: multiply"/>
        </g>
        <g>
          <path d="M1201.25,240" fill="#f8c192"/>
          <path d="M1173,343.7l-68.2,26-10.51-27.53c-.65-1.81-1.27-3.63-1.89-5.45-1-2.93-2-5.84-3.25-8.63-2.78-6.31-6.61-12-13.66-15.71-.64-.72-1.25-1.45-1.82-2.21a42.88,42.88,0,0,1-6.43-13l-.89-2.27c-7.78-20-18.64-48.37-18.64-48.37l-23.76-62.22a14,14,0,0,1-.39-8.85,13.4,13.4,0,0,1,3.49-5.89,9.17,9.17,0,0,1,9.38-2,10.4,10.4,0,0,1,6.6,6.25l19.64,51.44a1,1,0,0,0,1.65.37l.29-.21a1.93,1.93,0,0,0,.71-2.09l-25.63-67.13a14.37,14.37,0,0,1-.4-9.09,13.76,13.76,0,0,1,3.41-5.88,9,9,0,0,1,2.38-1.66,10,10,0,0,1,7-.35,10.52,10.52,0,0,1,6.68,6.32l25.06,64.86a1.2,1.2,0,0,0,1.78.44,1.73,1.73,0,0,0,.75-2l-26.45-69.26a11.34,11.34,0,0,1-.32-7.19,10.89,10.89,0,0,1,4-5.82l1.58-1.15a9,9,0,0,1,8-1.31,9.48,9.48,0,0,1,6,5.7l28.87,75.6a1,1,0,0,0,1.65.37l.29-.21a1.93,1.93,0,0,0,.71-2.1l-22.18-58.07a11.72,11.72,0,0,1,.17-8.86,11.14,11.14,0,0,1,4.41-5.11,9.62,9.62,0,0,1,2.73-1,11.26,11.26,0,0,1,6.78.87,11.83,11.83,0,0,1,6.1,6.56l39.18,102.6a4.58,4.58,0,0,0,4.09,3,4.35,4.35,0,0,0,3.44-1.48,5.79,5.79,0,0,0,1-2.52c.16-1,.37-2.36.54-4a15.39,15.39,0,0,0,0-2.66,69.42,69.42,0,0,1,7.3-38.48l.23-.48a11.72,11.72,0,0,1,1-1.66A12.27,12.27,0,0,1,1171,188c5.87-2.24,12.24.18,14.24,5.41a9.06,9.06,0,0,1,.48,1.8c0,.16,0,.32.07.49a9.84,9.84,0,0,1-1,5.37c-.34.69-1,1.78-1.29,2.48a52.3,52.3,0,0,0-3,8.63l-.13.53a47,47,0,0,0,1.18,26.78,7.29,7.29,0,0,1,.36,2.58c-.33,3.61-1.22,4.72-2.81,8.39l-5.85,13.44-1,2.36c-2.44,4.68-4.48,9.69-7.33,14.65-3.2,5.1-9.64,7.91-9.54,14a10.65,10.65,0,0,0,.1,2.19,10,10,0,0,0,.55,2.08Z" fill="#f8c192"/>
          <path d="M1100.54,358.67l68.89-26.31a1.75,1.75,0,0,0,1.14-2.2l-10.45-27.38a1.76,1.76,0,0,0-2.31-.88l-68.89,26.31a1.76,1.76,0,0,0-1.14,2.2l10.45,27.38A1.76,1.76,0,0,0,1100.54,358.67Z" fill="#f5f5f5"/>
          <path d="M1088.91,328.21l34.79-13.29,11.63,30.45-34.79,13.29a1.76,1.76,0,0,1-2.31-.88l-10.45-27.38A1.76,1.76,0,0,1,1088.91,328.21Z" fill="#ededed" style="mix-blend-mode: multiply"/>
          <path d="M1084.43,341.74a1.83,1.83,0,0,1,1.08-2.36l83-31.68a1.83,1.83,0,0,1,2.38,1L1182.77,340l-86.43,33Z" fill="#545454"/>
          <path d="M1084.43,341.74a1.83,1.83,0,0,1,1.08-2.36L1127,323.54l12.57,32.92L1096.34,373Z" fill="#545454" opacity="0.18" style="mix-blend-mode: multiply"/>
          <circle cx="1111.94" cy="348.46" r="5.87" transform="translate(163.3 1025.16) rotate(-52.9)" fill="#242424"/>
          <path d="M1102.85,151.69a6.94,6.94,0,0,1-9-3.84l-1.52-4a6.94,6.94,0,0,1,4.18-8.88h0a6.94,6.94,0,0,1,9,3.84l1.52,4a6.94,6.94,0,0,1-4.18,8.88Z" fill="#e8d9cb" opacity="0.89"/>
          <path d="M1074,145.78a6.94,6.94,0,0,1-9-3.84l-1.52-4a6.94,6.94,0,0,1,4.18-8.88h0a6.94,6.94,0,0,1,9,3.84l1.52,4a7,7,0,0,1-4.18,8.88Z" fill="#e6e6e6" opacity="0.89"/>
          <path d="M1053.67,160.79a6.94,6.94,0,0,1-9-3.84l-1.52-4a6.94,6.94,0,0,1,4.18-8.88h0a7,7,0,0,1,9,3.84l1.52,4a6.94,6.94,0,0,1-4.18,8.88Z" fill="#e8d9cb" opacity="0.89"/>
          <path d="M1037.79,189.38a6.94,6.94,0,0,1-9-3.84l-1.52-4a6.94,6.94,0,0,1,4.18-8.88h0a6.94,6.94,0,0,1,9,3.84l1.52,4a7,7,0,0,1-4.18,8.89Z" fill="#e8d9cb" opacity="0.89"/>
          <path d="M1180.32,212.68c-2.12-1.78-3.31-5.25-2.82-9,.67-5.18,4.23-9,8-8.52l.25,0c0,.16,0,.32.07.49a9.84,9.84,0,0,1-1,5.37c-.34.69-1,1.78-1.29,2.48a52.3,52.3,0,0,0-3,8.63Z" fill="#e8d9cb"/>
          <path d="M1153.28,250.16c4.93-1.1,9.66-6.21,10.56-10.36,2-9.1-.13-19.23,2-28l.13-.53a52.31,52.31,0,0,1,3-8.63c.32-.7.95-1.79,1.29-2.48a9.84,9.84,0,0,0,1-5.37c0-.16,0-.33-.07-.49a9.1,9.1,0,0,0-2.65-5.09,12.05,12.05,0,0,0-3.09,2.9,11.72,11.72,0,0,0-1,1.66l-.23.48a69.42,69.42,0,0,0-7.3,38.48,15.39,15.39,0,0,1,0,2.66c-.16,1.66-.37,3.06-.54,4a5.79,5.79,0,0,1-1,2.52,4.35,4.35,0,0,1-3.44,1.48,4.58,4.58,0,0,1-4.09-3S1151.86,250.47,1153.28,250.16Z" fill="#f8c192" opacity="0.5" style="mix-blend-mode: multiply"/>
          <path d="M1059.5,132.4a11.34,11.34,0,0,0,.32,7.19l26.45,69.26a1.68,1.68,0,0,1-1.7,2.17c4.69,1.69,7.44.59,9.23-1.9a2,2,0,0,0,.17-1.65L1063,127A10.89,10.89,0,0,0,1059.5,132.4Z" fill="#f8c192" opacity="0.5" style="mix-blend-mode: multiply"/>
          <path d="M1039.26,147.09a14.37,14.37,0,0,0,.4,9.09l25.63,67.13c.52,1.48-1.22,2.69-1.84,2.59,4.21,1.37,7.12.74,9.09-2.76a2.29,2.29,0,0,0,.09-1.7l-30.44-79.72A13.77,13.77,0,0,0,1039.26,147.09Z" fill="#f8c192" opacity="0.5" style="mix-blend-mode: multiply"/>
          <path d="M1026.55,170.1a13.4,13.4,0,0,0-3,5.39,14,14,0,0,0,.39,8.85l23.76,62.22s10.85,28.36,18.64,48.37l.89,2.27a42.88,42.88,0,0,0,6.43,13c.57.76,1.18,1.49,1.82,2.21a27.22,27.22,0,0,1,7.79,6.15Z" fill="#f8c192" opacity="0.5" style="mix-blend-mode: multiply"/>
          <g opacity="0.5" style="mix-blend-mode: multiply">
            <path d="M1092.3,132a11.13,11.13,0,0,0-1.45,1.29l-.18.19-.29.34-.23.28-.24.33-.24.35-.2.3-.26.45-.14.26c-.13.24-.25.49-.36.75a11.72,11.72,0,0,0-.17,8.86l20.91,54.75,1.27,3.32a1.93,1.93,0,0,1-.71,2.1l-.29.21a1.36,1.36,0,0,1-.64.26c4.12,2.92,11-1,10.17-3.51C1112.88,183.68,1092.3,132,1092.3,132Z" fill="#f8c192"/>
          </g>
        </g>
      </g>
      <g id="bravo">
        <path d="M1028.36,417.69l12.38-2.54a31.78,31.78,0,0,1,9.21-.73,16.65,16.65,0,0,1,6.55,1.84,11.42,11.42,0,0,1,4.19,3.87,15.73,15.73,0,0,1,2.13,5.34,17.34,17.34,0,0,1,.37,3.9,14.2,14.2,0,0,1-.51,3.54,11.38,11.38,0,0,1-1.35,3,9.11,9.11,0,0,1-2.14,2.35,20.08,20.08,0,0,1,3.23,1.21,11.13,11.13,0,0,1,3,2.14,13.76,13.76,0,0,1,2.53,3.55,21.28,21.28,0,0,1,1.79,5.45,15.12,15.12,0,0,1,.17,5.85,12.6,12.6,0,0,1-1.88,4.7,14.75,14.75,0,0,1-3.52,3.67,27.19,27.19,0,0,1-4.7,2.78,38.75,38.75,0,0,1-5.45,2.06q-2.88.85-5.8,1.45l-8.85,1.82ZM1046,437.5a23.77,23.77,0,0,0,3.39-.94,6.53,6.53,0,0,0,2.48-1.54,5,5,0,0,0,1.28-2.53,10,10,0,0,0-.17-3.92,7.11,7.11,0,0,0-1.41-3.22,5.32,5.32,0,0,0-2.36-1.63,8.4,8.4,0,0,0-3-.41,21.18,21.18,0,0,0-3.47.43l-2.12.44,2.85,13.86Zm4.71,24.2a12.56,12.56,0,0,0,4.72-1.85,9.14,9.14,0,0,0,2.66-2.74,7.53,7.53,0,0,0,1.06-3,8.84,8.84,0,0,0-.08-2.76,9.78,9.78,0,0,0-1.66-4.08,5.94,5.94,0,0,0-2.62-2,8.08,8.08,0,0,0-3.32-.44,26.49,26.49,0,0,0-3.72.5l-2.38.49,3.35,16.3Z" fill="#fff"/>
        <path d="M1080.37,465.07,1069,409.79l13-3.12a36.88,36.88,0,0,1,8.46-.82,18.72,18.72,0,0,1,7,1.45,13.06,13.06,0,0,1,5.13,4,15.7,15.7,0,0,1,2.88,6.65,19.29,19.29,0,0,1,.42,5,14.62,14.62,0,0,1-.83,4.18,13.63,13.63,0,0,1-1.89,3.5,19.49,19.49,0,0,1-2.75,3s.22.35.65,1l1.7,2.5,2.37,3.53q1.33,2,2.72,4,3.27,4.8,7.45,10.88l-10,5.06-15-23.17-4.21.87,4.89,23.79Zm4.05-34.85,3.67-.75a17.51,17.51,0,0,0,3-.91,6.54,6.54,0,0,0,2.39-1.62,5.63,5.63,0,0,0,1.33-2.65,9.87,9.87,0,0,0-.14-4.06,9.05,9.05,0,0,0-1.19-3.15,5.57,5.57,0,0,0-1.88-1.83,5.48,5.48,0,0,0-2.4-.71,10.28,10.28,0,0,0-2.75.21l-5,1Z" fill="#fff"/>
        <path d="M1127.26,442.64l0,12.34-9.61,2,.44-57,15.23-3.8,23.22,52.39-11.68,2.85-4.48-11.42Zm9.37-11.15-10.51-25.41,1.26,27.31Z" fill="#fff"/>
        <path d="M1145.38,394.1l12.69-3.06,15.18,36.64-.08-39.29,10.31-2.57-2,58-11.84,2.43Z" fill="#fff"/>
        <path d="M1215.76,438a15.26,15.26,0,0,1-6.42.08,13.72,13.72,0,0,1-5.23-2.38,18.15,18.15,0,0,1-4.16-4.38,35.26,35.26,0,0,1-3.24-5.9,55.89,55.89,0,0,1-2.48-7q-1.06-3.72-1.86-7.61a56.41,56.41,0,0,1-1.23-11,27.47,27.47,0,0,1,1.33-9.13,15.56,15.56,0,0,1,4.19-6.54,15.09,15.09,0,0,1,7.32-3.51,15.29,15.29,0,0,1,8.15.33,15.6,15.6,0,0,1,6.48,4.35,27.18,27.18,0,0,1,4.84,7.86,56.48,56.48,0,0,1,3.21,10.59q.8,3.89,1.29,7.72a54,54,0,0,1,.45,7.39,35.26,35.26,0,0,1-.69,6.7,18.49,18.49,0,0,1-2.12,5.67,13.68,13.68,0,0,1-3.89,4.25A15.39,15.39,0,0,1,1215.76,438Zm-1.89-9.18a4.38,4.38,0,0,0,3.13-2.2,10.37,10.37,0,0,0,1.06-4.68,37.54,37.54,0,0,0-.54-6.93q-.64-4-1.66-9-.35-1.73-.8-3.6t-1.08-3.86a37.75,37.75,0,0,0-1.44-3.81,14.86,14.86,0,0,0-1.82-3.13,7.18,7.18,0,0,0-2.26-2,3.93,3.93,0,0,0-2.72-.36,3.85,3.85,0,0,0-2.34,1.4,7.09,7.09,0,0,0-1.27,2.7,15.42,15.42,0,0,0-.42,3.59,37.64,37.64,0,0,0,.18,4.07q.2,2.08.54,4t.69,3.62q1,5,2,8.9a38.69,38.69,0,0,0,2.22,6.59,10.35,10.35,0,0,0,2.79,3.89A4.33,4.33,0,0,0,1213.87,428.82Z" fill="#fff"/>
        <path d="M1229,376.46l10.36-2.13,6.35,39.5-6.91,1.42Zm11.44,55.71-2.31-11.23,10.36-2.13,2.22,10.8Z" fill="#fff"/>
      </g>
      <g id="clapLines" opacity="0.79">
        <polygon points="1001.11 281.69 1002.65 283.87 936.32 334.96 930.86 327.24 1001.11 281.69" fill="#fff"/>
        <polygon points="1019.3 296.25 1021.28 298.02 974.38 355.74 967.32 349.44 1019.3 296.25" fill="#fff"/>
        <polygon points="994.98 261.88 993.97 259.41 923.93 284.44 927.52 293.19 994.98 261.88" fill="#fff"/>
        <polygon points="1249.03 185.52 1247.42 183.4 1311.92 130.03 1317.65 137.55 1249.03 185.52" fill="#fff"/>
        <polygon points="1230.35 171.61 1228.3 169.91 1273.16 110.59 1280.43 116.64 1230.35 171.61" fill="#fff"/>
        <polygon points="1255.86 205.11 1256.95 207.54 1326.07 180.09 1322.18 171.47 1255.86 205.11" fill="#fff"/>
      </g>
                  <g id="dog">
        <path d="M501.84,610.24A6.1,6.1,0,0,0,502,612,5.13,5.13,0,0,0,501.84,610.24Z" fill="#4f0800"/>
        <path id="tail" d="M680.31,859.47a8.51,8.51,0,0,1-4.56,3.15c-.89-4.91-.4-10-1-15s-2.67-10.21-6.89-12.33c-2.59-1.31-5.58-1.23-8.44-1-10.67.73-23.18,4.4-26.63,15.29,3.08-6.63,12.15-8,17.91-4s8.38,11.92,8.33,19.32c-.08,9.85-4.18,19.26-9.83,27S636.41,906,629.34,912.24c-5.36,4.73-15.13,10.63-20.49,15.37,0,1.29-.79.71-.84,2,2.8-.28,8.79-.26,11.51-1,14.8-4.25,30.63-9.19,40.21-22a21.9,21.9,0,0,1-8.71-2.75c12.07-2.26,23-10.83,28.68-22.51l-8.17-.7A24.33,24.33,0,0,0,680.31,859.47Z" fill="#4f0800"/>
        <path d="M616.24,922.91a41.93,41.93,0,0,0,2.31-5.59c2.61-7.87,3.2-16.33,3.78-24.66.3-4.33.55-8.94-1.37-12.77-3.91-7.81-14-8.12-22.27-7.39A69.17,69.17,0,0,0,594,842.15l5.17,2.93-7.39-12.25a8.49,8.49,0,0,1,5.75,2.94l-4.91-10.54L558.09,751c-1.74-3.74-3.74-7.66-6.7-10.2a77.46,77.46,0,0,0-1.58-23.85c-.9-3.84-2.09-7.78-1.48-11.68.43-2.74,1.72-5.23,2.54-7.87,1.42-4.59,1.37-9.53,1.3-14.36-.13-9.57-.28-19.32-3.11-28.39a46.77,46.77,0,0,0-17.18-23.81l1.54-2.46a5.58,5.58,0,0,1,2.13-2.3,4.56,4.56,0,0,1,2.72-.11,28.19,28.19,0,0,1,17.64,11.43c1,1.39,2,3,3.55,3.46,3.13,1,5.6-2.83,6.92-6l7.16-17.26c1.63-3.93,3.3-8.09,2.89-12.37-.53-5.53-4.57-10.13-9.27-12.45s-10-2.71-15.19-2.78c-5.41-.07-10.89.18-16.05,1.93A22.48,22.48,0,0,0,523.2,602a29.89,29.89,0,0,0-2.47,6.63,67.68,67.68,0,0,0-2.23,15.75c-.39-.1-.77-.27-1.16-.36l-.76-.7a28.19,28.19,0,0,1-6.77-16,9.34,9.34,0,0,0-2.66,9.4A6.24,6.24,0,0,1,502,612a7.55,7.55,0,0,1-3.2,5.61c-2.23,1.58-4.94,2.11-7.53,2.79a49.67,49.67,0,0,0-7.71,2.79c-2.87-2-4.48-6.5-4.77-10.47-.65-8.87,1.34-19.21-4.44-25.58-3.48-3.84-8.86-4.88-13.84-4.7a38.85,38.85,0,0,0-27.06,12.82,44.87,44.87,0,0,0-11.29,29.4c-.05,6.1,1.23,12.46,4.85,17.16s9.91,7.31,15.21,5.13c4-1.66,6.78-5.58,9.9-8.78s7.54-5.91,11.58-4.3a12.27,12.27,0,0,0,1.33,2.82c-11.43,12.32-18.42,29.55-17.62,47,.23,5,.94,10.52-1.59,14.77a20.18,20.18,0,0,1-5,5.11c-13.4,10.87-27.43,24.88-27.58,42.93-.1,11.7,6.17,22.87,15.06,29.6,1.59,1.21,3.67,2.32,5.41,1.36s2.1-3.3,3.17-5,4.2-2.13,4.35-.08c-3.07,2.44-3.2,7.59-1.32,11.16s5.19,5.94,8.39,8.17c11.5,8,23.79,16.3,37.48,16.59a40.78,40.78,0,0,0,13.91-2.32c-1,4.42-4,8.92-5.89,13.22a46.06,46.06,0,0,0-3.2,14.41,114.93,114.93,0,0,0,.84,27.53c.47,3.08,1,6.36-.12,9.22-1.86,4.57-7.24,6.09-10.21,9.92-3.36,4.35-3,10.8-1.33,16.17s4.35,10.41,5.13,16c-3.87-.51-7.83-1-11.62,0s-7.42,3.77-8.42,7.82c-1.58,6.39,3.92,12.47,9.71,14.71,9.59,3.7,20.17,1.08,30-1.57-.44,5.22,5.25,9,10.07,8.32s8.73-4.43,12.32-8a15.58,15.58,0,0,0,27.55-.49c9.72,8.3,23.48,7.31,35.83,5.91,4.59-.52,9.26-1.07,13.47-3.11a26.93,26.93,0,0,0,11.16-11Z" fill="#4f0800"/>
        <path d="M499.32,807.49l-2-.82c20.51-14.32,46.58-44,54.26-69.82l2.4,6.83C545.92,770.86,523.45,796.29,499.32,807.49Z" fill="#ff833c"/>
        <path d="M489.31,741.36c-2.44,9.23-17.18,12.8-32.9,8s-26.5-16.21-24.05-25.43,17.17-12.8,32.9-8S491.75,732.13,489.31,741.36Z" fill="#bb5f56"/>
        <g>
          <g>
            <path d="M488.34,687.59a17.79,17.79,0,0,1-21.71,13.73c-10-2.29-16.62-12.14-14.67-22a17.79,17.79,0,0,1,21.71-13.73C483.71,667.87,490.28,677.72,488.34,687.59Z" fill="#fff"/>
            <path d="M466.54,701.74c-10.34-2.35-17.13-12.47-15.14-22.56s12-16.37,22.35-14,17.13,12.47,15.14,22.56S476.88,704.09,466.54,701.74Zm7-35.74a17.33,17.33,0,0,0-21.08,13.44,18.62,18.62,0,0,0,14.2,21.47,17.33,17.33,0,0,0,21.08-13.44A18.62,18.62,0,0,0,473.58,666Z" fill="#201600"/>
          </g>
          <path d="M482.49,686.26c-1.12,5.7-7.56,9.06-14.38,7.5s-11.44-7.43-10.31-13.13,7.56-9.06,14.38-7.5S483.61,680.56,482.49,686.26Z" fill="#201600"/>
          <path d="M469.21,677.17a4.4,4.4,0,0,1-5.49,3.15,4.72,4.72,0,0,1-3.83-5.27,4.4,4.4,0,0,1,5.49-3.15A4.72,4.72,0,0,1,469.21,677.17Z" fill="#fff"/>
          <g>
            <path d="M527.24,696.84c-2.21,11.24-12.58,18.39-23.15,16s-17.35-13.47-15.14-24.7,12.58-18.39,23.15-16S529.46,685.61,527.24,696.84Z" fill="#fff"/>
            <path d="M504,713.3c-10.88-2.48-17.89-13.83-15.63-25.31s12.95-18.8,23.83-16.33,17.89,13.83,15.63,25.31S514.87,715.78,504,713.3Zm8-40.69c-10.24-2.33-20.32,4.68-22.48,15.64s4.42,21.76,14.66,24.1,20.32-4.68,22.48-15.64S522.24,674.95,512,672.61Z" fill="#201600"/>
          </g>
          <path d="M474.74,691.43c-.17.88-1.5,1.32-3,1s-2.51-1.32-2.34-2.2,1.5-1.33,3-1S474.91,690.55,474.74,691.43Z" fill="#fff"/>
          <path d="M521.54,695.54c-1.28,6.48-8.13,10.42-15.3,8.78s-12-8.22-10.68-14.7,8.13-10.42,15.3-8.78S522.82,689.06,521.54,695.54Z" fill="#201600"/>
          <path d="M507.66,685.47a4.79,4.79,0,0,1-5.85,3.67,5.14,5.14,0,0,1-4-5.91,4.79,4.79,0,0,1,5.85-3.67A5.14,5.14,0,0,1,507.66,685.47Z" fill="#fff"/>
          <path d="M513.27,701.56c-.2,1-1.61,1.53-3.15,1.18s-2.63-1.45-2.43-2.45,1.61-1.53,3.15-1.18S513.47,700.55,513.27,701.56Z" fill="#fff"/>
        </g>
        <path d="M467.53,722.53c-.27,2.68-7,4.1-14.91,3.15s-14.19-3.88-13.92-6.57,7-4.1,14.91-3.15S467.8,719.84,467.53,722.53Z" fill="#fff"/>
        <path d="M484.28,912.25a10.92,10.92,0,0,1,2.49.35,15.87,15.87,0,0,1,5.08,2.27,16.11,16.11,0,0,1,4,3.91,11.48,11.48,0,0,1,1.27,2.22l-1.9-1.61a52.85,52.85,0,0,0-4.23-3.21,51.67,51.67,0,0,0-4.53-2.75Z" fill="#720108"/>
        <path d="M506,923.71a5.55,5.55,0,0,1,.24-1.08,7.31,7.31,0,0,1,1.43-2.61,10,10,0,0,1,3.38-2.55,10.46,10.46,0,0,1,4.8-.93,14.18,14.18,0,0,1,2.41.39,13.56,13.56,0,0,1,2.22.83,16.25,16.25,0,0,1,3.45,2.3,15,15,0,0,1,2.67,3,31.19,31.19,0,0,0-3.18-2.27,19.84,19.84,0,0,0-3.47-1.74,18.05,18.05,0,0,0-2-.63,12.79,12.79,0,0,0-2.19-.3,10.71,10.71,0,0,0-4.16.64,10.18,10.18,0,0,0-3.27,1.89,8.51,8.51,0,0,0-1.77,2.1A10.22,10.22,0,0,0,506,923.71Z" fill="#720108"/>
        <path d="M532.24,924.39c.8-1.66,1.72-3.24,2.67-4.8l0-.06.1-.08a9.65,9.65,0,0,1,2-1.24,11,11,0,0,1,2.26-.71,11.37,11.37,0,0,1,4.68.1,15,15,0,0,1,2.21.77,13.74,13.74,0,0,1,2,1.23,9.84,9.84,0,0,1,1.66,1.62,9.41,9.41,0,0,1,1.17,2,16.1,16.1,0,0,0-1.59-1.54,19.24,19.24,0,0,0-1.78-1.2,13.32,13.32,0,0,0-4-1.37,13.66,13.66,0,0,0-2.06-.21,11.44,11.44,0,0,0-4.06.65,16.18,16.18,0,0,0-1.88.88l.14-.14C534.69,921.68,533.52,923.07,532.24,924.39Z" fill="#720108"/>
        <path d="M558.53,924.91l.82-.87a20.21,20.21,0,0,1,2.38-2.07,27.47,27.47,0,0,1,3.78-2.39,26.41,26.41,0,0,1,9.81-2.82,26.73,26.73,0,0,1,4.45,0,19.63,19.63,0,0,1,3.09.5l1.14.31h-1.18c-.74,0-1.81,0-3.07.08a41.72,41.72,0,0,0-9.05,1.53,44.94,44.94,0,0,0-4.62,1.63,38.56,38.56,0,0,0-3.88,1.88c-1.11.62-2,1.14-2.66,1.57Z" fill="#720108"/>
        <path d="M556.14,782.49a9.72,9.72,0,0,1,1.26,1.41,15.67,15.67,0,0,1,3,7.62,9.94,9.94,0,0,1,0,1.91s-.41-.66-.88-1.66-1.08-2.33-1.6-3.67-1-2.72-1.35-3.78S556.14,782.49,556.14,782.49Z" fill="#720108"/>
        <path d="M548.72,785.17a13.61,13.61,0,0,1,1,1.62,25,25,0,0,1,2.63,7.76,13.59,13.59,0,0,1,.19,1.91,13.37,13.37,0,0,1-1-1.62,25,25,0,0,1-1.64-3.77,25.52,25.52,0,0,1-1-4A13.85,13.85,0,0,1,548.72,785.17Z" fill="#720108"/>
        <path d="M541.76,789.79a11.19,11.19,0,0,1,.6,1.28,23.93,23.93,0,0,1,.91,2.8,23.52,23.52,0,0,1,.54,2.89,10.77,10.77,0,0,1,.09,1.42,6,6,0,0,1-.9-1.11,9.56,9.56,0,0,1-1.22-2.81,9.7,9.7,0,0,1-.27-3.06A6.09,6.09,0,0,1,541.76,789.79Z" fill="#720108"/>
        <path d="M545.74,809.05a6.48,6.48,0,0,1,1,1.19,10.33,10.33,0,0,1,1.71,6.39,6.66,6.66,0,0,1-.26,1.54,13.88,13.88,0,0,1-.6-1.41c-.3-.84-.67-1.94-1-3s-.53-2.25-.69-3.13A14.94,14.94,0,0,1,545.74,809.05Z" fill="#720108"/>
        <path d="M556,806.2a9.85,9.85,0,0,1,1.24,1.32,16.34,16.34,0,0,1,3.23,7.11,10.07,10.07,0,0,1,.19,1.82,15.58,15.58,0,0,1-1-1.5,35.87,35.87,0,0,1-1.78-3.41,36.71,36.71,0,0,1-1.4-3.59A16.48,16.48,0,0,1,556,806.2Z" fill="#720108"/>
        <path d="M566.75,801.12a9,9,0,0,1,1.66,1.23,13.71,13.71,0,0,1,2.79,3.58,13.87,13.87,0,0,1,1.47,4.33,9.34,9.34,0,0,1,.12,2.09s-.41-.74-.95-1.81-1.26-2.47-2-3.84-1.5-2.75-2.11-3.78S566.75,801.12,566.75,801.12Z" fill="#720108"/>
        <path d="M552,828.66a11.51,11.51,0,0,1,.88,1.29,23,23,0,0,1,2.52,6.07,11.37,11.37,0,0,1,.29,1.54,7.68,7.68,0,0,1-1.07-1.14,12.83,12.83,0,0,1-1.69-2.91,13.08,13.08,0,0,1-.87-3.26A8,8,0,0,1,552,828.66Z" fill="#720108"/>
        <path d="M560.7,826a.78.78,0,0,1,.53-.34,1.88,1.88,0,0,1,1.53.72,8.13,8.13,0,0,1,1.17,1.94c.34.7.66,1.48,1,2.25a31.49,31.49,0,0,1,1.35,4.41,16.71,16.71,0,0,1,.35,2.11,16.44,16.44,0,0,1-1.16-1.78,31.31,31.31,0,0,1-2-4.15c-.29-.78-.58-1.57-.8-2.32a12.39,12.39,0,0,0-.6-1.93c-.26-.48-.54-.88-.84-.94A.77.77,0,0,0,560.7,826Z" fill="#720108"/>
        <path d="M572.2,823.44a.6.6,0,0,1,.58-.27,2,2,0,0,1,1.34,1.08c.31.7.56,1.31.83,2.08s.49,1.57.72,2.38a32.4,32.4,0,0,1,.85,4.59,17.16,17.16,0,0,1,.12,2.16,16.91,16.91,0,0,1-1-1.93,32.25,32.25,0,0,1-1.5-4.42c-.2-.82-.4-1.65-.54-2.43s-.21-1.6-.32-2.1a1.91,1.91,0,0,0-.62-1.13A.5.5,0,0,0,572.2,823.44Z" fill="#720108"/>
        <path d="M581,820.7a8.11,8.11,0,0,1,1.53,1.34,12.33,12.33,0,0,1,2.35,3.81,12.46,12.46,0,0,1,.83,4.42,8.45,8.45,0,0,1-.22,2s-.28-.78-.64-1.9-.87-2.56-1.41-4-1.14-2.83-1.64-3.89S581,820.7,581,820.7Z" fill="#720108"/>
        <path d="M564.49,851.21a15.69,15.69,0,0,1,.86,1.86,29,29,0,0,1,1.92,8.63,15.55,15.55,0,0,1,0,2.06,15.38,15.38,0,0,1-.86-1.86,29.05,29.05,0,0,1-1.29-4.24,29.54,29.54,0,0,1-.63-4.39A15.87,15.87,0,0,1,564.49,851.21Z" fill="#720108"/>
        <path d="M572.1,851.06a1.5,1.5,0,0,1,.57-.13,1.93,1.93,0,0,1,1.46.77,5.73,5.73,0,0,1,1,2,23,23,0,0,1,.43,2.39c.24,1.55.52,3.1.77,4.29s.39,2,.39,2a8.83,8.83,0,0,1-1.2-1.71,13.26,13.26,0,0,1-1.48-4.36,17.33,17.33,0,0,0-.65-4.19,1.77,1.77,0,0,0-.79-1A2,2,0,0,0,572.1,851.06Z" fill="#720108"/>
        <path d="M582.75,849.53a12.15,12.15,0,0,1,1.12,1.78,19.66,19.66,0,0,1,2.26,8.83,12.28,12.28,0,0,1-.13,2.11s-.34-.79-.73-2-.86-2.73-1.25-4.3-.73-3.16-1-4.38S582.75,849.53,582.75,849.53Z" fill="#720108"/>
        <path d="M592.08,851.25a12,12,0,0,1,.72,1.64,21.8,21.8,0,0,1,1.31,7.54,12,12,0,0,1-.13,1.79,11.8,11.8,0,0,1-.72-1.64,21.88,21.88,0,0,1-1-3.71,22.22,22.22,0,0,1-.32-3.83A12.16,12.16,0,0,1,592.08,851.25Z" fill="#720108"/>
        <path d="M495.35,663.51l4.73-4.65a73.91,73.91,0,0,1,13.52-2.5l-1.71,1.86c4,1.49,8.45.9,12.72,1.26s9,2.22,10.39,6.35c-1.91.56-2.65,3-2.24,5s1.6,3.69,2.33,5.58.88,4.28-.53,5.71a26.54,26.54,0,0,0-6.63-7.17c-1.56-1.16-5.15-5.82-9.64-7.71-8.94-3.74-13.31-2.76-22.93-3.74" fill="#720108"/>
        <path d="M491.76,661.85a25.51,25.51,0,0,0-15.28-8.34l.94,2.91a21.72,21.72,0,0,0-17.87-3.55c-2.3.57-4.32,7-5.17,9.24,10.61-2.36,10.61-2.36,20.37-1.77,1.84.11,13.18-.39,17,1.5" fill="#720108"/>
        <g id="woof" stroke="#603813" stroke-width="4" fill="#fff">

            <path d="M101.52,824.14a3.59,3.59,0,0,1-3.4-2.7c-11.8-30.29-24-61-36.25-91.06l0-.09,0-.09a4.21,4.21,0,0,1,2.06-5.36c7.15-3.59,10.67-5.28,17.93-8.58a3.94,3.94,0,0,1,1.64-.37A3.7,3.7,0,0,1,87,718.73c4.51,12.73,9,25.62,13.54,38.49-1.16-11-2.27-22-3.32-32.94A4,4,0,0,1,99.54,720c6.07-2.52,9-3.71,15.17-6a4,4,0,0,1,1.41-.27A3.67,3.67,0,0,1,119.5,716c4.2,9.41,8.39,18.92,12.54,28.46-2.53-14-5-28-7.5-42a4,4,0,0,1,2.83-4.94c7.6-2.07,11.32-3,19-4.74a4.17,4.17,0,0,1,.95-.11,3.8,3.8,0,0,1,3.7,3.34l0,.15c4.95,32.86,10.15,66.08,15.45,98.76a4.06,4.06,0,0,1-2.46,4.75c-8,3-11.81,4.49-19.63,7.83a3.6,3.6,0,0,1-1.46.31,3.64,3.64,0,0,1-3.22-2.08c-5.35-9.71-10.83-19.48-16.35-29.13.27,11.88.62,23.81,1,35.6.05,3-1.77,3.95-2.55,4.22-7.61,2.77-11.33,4.22-18.89,7.37A3.73,3.73,0,0,1,101.52,824.14Z" />

            <path d="M202.43,794a35,35,0,0,1-24.73-9.86c-8.87-8.72-14.81-20.73-18.16-36.71s-2.46-30.55,2.65-43.26c5.23-13,15.92-22.22,28.6-24.65a26.74,26.74,0,0,1,5-.48c9.85,0,19.92,5.77,26.93,15.42,7.71,10.61,12.75,23.83,14.57,38.22,1.1,8.69,2,25.3-4.67,39-4,8.24-10.78,19.45-23.46,21.75A38,38,0,0,1,202.43,794Zm-5.72-76.55a8,8,0,0,0-1.54.16c-3.53.7-6,3.5-7.56,8.55a35.42,35.42,0,0,0,5.46,30.14c2.64,3.42,5.23,5.08,7.93,5.08h0a7.2,7.2,0,0,0,1.39-.14c3.28-.65,5.65-3.38,7.26-8.33a34,34,0,0,0,1.12-15.73A31.67,31.67,0,0,0,205,722.63C202.35,719.19,199.58,717.44,196.71,717.44Z" />

            <path d="M281,785.74a39.66,39.66,0,0,1-30.6-14.34c-8.12-10-13-22.79-15-39s.19-30.42,6.44-42.06c6.36-11.84,18.26-19.28,31.06-19.42h.3c11.67,0,23,7.46,30.3,20a86.43,86.43,0,0,1,11.31,39.92,79,79,0,0,1-8,37.28c-4.23,8.5-15.29,17.67-25.8,17.67ZM273.51,709c-3.54.08-6.2,2.35-8.16,6.94a31.14,31.14,0,0,0-2,15.39,34.88,34.88,0,0,0,4.93,15.09c2.74,4.43,5.67,6.59,9,6.59h.18c2.09,0,5.18-.8,7.85-6.78a31.71,31.71,0,0,0,2.49-15.15,33.39,33.39,0,0,0-4.62-15.32c-2.72-4.48-5.88-6.75-9.41-6.75Z" />

            <path d="M339.44,784.12l-.48,0c-7.9-1-11.74-1.36-19.59-2-1.69-.12-3.56-1.31-3.67-4.29q-1.53-49.81-3-99.6a4.34,4.34,0,0,1,1.14-3.23,3.58,3.58,0,0,1,2.61-1h.32c19.29,1.85,38,4.5,57.21,8.11,1.7.32,3.48,1.71,3.4,4.65l-.67,19.91c-.08,2.69-1.85,3.91-3.58,3.91a4.43,4.43,0,0,1-1-.11c-9.83-1.87-19.39-3.49-29.15-5L343,717.16c8.78,1.17,13.74,2,23.16,3.73a4.08,4.08,0,0,1,3.35,4.54L369,745.29c-.05,2.73-1.83,4-3.56,4a4.36,4.36,0,0,1-.95-.11c-8.77-1.63-13.55-2.41-21.62-3.49q.06,17.19.14,34.37a4.18,4.18,0,0,1-1.09,3.1A3.42,3.42,0,0,1,339.44,784.12Z" />

        </g>
      </g>
      <g id="ufo">
        <path d="M1162.05,735.1h-66c-16.49,0-33,16.49-33,16.49H1195S1178.54,735.1,1162.05,735.1Z" fill="#c8d0d9"/>
        <path d="M1162.05,768.08h-66c-16.49,0-33-16.49-33-16.49H1195S1178.54,768.08,1162.05,768.08Z" fill="#a9b0b8"/>
        <path d="M1165.21,735.1v-5.55c0-20.41-15.86-37-36.28-37s-36.28,16.55-36.28,37v5.55Z" fill="#94e0ff"/>
        <path d="M1104.34,730.46a3.3,3.3,0,0,1-3.3-3.3c0-14.76,11.24-26.32,25.6-26.32a3.3,3.3,0,0,1,0,6.6c-10.66,0-19,8.66-19,19.72A3.3,3.3,0,0,1,1104.34,730.46Z" fill="#fff"/>
        <circle cx="1130.73" cy="788.23" r="8.24" fill="#a9b0b8"/>
        <circle cx="1081.26" cy="788.23" r="8.24" fill="#a9b0b8"/>
        <circle cx="1180.19" cy="788.23" r="8.24" fill="#a9b0b8"/>
        <rect x="1127.28" y="766.43" width="6.6" height="16.49" fill="#a9b0b8"/>
        <rect x="1081.82" y="771.75" width="25.26" height="6.6" transform="translate(-227.48 1000.9) rotate(-45)" fill="#a9b0b8"/>
        <rect x="1163.7" y="762.41" width="6.6" height="25.26" transform="translate(-206.24 1052.18) rotate(-45)" fill="#a9b0b8"/>
      </g>
      <g id="basics" fill="#262626">
        <circle cx="375" cy="150" r="25" />
        <circle cx="375" cy="200" r="25" />
        <circle cx="375" cy="250" r="25" />
        <circle cx="375" cy="300" r="25" />
        <circle cx="375" cy="350" r="25" />
      </g>
      <g id="InfoCards" opacity="0.25" fill="#000">
        <rect x="10" y="10" width="375" height="50" />
        <rect x="10" y="510" width="375" height="50" />
        <rect x="760" y="510" width="375" height="50" />
        <rect x="760" y="10" width="375" height="50" />
      </g>
      <g id="titles" fill="white">
      <text transform="translate(21.96 45.61)" font-size="29" font-weight="700">Position (w/staggerTo)</text>
      <text transform="translate(21.96 545.61)" font-size="29" font-weight="700">Rotation</text>
      <text transform="translate(773.96 545.61)" font-size="29"  font-weight="700">Position, Scale &amp; Rotation</text>
      <text transform="translate(773.96 45.61)" font-size="29"  font-weight="700">Scale &amp; Opacity</text>
		</g>
    </g>
  </g>
</svg>

<svg id="intro" xmlns="http://www.w3.org/2000/svg"  viewBox="0 0 1500 1000">
  <title>Wiggle World</title>
  <rect width="1500" height="1000" fill="#fff"/>
  <path d="M334.28,713.74c79.32,0,143.65,9.05,143.65,20.21s-64.33,20.21-143.65,20.21S190.63,745.11,190.63,734,255,713.74,334.28,713.74Z" fill="gray" fill-rule="evenodd"/>
  <g id="wordWiggle">
    <path d="M774,450.14a1.83,1.83,0,0,1-2,1.82l-32,1.27a1.79,1.79,0,0,1-2-1.27l-16.53-47.3L705.68,451.8a1.88,1.88,0,0,1-2,1.42L672.93,452a1.6,1.6,0,0,1-1.74-1.66l-10.6-109.63a1.75,1.75,0,0,1,2-2h26.26a1.69,1.69,0,0,1,1.9,1.82l4.9,69.69,13.13-58.38a1.63,1.63,0,0,1,1.74-1.42h22.07a1.72,1.72,0,0,1,1.9,1.42L747,410.2l5.38-70.32a1.72,1.72,0,0,1,2.06-1.82l26.42,1.34a1.69,1.69,0,0,1,1.82,1.9Z" fill="#f7931e"/>
    <path d="M823.78,341l-2.61,108.21a1.84,1.84,0,0,1-2,2l-29.27.47a1.9,1.9,0,0,1-2-2l1.5-109.32q0-2,1.9-2l30.45.47A1.87,1.87,0,0,1,823.78,341Z" fill="#c1272d"/>
    <path d="M928.19,439a2.43,2.43,0,0,1-.47,1.5q-5.77,6.25-18,9.73a75.91,75.91,0,0,1-20.49,2.85q-26.42,0-42.56-15Q830,422.46,830,395.88q0-32.35,22.46-49.6,20.41-15.66,54.11-15.66,4,0,4.27,1.58l4.51,30.53q.31,2.06-2.14,2.06-1.11,0-3.44-.16t-3.52-.16q-18.19,0-29.19,7.12Q864,380.06,864,397.22q0,24.44,21.2,24.44a32.73,32.73,0,0,0,9.1-1.11l-.47-13.76-14.32.32a1.72,1.72,0,0,1-1.34-.63,2.2,2.2,0,0,1-.55-1.5l.32-15.58a1.66,1.66,0,0,1,1.74-1.9l44.61-2.93a1.68,1.68,0,0,1,2.06,1.82Z" fill="#39b54a"/>
    <path d="M1030.94,439a2.43,2.43,0,0,1-.47,1.5q-5.77,6.25-18,9.73A75.91,75.91,0,0,1,992,453.07q-26.42,0-42.56-15-16.69-15.58-16.69-42.16,0-32.35,22.46-49.6,20.41-15.66,54.11-15.66,4,0,4.27,1.58l4.51,30.53q.31,2.06-2.14,2.06-1.11,0-3.44-.16t-3.52-.16q-18.19,0-29.19,7.12-13.05,8.47-13.05,25.63,0,24.44,21.2,24.44a32.73,32.73,0,0,0,9.1-1.11l-.47-13.76-14.32.32a1.72,1.72,0,0,1-1.34-.63,2.2,2.2,0,0,1-.55-1.5l.32-15.58a1.66,1.66,0,0,1,1.74-1.9l44.61-2.93a1.68,1.68,0,0,1,2.06,1.82Z" fill="#29abe2"/>
    <path d="M1120.25,446.74q0,2-2.14,2H1043a1.79,1.79,0,0,1-2-2l-.79-106.23a1.8,1.8,0,0,1,2-2l30.44-.63q1.91,0,1.91,2v82.9h43.58q2.14,0,2.14,2Z" fill="#662d91"/>
    <path d="M1206.23,446.74a1.75,1.75,0,0,1-2,2h-76.57a1.75,1.75,0,0,1-2-2V337.26a1.75,1.75,0,0,1,2-2h76.58a1.75,1.75,0,0,1,2,2v22.07q0,1.9-2,1.9h-44.69v18.51h35.52a1.68,1.68,0,0,1,1.9,1.9v22.07a1.67,1.67,0,0,1-1.89,1.9h-35.52l-.32,17.17h45a1.75,1.75,0,0,1,2,2Z" fill="#d4145a"/>
  </g>
  <g>
    <path d="M694.37,282.46a16.62,16.62,0,0,1-6.87,13.9,25.62,25.62,0,0,1-15.18,4.94l-.13,10a.76.76,0,0,1-.75.82l-12.92.85q-.88.07-.88-.79l-.2-48.65a.72.72,0,0,1,.82-.82,125.39,125.39,0,0,1,16.13.88q9.85,1.28,14.46,5Q694.37,273.2,694.37,282.46Zm-12.82,1.21A6.51,6.51,0,0,0,678.9,278a10.24,10.24,0,0,0-6.18-1.7l-.2,14.13Q681.55,289.66,681.55,283.67Z"/>
    <path d="M711,264.11l-.39,44.82a.74.74,0,0,1-.82.82l-11.58.39a.74.74,0,0,1-.88-.79V264.11q0-.79.81-.79h12.08Q711.06,263.32,711,264.11Z"/>
    <path d="M742,309.94q0,1.08-3.79,1.77a26.44,26.44,0,0,1-4.78.52q-8.64,0-14.07-4.65-5.76-4.91-5.76-13.38a28.2,28.2,0,0,1,3.4-14q4.15-7.39,11.52-7.39,13.28,0,13.28,16a21.52,21.52,0,0,1-.75,4.91q-.95,3.76-2.13,3.73L724.21,297q1.28,6.84,8.24,6.84a27.51,27.51,0,0,0,8-1.7l.26-.07a.73.73,0,0,1,.82.75Q742,309.58,742,309.94Zm-8.83-22q0-4.22-3.41-4.22-4.71,0-5.52,8l8.12-.26q.32,0,.58-1.57A12,12,0,0,0,733.14,288Z"/>
    <path d="M777,289.08q0,2.75-1.18,22.07,0,.79-.16,2.29a.81.81,0,0,1-.85.79l-8.51.07q-.88,0-.88-.85s.07-1.12.2-3.24a25.48,25.48,0,0,1-8.57,1.47,16.14,16.14,0,0,1-9.09-2.29,9.11,9.11,0,0,1-4-8.08q0-6.22,6.64-9.23a29.55,29.55,0,0,1,12.1-2.22,33.52,33.52,0,0,1,4.16.33q.06-1.68.07-1.81a4.36,4.36,0,0,0-1.28-3.17,4.59,4.59,0,0,0-6.8.45,9.85,9.85,0,0,1-1.44,1.78l-9.91,1.35q-1,.13-1-.82a2.59,2.59,0,0,0,.1-.26,15.29,15.29,0,0,1,15.18-11.35Q777,276.34,777,289.08Zm-10.57,8.53q-1.73-.13-2.09-.13-7,0-7,4,0,3.34,5.1,3.34a20.62,20.62,0,0,0,3.63-.33Z"/>
    <path d="M810.54,281.28q0,.29-6.18,7.49a.75.75,0,0,1-.59.26q.29,0-3.34-1.95a14.18,14.18,0,0,0-6.58-1.95q-2.62,0-2.62,1.7,0,1.15,4.94,2.94a44.32,44.32,0,0,1,9.19,4.22q5,3.44,5,8.51,0,11.38-15.83,11.38a20.35,20.35,0,0,1-8-1.77,17.39,17.39,0,0,1-6.74-4.74.87.87,0,0,1-.2-.59.83.83,0,0,1,.2-.56l6-6.67a.75.75,0,0,1,.62-.29,28.78,28.78,0,0,0,3.47,2,13.64,13.64,0,0,0,6.15,2q2.88,0,2.88-2,0-1.34-4.91-2.85a38.56,38.56,0,0,1-9.16-3.79,10.27,10.27,0,0,1-4.94-9q0-5,5.56-8.44a18.83,18.83,0,0,1,10.17-3,20.26,20.26,0,0,1,8.08,1.77,17.83,17.83,0,0,1,6.74,4.81A.91.91,0,0,1,810.54,281.28Z"/>
    <path d="M840.83,309.94q0,1.08-3.79,1.77a26.43,26.43,0,0,1-4.78.52q-8.64,0-14.07-4.65-5.76-4.91-5.76-13.38a28.2,28.2,0,0,1,3.4-14q4.15-7.39,11.52-7.39,13.28,0,13.28,16a21.54,21.54,0,0,1-.75,4.91q-.95,3.76-2.13,3.73L823.07,297q1.28,6.84,8.24,6.84a27.52,27.52,0,0,0,8-1.7l.26-.07a.73.73,0,0,1,.82.75Q840.84,309.58,840.83,309.94ZM832,288q0-4.22-3.41-4.22-4.71,0-5.52,8l8.12-.26q.32,0,.58-1.57A12,12,0,0,0,832,288Z"/>
    <path d="M903,277.59q0,.13-9.09,33a.76.76,0,0,1-.82.59H874.83a.76.76,0,0,1-.82-.59q-8.44-32.81-8.44-33.11a.72.72,0,0,1,.82-.82l11.52.2a.73.73,0,0,1,.75.62l5.07,24.44,6.12-24.44a.72.72,0,0,1,.79-.62l11.61-.07Q903,276.77,903,277.59Z"/>
    <path d="M920.79,272.19a6.35,6.35,0,0,1-2.39,5,7.9,7.9,0,0,1-5.3,1.93,8,8,0,0,1-5.4-2,6.49,6.49,0,0,1-.07-10.11,7.94,7.94,0,0,1,5.33-1.93,8.22,8.22,0,0,1,5.45,2A6.31,6.31,0,0,1,920.79,272.19Zm-.92,11.42-.69,27.68a.73.73,0,0,1-.79.82l-11.06.07a.88.88,0,0,1-.62-.25.76.76,0,0,1-.26-.57l.46-27.94q0-.75.88-.72l11.25.13Q919.87,282.82,919.87,283.61Z"/>
    <path d="M954.36,281.28q0,.29-6.18,7.49a.75.75,0,0,1-.59.26q.29,0-3.34-1.95a14.18,14.18,0,0,0-6.58-1.95q-2.62,0-2.62,1.7,0,1.15,4.94,2.94a44.32,44.32,0,0,1,9.19,4.22q5,3.44,5,8.51,0,11.38-15.83,11.38a20.35,20.35,0,0,1-8-1.77,17.39,17.39,0,0,1-6.74-4.74.87.87,0,0,1-.2-.59.83.83,0,0,1,.2-.56l6-6.67a.75.75,0,0,1,.62-.29,28.78,28.78,0,0,0,3.47,2,13.64,13.64,0,0,0,6.15,2q2.88,0,2.88-2,0-1.34-4.91-2.85a38.56,38.56,0,0,1-9.16-3.79,10.27,10.27,0,0,1-4.94-9q0-5,5.56-8.44a18.83,18.83,0,0,1,10.17-3,20.26,20.26,0,0,1,8.08,1.77,17.83,17.83,0,0,1,6.74,4.81A.91.91,0,0,1,954.36,281.28Z"/>
    <path d="M971.79,272.19a6.35,6.35,0,0,1-2.39,5,7.9,7.9,0,0,1-5.3,1.93,8,8,0,0,1-5.4-2,6.49,6.49,0,0,1-.07-10.11,7.94,7.94,0,0,1,5.33-1.93,8.22,8.22,0,0,1,5.45,2A6.31,6.31,0,0,1,971.79,272.19Zm-.92,11.42-.69,27.68a.73.73,0,0,1-.79.82l-11.06.07a.87.87,0,0,1-.62-.25.76.76,0,0,1-.26-.57l.46-27.94q0-.75.88-.72l11.25.13Q970.88,282.82,970.88,283.61Z"/>
    <path d="M997.34,281l-.23,8.44q0,.85-.79.82l-6.45-.33.13,22.57a.76.76,0,0,1-.26.57.73.73,0,0,1-.59.21l-10.47-.07q-.82,0-.79-.79l.59-24.11-3.42-.16a.68.68,0,0,1-.74-.72q-.65-7.23-.65-7a.72.72,0,0,1,.85-.82l4,.2-.26-9.85a.71.71,0,0,1,.26-.56.92.92,0,0,1,.63-.23l10.23.07q.72,0,.72.79v.1l-.72,9.68,7.23.43A.7.7,0,0,1,997.34,281Z"/>
  </g>
  <g>
    <path d="M964.86,575.09a1.84,1.84,0,0,1-2,1.82l-32,1.27a1.79,1.79,0,0,1-2-1.27l-16.53-47.3-15.82,47.14a1.88,1.88,0,0,1-2,1.42l-30.77-1.27a1.6,1.6,0,0,1-1.74-1.66l-10.6-109.64a1.75,1.75,0,0,1,2-2h26.26a1.69,1.69,0,0,1,1.9,1.82l4.9,69.69,13.13-58.38a1.63,1.63,0,0,1,1.74-1.42h22.07a1.72,1.72,0,0,1,1.9,1.42l12.5,58.38,5.38-70.32a1.72,1.72,0,0,1,2.06-1.82l26.42,1.34a1.69,1.69,0,0,1,1.82,1.9Z"/>
    <path d="M1084.77,524.08q0,23.18-13.84,40.1-14.71,18.11-37.41,18.11-26.5,0-41.61-16.29-14.71-15.82-14.71-42.56,0-26.1,15.42-43.51,16.06-18.19,41.92-18.19,22.94,0,37.26,20.25Q1084.77,500.19,1084.77,524.08Zm-31.8.87a30.93,30.93,0,0,0-5.54-18q-6.17-8.86-15.82-8.86t-15.74,8.86a32.4,32.4,0,0,0,0,36q6.09,8.94,15.74,8.94t15.82-8.94A30.8,30.8,0,0,0,1053,524.95Z"/>
    <path d="M1185.63,576.13q0,1.82-2,1.9l-31.88,1.34a2.11,2.11,0,0,1-1.82-.87L1127.49,548l-.4,27.05q0,1.9-1.74,2l-30.29,2q-2.14.08-2.14-2l-.47-112.56a2,2,0,0,1,1.66-2q6.33-2.14,25.87-2.14,34.33,0,48.65,16.37A40.37,40.37,0,0,1,1179,504a43.31,43.31,0,0,1-5.26,20.68,45.46,45.46,0,0,1-14.2,16.1l25.63,34A2.45,2.45,0,0,1,1185.63,576.13Zm-40.18-67.24a13.43,13.43,0,0,0-5.3-11.07,20.55,20.55,0,0,0-11.87-4.19l-.47,32.12Q1145.44,522.89,1145.44,508.89Z"/>
    <path d="M1273.43,571.7q0,2-2.13,2h-75.15a1.79,1.79,0,0,1-2-2l-.79-106.23a1.8,1.8,0,0,1,2-2l30.44-.63q1.9,0,1.91,2v82.9h43.59q2.14,0,2.13,2Z"/>
    <path d="M1374.84,521q0,33.86-30.14,49.44-23.18,12-60.59,12a1.75,1.75,0,0,1-2-2V461.59a1.75,1.75,0,0,1,2-2q37.43,0,60.57,12Q1374.84,487.22,1374.84,521Zm-35.36,0a31.91,31.91,0,0,0-5.3-18q-6.09-9.18-15.74-9.18V548.2q9.73,0,15.74-9.1A32,32,0,0,0,1339.48,521Z"/>
  </g>
  <text transform="translate(750 830.17)" font-size="48"  text-anchor="middle" font-weight="700">An interactive demo of GreenSock's new CustomWiggle</text>
  <text transform="translate(133.88 349) rotate(-94.74)" font-size="57"  font-weight="700">S</text>
  <text transform="translate(131.75 319.76) rotate(-88.47)" font-size="57"  font-weight="700">t</text>
  <text transform="matrix(0.13, -0.99, 0.99, 0.13, 131.9, 302.73)" font-size="57"  font-weight="700">o</text>
  <text transform="translate(135.25 276.64) rotate(-75.26)" font-size="57"  font-weight="700">p</text>
  <text transform="matrix(0.34, -0.94, 0.94, 0.34, 142.32, 250.96)" font-size="57"  font-weight="700"> </text>
  <text transform="translate(146 240.02) rotate(-65.09)" font-size="57"  font-weight="700">s</text>
  <text transform="translate(156.05 218.66) rotate(-59.48)" font-size="57"  font-weight="700">t</text>
  <text transform="matrix(0.58, -0.82, 0.82, 0.58, 164.77, 203.83)" font-size="57"  font-weight="700">r</text>
  <text transform="translate(173.94 190.27) rotate(-48.97)" font-size="57"  font-weight="700">u</text>
  <text transform="translate(191.17 170.36) rotate(-41.77)" font-size="57"  font-weight="700">g</text>
  <text transform="translate(210.77 152.76) rotate(-34.56)" font-size="57"  font-weight="700">g</text>
  <text transform="translate(232.83 137.91) rotate(-29.18)" font-size="57"  font-weight="700">l</text>
  <text transform="matrix(0.9, -0.43, 0.43, 0.9, 244.01, 131.65)" font-size="57"  font-weight="700">i</text>
  <text transform="translate(255.16 125.88) rotate(-20.22)" font-size="57"  font-weight="700">n</text>
  <text transform="translate(279.83 116.72) rotate(-12.93)" font-size="57"  font-weight="700">g</text>
  <text transform="translate(305.85 111.06) rotate(-7.66)" font-size="57"  font-weight="700"> </text>
  <text transform="translate(317.01 108.87) rotate(-1.42)" font-size="57"  font-weight="700">w</text>
  <text transform="translate(351.41 108.57) rotate(4.93)" font-size="57"  font-weight="700">i</text>
  <text transform="translate(364.1 109.55) rotate(9.05)" font-size="57"  font-weight="700">t</text>
  <text transform="translate(380.96 111.93) rotate(15.08)" font-size="57"  font-weight="700">h</text>
  <text transform="translate(406.55 119.14) rotate(20.35)" font-size="57"  font-weight="700"> </text>
  <text transform="translate(417.51 122.88) rotate(25.31)" font-size="57"  font-weight="700">y</text>
  <text transform="matrix(0.85, 0.53, -0.53, 0.85, 439.19, 132.98)" font-size="57"  font-weight="700">o</text>
  <text transform="matrix(0.77, 0.64, -0.64, 0.77, 461.5, 146.97)" font-size="57"  font-weight="700">u</text>
  <text transform="translate(481.85 163.98) rotate(45.32)" font-size="57"  font-weight="700">r</text>
  <text transform="matrix(0.65, 0.76, -0.76, 0.65, 493.52, 175.87)" font-size="57"  font-weight="700"> </text>
  <text transform="matrix(0.57, 0.82, -0.82, 0.57, 501.47, 184.04)" font-size="57"  font-weight="700">w</text>
  <text transform="matrix(0.47, 0.88, -0.88, 0.47, 520.49, 212.65)" font-size="57"  font-weight="700">i</text>
  <text transform="translate(526.73 223.56) rotate(67.31)" font-size="57"  font-weight="700">g</text>
  <text transform="translate(536.95 247.8) rotate(74.6)" font-size="57"  font-weight="700">g</text>
  <text transform="translate(543.73 273.52) rotate(80.02)" font-size="57"  font-weight="700">l</text>
  <text transform="translate(546.2 285.84) rotate(85.11)" font-size="57"  font-weight="700">e</text>
  <text transform="translate(548.31 310.01) rotate(91.58)" font-size="57"  font-weight="700">s</text>
  <g>
    <g>
      <path d="M233.26,492.68c-5.89-6.87-5.83-20.66-2.33-18.68s4.74,8.81,4.74,8.81c-1-6.38,2.11-16.1,4.87-12.53s1.49,13,1.49,13c1-6.27,5-13.84,7.41-10.89s-.37,9.4-1.66,13.43c5.55-4.31,11.61-4.75,8.93.53s-9.52,7.7-11,8.27S237.3,496.82,233.26,492.68Z" fill="#f37a54" fill-rule="evenodd"/>
      <path d="M260.92,582.33c-10.39-28.11-15.63-59.23-12.26-88.33-3.48-2.47-12.49-2.35-16.53.66a307.65,307.65,0,0,0,18.72,91.5Z" fill="#3d3838"/>
    </g>
    <g>
      <path d="M435.46,492.68c5.89-6.87,5.83-20.66,2.33-18.68s-4.74,8.81-4.74,8.81c1-6.38-2.11-16.1-4.87-12.53s-1.48,13-1.48,13c-1-6.27-5-13.84-7.41-10.89s.37,9.4,1.66,13.43c-5.54-4.31-11.61-4.75-8.93.53s9.52,7.7,11,8.27S431.42,496.82,435.46,492.68Z" fill="#f37a54" fill-rule="evenodd"/>
      <path d="M407.8,582.33c10.39-28.11,15.63-59.23,12.26-88.33,3.48-2.47,12.49-2.35,16.53.66a307.65,307.65,0,0,1-18.72,91.5Z" fill="#3d3838"/>
    </g>
    <g>
      <path d="M268.93,155.21c95.26-36.56,202.16,11,238.71,106.31s-11,202.15-106.31,238.71S199.17,489.18,162.62,393.92,173.67,191.76,268.93,155.21Z" fill="#0099d4" fill-rule="evenodd"/>
      <path d="M356.86,257.62l.19-.36,0,.77.16,7.83-1.38,7.87L351,274.81l6.8,5,18.47,7,8.74,7.93,8.33,6.86,9.73,5.92,10.42,7,5.58,4.66,10.69,9.49,12.08-12,7.44-17,5.12-8.22L456,280.84,455.49,266l-8-1.28L439.71,263l-5.57,10-11.27-7.64-15.76-8.23L405.76,255l10-1.34-4.26-1.79,4,1.61,11.73,4.95,9.73-7.13,9.18,4.84,10.6-7.53,6.51-4.06,11,7.75,5.84-.14.24-4.85,7.53,8.33,20,28.2,6.08,7.63q.1-5.26-.06-10.44A184.85,184.85,0,0,0,331,143l-6.3,5.12L320.47,153,315,155.73l-4.85,7-9.49,6.7-10-3.44,7.38-1.27,7.93-4.4-9-.37-15.48,1.52-13.86,10.15-14,14.41-6.9,12.92,8.17-.62,4.62,1.08,5,4.68,7.32-10.76,1.07-5.51L271.26,181l12.4-8.49-1,2-4.36,8.61,7.37,0,8.39-2.34L288,186.92,282,194.29l-7.16,11.18-11.41,5.94-6,.38-2.25-7.09-4.3,8-6.81,10.16-12.81,12.53-8.72,3.07L221,245l7,9.41-7.44,7.28-11.65.73-4.42,13.39L203,288.58l5.84,1.72,1.86,1.12,2-1.71,9-.76,7.1-8.84,3-10.45,4.95-7.95,6.45-7.57,7.24-2.85L257.6,247l12.28,9.22,8.57,5.21,3.68,4.64,1.75-6,1-3.24,3.3-.24L285,252.38l-14.63-3.5-8.23-7.31,6.48-4.66,7.49,6.1,12.68,6.55,5.8,5.59,3.09,7.18,7.73,3,3-6.2,3.4-2.26-9.52-7.15,2-3.82,9.71-2.78,6.52-3-5.72,8,10.92,8.32,10.12-4.36,8.08.57,4.11-6.95,6.14-1.4-.06.09.11,5.28,2.64,7.87Zm54.86,238.24q-5.1,2.32-10.39,4.36a186.7,186.7,0,0,1-19.49,6.27l-9.93-3.88-7-3.83-4.74-3.35-17-6.24-9-17.2-.44-8.74-25.73-18.47-9.61-4.74-3.57-15.49-16-2.15-11.21-7.66-14.41,14.71-7.76-4.84-6.28-3.3-15.51,2.15-29.45-35.1-3.6-41.15,8.06-23.47,8.6-19.62,8.53-8.85,9.34-.73,16.77-12.82L256.23,278l7.48-2.4.4,8.82L269,294.67l17.8-1.66,11.6,4.79,6-4.88L314,282.58l20.55,1.63,10.93-7.73,5.29,5.31,8.94,4.59L375.4,302.1l10.48,7.53L397.3,321l7.66,5.49,9.86,4.51,11,3.63,1.2,5,2.38.65,8.12.59,8.86-10.13,7.55-8.06,1.89,22.93-9.69,33.56-10.92,39.2,3.29,29.06L426,464.06l-4.29,14.43-8,9c-1.18,1.32-1.5,5.47-2,8.39Zm44.34-39.06,6-6.37,5.69-13.26,6.6-20.41-5.63-5.66-5.85,15-6,7.25L454.3,443.4l1.75,13.4ZM279.81,271.55l-.19,3-3.5-.29-6-.52-.11-3.83,7-2.93,2.08,1.17.71,3.43Zm-25-1.41-.93-6.31,3.12-2.46.41,5.93-2.61,2.84ZM230.5,215l1.62,3.87,5,1.95-4.22,6.85-10.23,6.88-3.69.8,1.69-3.34,2.22-5,3.07-5.26-2.92-5.68,4.06-10.6,3.63,1.33-.29,5.07,0,3.11ZM212,232.12l1.18-8.75,4.38-5.35,2.81,4.15-2.77,7.45-5.62,2.5Zm9.13-34-7.6-2.32,12-7.59,1.74,3.14-6.14,6.78ZM375.79,194l0,.27,1.61,7.17,3,2.67,8,1.39,1.83,1.44.77,1.07.51.94,7.22,8.58,3.06,3-.47,3.38H388.31l-3-9.47-14.64-6-7.1-2.78L368,195.36l5.27-3.93,2.52,2.55Zm-52.71,42.41-4.51-2.21-5.14-.68,1.49-7.78,6.52-11.27,5.07.84-1.71,5.62,7.77,2,2.12-5.43-.19-1.9-3.37-2.24,7.6-5.63,2.19,4.46,7.29,3.46,7.63,12.1-15.5,1.12-6.67,2.22L326.76,235Z" fill="#7ec252" fill-rule="evenodd"/>
    </g>
    <path d="M333.62,466c37.73,0,69,26.56,78.53,61.23a9.24,9.24,0,0,1,3.22-1.41c5.83-1.31,11.83,3.26,13.39,10.21s-4.08,14.13-7.74,15-3,.28-4.43-.09c1.36,10.57,2,13,1.9,23.91a217.14,217.14,0,0,1-6.82,53c-15.83,59.9-144.86,56.19-155.71-2.19A355.23,355.23,0,0,1,250,575c-.43-11-.21-13.46.9-24.17a9.31,9.31,0,0,1-4.31.06c-5.84-1.31-9.3-8-7.74-15s10-11,13.4-10.21,2,.63,2.86,1.18C264.69,491.87,296.33,466,333.62,466Z" fill="#f37a54" fill-rule="evenodd"/>
    <path d="M418.39,580.17a214.41,214.41,0,0,1-6.7,47.56c-15.83,59.9-144.86,56.19-155.71-2.19a363,363,0,0,1-5.8-46.65C299.33,605.26,371.28,604.63,418.39,580.17Z" fill="#3d3838" fill-rule="evenodd"/>
    <path d="M410.2,632.28c-20.27,53.16-135.11,50.39-152.68-.92C301.8,656.08,375,654.52,410.2,632.28Z" fill="#3d3838" fill-rule="evenodd"/>
    <path d="M255.06,527.08c15.05-.64,27.08-12,32-31.52,27.75,30.21,69.57,14.56,107.35,17.56,1.65,6.79,8.08,16.16,17.72,14C402.59,492.47,371.32,466,333.62,466,296.29,466,264.6,491.94,255.06,527.08Z" fill="#3d3838" fill-rule="evenodd"/>
    <path d="M305.42,521.34s10.11,13.71,21.39,14.66l3.24-8.37S322.23,532.22,305.42,521.34Z" fill="#3d3838" fill-rule="evenodd"/>
    <polygon points="283.58 491.48 269.91 486.83 280.74 486.32 274.04 475.49 287.19 484 289.77 471.36 291.83 484.77 283.58 491.48" fill="#3d3838" fill-rule="evenodd"/>
    <polygon points="327.43 598.41 322.08 609.37 330.98 613.56 338.13 613.43 346.39 609.31 340.58 598.41 327.43 598.41" fill="#fff" fill-rule="evenodd"/>
    <polygon points="330.98 613.47 321.63 633.87 334.91 644.06 348.19 633.22 338 613.24 334.29 612.71 330.98 613.47" fill="#fff" fill-rule="evenodd"/>
    <g>
      <path d="M279.51,720.24c-3.6-1.5-63-19.19-68.68,13.2,23.44,1.7,47.78-1.1,66.73-3.9l-.3,3.9h21.14l-1.2-8.7Z" fill="#3d3838" fill-rule="evenodd"/>
      <path d="M310.41,668.06c-4.25-5.05-13.52-9.37-19.11-9.54-9.07,7-22.71,13.27-32.64,17.69,7.92,12.61,15.7,31.26,14.5,41.82,5.56,6.57,15.63,10.91,25.72,11.51-6.54-17.68-21-37.94-27.19-48.84A212.1,212.1,0,0,1,310.41,668.06Z" fill="#3d3838" fill-rule="evenodd"/>
    </g>
    <path d="M333.78,577.81c11.6,0,31.31-9.47,30.66,3.3-.64,12.56-19.47,7.63-29.21,7.84s-30.86,6.79-32.51-7.63S322.18,577.81,333.78,577.81Z" fill="#fff" fill-rule="evenodd"/>
    <path d="M333.78,576.94a64.2,64.2,0,0,0,11.76-1.69c4.54-.92,9-1.84,12.58-1.66,4.5.23,7.46,2.12,7.18,7.56-.46,9-9.16,9.8-18,9.35-1.68-.09-3.29-.21-4.85-.33-2.67-.21-5.19-.4-7.23-.36s-4.53.36-7.27.71c-10.78,1.37-24.71,3.15-26.12-9.11-.65-5.66,1.85-7.87,6-8.34,3.73-.43,8.81.73,13.91,1.89,4.31,1,8.64,2,12.06,2Zm12.11,0a65.61,65.61,0,0,1-12.11,1.74c-3.6,0-8-1-12.44-2-5-1.13-9.88-2.26-13.33-1.86-3.06.35-4.93,2-4.43,6.42,1.2,10.52,14.16,8.87,24.18,7.59,2.79-.35,5.36-.68,7.45-.73s4.71.15,7.4.36c1.6.12,3.25.25,4.81.33,7.94.41,15.77-.22,16.16-7.7.21-4.14-2.07-5.57-5.54-5.75S350.32,576,345.88,576.94Z" fill="#3d3838"/>
    <path d="M360.86,521.34s-10.1,13.71-21.38,14.66l-3.24-8.37S344.06,532.22,360.86,521.34Z" fill="#3d3838" fill-rule="evenodd"/>
    <path d="M303,578.84a99.34,99.34,0,0,0,31.65,4.81,81.46,81.46,0,0,0,29.42-5.5l.66,2.43c-9.18,3-19.44,4.23-30,4.49-10.93.27-22.2-.82-31.72-3.64Z" fill="#3d3838"/>
    <path d="M325.73,557.94c-6.86,6.28.07,14.53,7.43,14.8,9.06.33,15.06-9.73,7.35-16.11,9.42,5.18,4.07,18.39-7.44,18.18-6.22-.11-11.21-4.83-11.53-9.66C321.37,562.54,322.38,559,325.73,557.94Z" fill="#3d3838"/>
    <g>
      <path d="M327,550c-6.79-14.77-26.36-14.17-33.6-.18C295.43,531.6,326,529.38,327,550Z" fill="#3d3838"/>
      <path d="M339.21,550c6.79-14.77,26.36-14.17,33.6-.18C370.81,531.6,340.28,529.38,339.21,550Z" fill="#3d3838"/>
    </g>
    <g>
      <path d="M388.26,720.24c3.6-1.5,63-19.19,68.68,13.2-23.44,1.7-47.78-1.1-66.73-3.9l.3,3.9H369.36l1.2-8.7Z" fill="#3d3838" fill-rule="evenodd"/>
      <path d="M357.35,668.06c4.25-5.05,13.52-9.37,19.11-9.54,9.07,7,22.71,13.27,32.63,17.69-7.92,12.61-15.7,31.26-14.5,41.82C389,724.6,379,728.94,368.88,729.54c6.54-17.68,21-37.94,27.19-48.84A212.11,212.11,0,0,0,357.35,668.06Z" fill="#3d3838" fill-rule="evenodd"/>
    </g>
  </g>
   <g id="startButton">
    <rect id="startRectangle" x="478.47" y="875.17" width="543.07" height="85" rx="10" ry="10" fill="#59a91b"/>
  <text transform="translate(750 940.17)" text-anchor="middle" font-size="67" fill="#fff"  font-weight="700">BEGIN DEMO</text>
	</g>
	  <g id="sweat">
    <path d="M376.43,522.73s9.89-2.16,14,8.23c1.38,3.48-2.78,6.08-5.5,3.41C381.64,531.14,381.84,526.95,376.43,522.73Z" fill="#8dd7f7" fill-rule="evenodd"/>
    <path d="M290.57,522.73s-9.89-2.16-14,8.23c-1.38,3.48,2.78,6.08,5.5,3.41C285.37,531.14,285.16,526.95,290.57,522.73Z" fill="#8dd7f7" fill-rule="evenodd"/>
    <path d="M333,518.32s9.73,2.79,8.41,13.89c-.44,3.71-5.33,4-6.46.39C333.57,528.2,335.75,524.6,333,518.32Z" fill="#8dd7f7" fill-rule="evenodd"/>
    <path d="M379.37,542.52s9.89,2.12,9.34,13.28c-.19,3.74-5,4.39-6.42.83C380.64,552.33,382.56,548.6,379.37,542.52Z" fill="#8dd7f7" fill-rule="evenodd"/>
    <path d="M376.24,569.31s9.16,4.31,6.09,15.06c-1,3.6-5.91,3.13-6.44-.65C375.25,579.16,378,576,376.24,569.31Z" fill="#8dd7f7" fill-rule="evenodd"/>
    <path d="M272.72,542.52s-9.9,2.12-9.34,13.28c.18,3.74,5,4.39,6.42.83C271.46,552.33,269.54,548.6,272.72,542.52Z" fill="#8dd7f7" fill-rule="evenodd"/>
    <path d="M282.28,562.58s-9.4,3.76-7,14.67c.81,3.65,5.71,3.48,6.47-.26C282.68,572.47,280.16,569.11,282.28,562.58Z" fill="#8dd7f7" fill-rule="evenodd"/>
  </g>
</svg>

	
<div id="controls">
<svg id="wiggleGraph" xmlns="http://www.w3.org/2000/svg" width="250" height="100" viewBox="0 0 250 100">
<rect width="250" height="100" fill="#262626" rx="8" ry="8"/>
	<path id="wigglePath" fill="none" stroke="#eee" stroke-width="2" opacity="0.75"></path>
</svg>
<div id="runButton">Wiggle 'em!</div>
<div id="viewBoxControls">
	<h4>viewBox Zoom</h4>
	<div class="vbControl"  data-view = "0 0 750 500">1</div>
	<div class="vbControl"  data-view = "750 0 750 500">2</div>
	<div class="vbControl"  data-view = "0 500 750 500">3</div>
	<div class="vbControl"  data-view = "750 500 750 500">4</div>
	<div class="vbControl vbControlFull"  data-view = "0 0 1500 1000">Full Grid</div>
</div>

<div id="wiggleDragWrap" class="dragWrap">
	<div id="wiggleNumber">Wiggles: <strong>10</strong></div>
	<svg xmlns="http://www.w3.org/2000/svg" width="200" height="10" viewBox="0 0 200 10">
	<rect y="5" x="0" width="200" height="5"/>
	<rect width="4" height="10" x="0" y="0"/>
	<rect width="4" height="10" x="46" y="0"/>
	<rect width="4" height="10" x="96" y="0"/>
	<rect width="4" height="10" x="147" y="0"/>
	<rect width="4" height="10" x="196" y="0"/>
	</svg>

	<div class="dragBounds">
	<div class="dragger wiggleDragger"></div>
	</div>
</div>

<div id="timeDragWrap" class="dragWrap">
<div id="timeNumber">Tween Duration: <strong>1.0</strong></div>
	<svg xmlns="http://www.w3.org/2000/svg" width="200" height="10" viewBox="0 0 200 10">
	<rect y="5" x="0" width="200" height="5"/>
	<rect width="4" height="10" x="0" y="0"/>
	<rect width="4" height="10" x="48" y="0"/>
	<rect width="4" height="10" x="98" y="0"/>
	<rect width="4" height="10" x="147" y="0"/>
	<rect width="4" height="10" x="196" y="0"/>
	</svg>
	<div class="dragBounds">
	<div class="dragger timeDragger"></div>
	</div>
</div>
	
<div id="easeControl">
	<div class="easeButton" data-ease = "easeOut" >Ease Out</div>
	<div class="easeButton" data-ease = "easeInOut" >Ease In/Out</div>
	<div class="easeButton" data-ease = "anticipate">Anticipate</div>
	<div class="easeButton" data-ease = "uniform">Uniform</div>
	<div class="easeButton" data-ease = "random">Random</div>
</div>

<div class="currentEase">Ease: <strong>easeOut</strong></div>
						
</div>
              
            
!

CSS

              
                body, html {
	width:100%;
	height:100%;
	overflow: hidden;
	margin: 0;
	padding: 0;
	border: 0;
		
}

#demo, #intro {
	font-family: 'Roboto', sans-serif;
	position: absolute;
	left:50%;
	opacity: 0;
	visibility: hidden;
	overflow: hidden;
	
}

#startButton {
	cursor:pointer;
}



/* =======================================
 	draggers for wiggles and duration    
 =========================================*/

.dragWrap {
	width: 250px;
	height: 60px;
	position: absolute;
	left: 100px;
	padding: 3px 0 26px 0;
	border-radius: 4px;
	background-color:rgba(255,255,255,1.0);
	border: solid 1px rgba(0,0,0,0.25);
}

#wiggleDragWrap {
	top: 15px;
}

#timeDragWrap {
	top: 115px;
}

.dragWrap svg {
	position: absolute;
	bottom: 24px;
	left: 25px;
	opacity: 0.20;
}

.dragger {
	width:40px;
	height: 50px;
	position: absolute;
	top:4px;
	left:0;
	z-index: 105;
}

.wiggleDragger {
	background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/wiggleDrag.svg");
}

.timeDragger {
	background: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/314556/timeDrag.svg");
}

.dragBounds {
	width:238px;
	height: 60px;
	position:absolute;
	left: 6px;
	top: 0;

}

#wiggleGraph {
	position: absolute;
	right: 10px;
	top: 15px;
}


/* =======================================
 	dynamic readout for wiggles and duration   
 =========================================*/

#wiggleNumber, #timeNumber {
	position: absolute;
	bottom: 2px;
	right: 25px;
	font-size: 14px;
	text-align: right;

}

/* =======================================
 	easing choices    
 =========================================*/
#easeControl {
	width:116px;
	position: absolute;
	top: 15px;
	left: 360px;

}

.easeButton {
	width: 110px;
	padding: 0 5px;
	margin-bottom: 3px;
}

.currentEase {
	position: absolute;
	right: 10px;
	top: 120px;
}

/* =======================================
 	parent wrapper for all controls    
 =========================================*/
#controls {
	font-family: 'Roboto', sans-serif;
	font-weight: 700;
	width:740px;
	border-radius: 4px;
	position: absolute;
	left:50%;
	text-align: center;
	background-color: #E4E4E4;
	padding: 10px 0;
	height: 200px;
	z-index: 100;
	opacity: 0;
	visibility: hidden;
}
#controls h4 {
	line-height: 18px;
	font-size: 16px;
	margin:4px 0;
	font-weight: 700;
}

/* =======================================
 	viewbox Controls    
 =========================================*/

#viewBoxControls {
	width:78px;
	position: absolute;
	left: 10px;
	top:10px;
}
.vbControl {
	width:36px;
	margin: 0 2px 2px 0;
	float: left;
}

.vbControl.vbControlFull {
	width:74px; /* 'full grid' button is larger than the other 4 viewBox controls */
}

/* =======================================
 	universal button styling and hover color for buttons  
 =========================================*/

.vbControl, .easeButton {
	height:36px;
	font-size: 14px;
	box-sizing: border-box;
	border: solid 1px #B8ABA4;
	line-height:36px;
	cursor: pointer;
	border-radius: 4px;
	background: #ffffff;
	background: -moz-linear-gradient(top,  #ffffff 0%, #f6f6f6 47%, #ededed 100%);
	background: -webkit-linear-gradient(top,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
	background: linear-gradient(to bottom,  #ffffff 0%,#f6f6f6 47%,#ededed 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ededed',GradientType=0 );
}

.vbControl:hover, .easeButton:hover {
	background: #262626;
	color: #fff;
}

/* =======================================
 	master Run button   
 =========================================*/

#runButton {
	width: auto;
	height: auto;
	position: absolute;
	right: 10px;
	bottom:10px;
	color: white;
	font-size: 24px;
	line-height: 36px;
	padding: 4px 10px;
	cursor:pointer;
	font-weight:700;
	background: #8fc400;
	border: solid 1px #B8ABA4;
	border-radius: 4px;	
	background: -moz-linear-gradient(top,  #8fc400 0%, #8fc400 100%);
	background: -webkit-linear-gradient(top,  #8fc400 0%,#8fc400 100%);
	background: linear-gradient(to bottom,  #8fc400 0%,#8fc400 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#8fc400', endColorstr='#8fc400',GradientType=0 );
}

#runButton:hover {
		background: #262626;
}
              
            
!

JS

              
                /*
This is a basic demo of GreenSock's new CustomWiggle
It's just the tip of the iceberg
It goes a lot deeper with amplitudeEase and timingEase
For more info, check out https://greensock.com/wiggle-bounce
CustomWiggle is dependent on CustomEase
https://greensock.com/customease

The graph will update after choosing an ease or setting the
wiggle slider. Lower numbers of wiggles usually look best,
but it all depends on your needs so it goes to 100.
There's a lot to watch so the the SVG viewBox is zoomable

If you like this demo, check me out on Twitter: @Craig_PointC
or stop by the GreenSock forums and say hi.

Have fun.	
*/




$( document ).ready(function() {

var intro = document.getElementById("intro");
var demo = document.getElementById("demo");
var $controls = $("#controls");
var $dragger = $(".dragger");
var $dragBounds = $(".dragBounds");
var wg = 10; // initial wiggles
var easeType = "easeOut"; // initial ease selection
var $easeButton = $(".easeButton");
var regularBorder = "#B8ABA4"; // non active button border
var activeBorder = "#8fc400"; // currently selected option
var tweenTime = 1; // initial tween duration
var staggerOffset = 0.1;
var $vbButton = $(".vbControl");
var dragFunctions = [wiggleDrag, timeDrag];
var introAnim = new TimelineMax({repeat:-1, repeatDelay:1});
var fadeAnim = new TimelineMax({paused:true});


// create the wiggle based on number of wiggles var and ease type
// update the path to show the wiggles
function wiggleReady () {
	CustomWiggle.create("demoWiggle", {wiggles:wg, type:easeType});
	CustomEase.getSVGData("demoWiggle", {width:248, height:46, x:1, y:3, path:"#wigglePath"});
}

// create intro wiggle and letter animation 
CustomWiggle.create("introWiggle", {wiggles:10, type:"anticipate"});
introAnim.staggerTo("#wordWiggle path", 1, {transformOrigin: "center center",  cycle:{y:[20, -20], scale:[1.25, 0.75]}, rotation: 10, ease:"introWiggle"}, 0.25);

// make that little dude sweat
$("#sweat path").each(function(i, element) {
  	tl = new TimelineMax({ delay: i * 0.15, repeat:-1 });
  	tl.fromTo(element, 1, {scale:0, autoAlpha:0}, {scale:1, autoAlpha:1, ease:Power4.easeOut});
	  tl.to(element, 1.5, {y:700, ease:Power4.easeIn}, 0.1);
	  element.anim = tl;
})

// create fade timeline between scenes
fadeAnim.to(intro, 0.75, {autoAlpha:0})
fadeAnim.to([demo, $controls], 0.75, {autoAlpha:1},"-=0.25")

$( "#startButton" ).hover(
  function() {
    TweenMax.set("#startRectangle", {fill:"#262626"});
  }, function() {
    TweenMax.set("#startRectangle", {fill:"#59a91b"});
  }
);

// start the cross fade
$("#startButton").click(function() {
	introAnim.pause().seek(0);
	for (i=0; i<7; i++) {
	 $("#sweat path")[i].anim.pause().seek(0);
	}
	fadeAnim.play();
})

// basic positioning of elements and setting origins
TweenMax.set([$controls, demo, intro], {transformOrigin:"center", xPercent:-50});
TweenMax.set([ $vbButton[4], $easeButton[0] ], {borderColor:activeBorder}); // highlight initial settings as active buttons
TweenMax.set("#topHand, #ufo", {transformOrigin: "center bottom" });
TweenMax.set("#woof path, #sweat path", {transformOrigin: "center top" });
TweenMax.set("#bottomHand", {transformOrigin: "right bottom" });
TweenMax.set("#tail", {transformOrigin: "left bottom" });
TweenMax.set(".dragger", {x:18});
TweenMax.set(intro, {autoAlpha:1});

//let's make some draggables
$dragger.each(function(i, element) {
	Draggable.create(this, {
	type:"x",
	bounds: $dragBounds[i],
	onDrag: dragFunctions[i],
	onDragEnd: wiggleReady
		
		});  // end draggable create

});// end dragger each


// update the wiggle slider value
function wiggleDrag() {
	wg = ((this.x/2)+1).toFixed();
	$( "#wiggleNumber strong" ).html( wg );
}

// update the tween duration value
function timeDrag() {
	tweenTime = ((this.x/36)+0.5).toFixed(1);
	$( "#timeNumber strong" ).html( tweenTime );
}

//switch the ease type and highlight the active button
$easeButton.click(function() {
	easeType = this.getAttribute("data-ease");
	$( ".currentEase strong" ).html( easeType );
	TweenMax.set($easeButton,{borderColor:regularBorder});
	TweenMax.set(this, {borderColor:activeBorder});
	wiggleReady(); // update graph
})

//animate the viewBox and highlight the active button
$vbButton.click(function() {
	var newView = this.getAttribute("data-view");
	TweenMax.to(demo, 1, {attr:{viewBox:newView}, ease:Power4.easeInOut});
	TweenMax.set($vbButton,{borderColor:regularBorder})
	TweenMax.set(this, {borderColor:activeBorder});
})

//let's see some some elements wiggle Yay!
$("#runButton").click(function() {
	
	if (TweenMax.isTweening("#topHand") === false) {
			TweenMax.to("#topHand", tweenTime, {scale:1.05, y:-5, x:-5, ease:"demoWiggle" });
			TweenMax.to("#bottomHand", tweenTime, {scale:0.95, y:5, x:5, ease:"demoWiggle" });
			TweenMax.to("#bravo", tweenTime, {opacity:0, ease:"demoWiggle" });
			TweenMax.to("#clapLines", tweenTime, {autoAlpha:0, ease:"demoWiggle" });
			TweenMax.to("#tail", tweenTime, {rotation:-25, ease:"demoWiggle" });
			TweenMax.staggerTo("#woof path", tweenTime - (staggerOffset * 4), {rotation:15, ease:"demoWiggle" }, staggerOffset);	
			TweenMax.to("#ufo", tweenTime, {x:275, rotation:15, scale:0.5, ease:"demoWiggle" });
			TweenMax.staggerTo("#basics circle", tweenTime - (staggerOffset * 4), {x:200, ease:"demoWiggle" }, staggerOffset);
	}

});



// resize everything 
function sizeAll() {
	var h = window.innerHeight;
	var	w = window.innerWidth;
	
	if ( w > h*1.5) {
		TweenMax.set(intro, {height:h, width:h*1.5});
	} else {
		TweenMax.set(intro, {y:0, width:w-10, height:w/1.5});
	}
	
	
	if ( w > (h-250)*1.5) {
		TweenMax.set(demo, {height:h-250, width:(h-250)*1.5});
		TweenMax.set($controls, {y:h-240});	
	}	else {
		TweenMax.set(demo, {y:0, width:w-10, height:w/1.5});
		TweenMax.set($controls, {y:w/1.5+10});	
	}
}


$(window).resize(sizeAll);

wiggleReady();
sizeAll();



// end doc ready
});
	
	



              
            
!
999px

Console