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

              
                 <body onload="init();">
    <div id="Scene_1" style="visibility : hidden; width: 100%; height: 100%" class="scene">
      <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 800 500" width="100%" height="100%">
        <defs>
          <clipPath id="clipgroup_clip">
            <path id="clipgroup_clipGeometry" transform="matrix(0.01 0 0 0.01 387.9662 149.9072)" data-transform="6.6143 -9.2601 0.01 0.01 0 0 0" data-pivot="385.2039 160.775" d="M285.9888,160.775A99.2151,94.5851 0 0 1 385.2039,66.19A99.2151,94.5851 0 0 1 484.4189,160.775A99.2151,94.5851 0 0 1 385.2039,255.3601A99.2151,94.5851 0 0 1 285.9888,160.775z"/>
          </clipPath>
          <clipPath id="clipgroup__0_clip">
            <path id="clipgroup__0_clipGeometry" transform="matrix(0.01 0 0 0.01 388.5548 370.0192)" data-transform="0 0 0.01 0.01 0 0 0" data-pivot="392.4796 373.7568" d="M67.7155,373.7568A324.7641,318.1497 0 0 1 392.4796,55.607A324.7641,318.1497 0 0 1 717.2437,373.7568A324.7641,318.1497 0 0 1 392.4796,691.9065A324.7641,318.1497 0 0 1 67.7155,373.7568z"/>
          </clipPath>
        </defs>
        <g id="Layer_1">
          <g id="clipgroup" clip-path="url(#clipgroup_clip)" opacity="0" data-pivot="383.4239 151.3587">
            <ellipse id="ellipse" transform="matrix(0.01 0 0 0.01 387.9662 149.9072)" data-transform="6.6143 -9.2601 0.01 0.01 0 0 0" data-pivot="385.2039 160.775" cx="385.2039" cy="160.775" rx="99.2151" ry="94.5851" fill="none" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1" stroke-dasharray="none"/>
            <path id="dolphin1" d="M331.7505,178.6029C328.3965,168.5699 327.4335,158.3059 328.5625,148.4409C317.3795,141.3179 299.6465,155.3449 298.4935,150.1759C303.1605,133.2369 315.8665,125.2799 335.7815,116.8259C343.1455,93.9759 364.2315,80.5199 384.8375,76.9919C398.2105,74.6919 409.0575,77.1939 417.3525,90.1109C424.5375,86.7709 436.2145,85.0719 441.9065,91.4699C448.5785,101.5819 419.5525,116.5789 400.0525,131.9799C402.6445,147.9409 397.8635,159.7219 388.4345,168.7769C390.1635,160.4369 389.6745,153.4009 384.4745,149.1699C384.3845,149.2809 384.2935,149.4089 384.2065,149.5229C384.1555,149.5429 384.1215,149.5699 384.0655,149.6109C378.3635,154.3069 374.8095,160.7199 373.8395,167.7709L373.8305,167.7539C371.1805,184.0759 378.6375,200.9939 393.9545,209.3999C413.3925,220.0579 437.8225,212.9369 448.4875,193.5009C449.9045,190.9209 450.9545,188.2699 451.7545,185.5629C454.0455,174.4899 444.1185,170.1509 418.1615,174.6429C418.0765,174.7369 417.9165,174.7049 418.1615,174.6429C432.2655,160.5899 457.0845,159.9119 456.3675,163.1129C453.7135,148.5339 465.5945,135.7599 461.8155,127.1859C461.8745,127.3159 461.9195,127.4519 461.9635,127.5879C462.0005,127.5239 462.0425,127.4629 462.0835,127.3879C463.0635,129.5699 463.9445,131.8079 464.7185,134.1159C476.9935,170.8169 457.1765,210.5779 420.4815,222.8489C383.7725,235.1299 344.0215,215.3129 331.7505,178.6029z" data-pivot="33.1016 -21.0071" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2.199" stroke-dasharray="none"/>
          </g>
          <g id="clipgroup__0" clip-path="url(#clipgroup__0_clip)" opacity="0" data-pivot="392.4796 373.7568">
            <ellipse id="ellipse__0" transform="matrix(0.01 0 0 0.01 388.5548 370.0192)" data-transform="0 0 0.01 0.01 0 0 0" data-pivot="392.4796 373.7568" cx="392.4796" cy="373.7568" rx="324.7641" ry="318.1497" fill="none" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1" stroke-dasharray="none"/>
            <g id="text2" data-pivot="400.7075 366.3473">
              <path id="pathshape__15" d="M152.7965,378.1859L152.7965,406.3779C150.5625,406.7659 148.5215,406.9599 146.6745,406.9599C135.7465,406.9599 126.6395,403.3669 119.3525,396.1789C112.0675,388.9919 108.4245,379.9829 108.4225,369.1509C108.4245,358.6119 112.1035,349.6769 119.4625,342.3429C126.8205,335.0099 135.7715,331.3419 146.3125,331.3419C158.0675,331.3419 167.3315,334.7779 174.1085,341.6509C180.8835,348.5229 184.2725,357.9099 184.2725,369.8079L184.2725,405.4309L157.0225,405.4309L157.0225,371.7749C157.0205,367.9369 156.0855,364.8759 154.2165,362.5949C152.3475,360.3109 149.8335,359.1719 146.6745,359.1719C143.8105,359.1719 141.3335,360.2139 139.2445,362.3029C137.1555,364.3909 136.1115,366.8699 136.1115,369.7329C136.1115,372.7459 137.0585,375.2229 138.9525,377.1639C140.8465,379.1079 143.2505,380.0799 146.1645,380.0799C148.5465,380.0799 150.7575,379.4479 152.7965,378.1859z" data-pivot="33.1016 -21.0071" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
              <path id="pathshape__16" d="M225.8025,432.3139L198.5535,432.3139L198.5535,371.7019C198.5535,360.5789 201.4675,351.5209 207.2955,344.5269C210.6485,340.4969 214.9095,337.2909 220.0825,334.9119C225.2555,332.5309 230.5635,331.3419 236.0035,331.3419C246.8365,331.3419 255.9685,334.9849 263.4005,342.2709C270.8305,349.5539 274.5465,358.4899 274.5485,369.0789C274.5465,379.3729 270.8555,388.2609 263.4725,395.7419C256.0885,403.2199 247.3445,406.9599 237.2435,406.9599C235.5915,406.9599 233.1625,406.7899 229.9565,406.4509L229.9565,376.4369C232.1905,378.2339 234.4245,379.1329 236.6585,379.1329C239.4755,379.1329 241.8915,378.0889 243.9085,375.9999C245.9245,373.9109 246.9345,371.4329 246.9325,368.5689C246.9345,365.7029 245.8895,363.2639 243.8005,361.2479C241.7115,359.2319 239.2095,358.2219 236.2965,358.2249C229.3015,358.2219 225.8025,363.0549 225.8025,372.7219C225.8025,392.5859 225.8025,412.4499 225.8025,432.3139z" data-pivot="33.1016 -21.0071" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
              <path id="pathshape__17" d="M313.7455,305.9909L313.7455,336.3689C318.3615,333.0179 322.9765,331.3419 327.5905,331.3419C334.5855,331.3419 340.1335,333.8679 344.2385,338.9179C348.3425,343.9699 350.3965,350.7939 350.3965,359.3889L350.3965,405.4309L323.1465,405.4309L323.1465,367.0399C323.1465,363.9289 322.8195,361.8399 322.1625,360.7729C321.5075,359.7039 320.2305,359.1719 318.3365,359.1719C315.2755,359.1719 313.7455,361.4279 313.7455,365.9449L313.7455,405.4309L286.4965,405.4309L286.4965,305.9909C295.5795,305.9909 304.6625,305.9909 313.7455,305.9909z" data-pivot="33.1016 -21.0071" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
              <path id="pathshape__18" d="M406.6455,378.1859L406.6455,406.3779C404.4115,406.7659 402.3705,406.9599 400.5235,406.9599C389.5955,406.9599 380.4885,403.3669 373.2015,396.1789C365.9165,388.9919 362.2735,379.9829 362.2715,369.1509C362.2735,358.6119 365.9525,349.6769 373.3115,342.3429C380.6695,335.0099 389.6205,331.3419 400.1615,331.3419C411.9165,331.3419 421.1805,334.7779 427.9575,341.6509C434.7325,348.5229 438.1215,357.9099 438.1215,369.8079L438.1215,405.4309L410.8715,405.4309L410.8715,371.7749C410.8695,367.9369 409.9345,364.8759 408.0655,362.5949C406.1965,360.3109 403.6825,359.1719 400.5235,359.1719C397.6595,359.1719 395.1825,360.2139 393.0935,362.3029C391.0045,364.3909 389.9605,366.8699 389.9605,369.7329C389.9605,372.7459 390.9075,375.2229 392.8015,377.1639C394.6955,379.1079 397.0995,380.0799 400.0135,380.0799C402.3955,380.0799 404.6065,379.4479 406.6455,378.1859z" data-pivot="33.1016 -21.0071" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
              <path id="pathshape__19" d="M481.2535,305.9909L481.2535,405.4309L454.0045,405.4309L454.0045,305.9909C463.0875,305.9909 472.1705,305.9909 481.2535,305.9909z" data-pivot="33.1016 -21.0071" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
              <path id="pathshape__20" d="M524.4615,332.7989L524.4615,405.4309L497.2125,405.4309L497.2125,332.7989C506.2955,332.7989 515.3785,332.7989 524.4615,332.7989zM510.9095,300.3809C514.6005,300.3809 517.7945,301.6809 520.4915,304.2789C523.1875,306.8779 524.5365,309.9489 524.5365,313.4939C524.5365,317.2819 523.2615,320.3899 520.7105,322.8189C518.1615,325.2479 514.8935,326.4619 510.9095,326.4619C506.9265,326.4619 503.6605,325.2479 501.1115,322.8189C498.5595,320.3899 497.2855,317.2819 497.2855,313.4939C497.2855,309.9489 498.6325,306.8779 501.3285,304.2789C504.0245,301.6809 507.2185,300.3809 510.9095,300.3809z" data-pivot="33.1016 -21.0071" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
              <path id="pathshape__21" d="M605.2665,405.4309L578.0175,405.4309L578.0175,364.4159C578.0175,360.2389 576.2915,358.1519 572.8425,358.1519C569.4415,358.1519 567.7415,360.2389 567.7415,364.4159L567.7415,405.4309L540.4925,405.4309L540.4925,364.9259C540.4925,355.4539 543.6265,347.4779 549.8915,340.9939C556.1585,334.5119 563.8335,331.2689 572.9175,331.2689C583.3105,331.2689 591.6425,335.0349 597.9075,342.5609C602.8155,348.4379 605.2665,356.6209 605.2665,367.1119C605.2665,379.8849 605.2665,392.6579 605.2665,405.4309z" data-pivot="33.1016 -21.0071" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
              <path id="pathshape__22" d="M661.5165,378.1859L661.5165,406.3779C659.2825,406.7659 657.2415,406.9599 655.3945,406.9599C644.4665,406.9599 635.3595,403.3669 628.0725,396.1789C620.7875,388.9919 617.1445,379.9829 617.1425,369.1509C617.1445,358.6119 620.8235,349.6769 628.1825,342.3429C635.5405,335.0099 644.4915,331.3419 655.0325,331.3419C666.7875,331.3419 676.0515,334.7779 682.8285,341.6509C689.6035,348.5229 692.9925,357.9099 692.9925,369.8079L692.9925,405.4309L665.7425,405.4309L665.7425,371.7749C665.7405,367.9369 664.8055,364.8759 662.9365,362.5949C661.0675,360.3109 658.5535,359.1719 655.3945,359.1719C652.5305,359.1719 650.0535,360.2139 647.9645,362.3029C645.8755,364.3909 644.8315,366.8699 644.8315,369.7329C644.8315,372.7459 645.7785,375.2229 647.6725,377.1639C649.5665,379.1079 651.9705,380.0799 654.8845,380.0799C657.2665,380.0799 659.4775,379.4479 661.5165,378.1859z" data-pivot="33.1016 -21.0071" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
            </g>
          </g>
          <g id="text1" data-pivot="400.7075 366.3473">
            <path id="pathshape__6" d="M152.7965,378.1859L152.7965,406.3779C150.5625,406.7659 148.5215,406.9599 146.6745,406.9599C135.7465,406.9599 126.6395,403.3669 119.3525,396.1789C112.0675,388.9919 108.4245,379.9829 108.4225,369.1509C108.4245,358.6119 112.1035,349.6769 119.4625,342.3429C126.8205,335.0099 135.7715,331.3419 146.3125,331.3419C158.0675,331.3419 167.3315,334.7779 174.1085,341.6509C180.8835,348.5229 184.2725,357.9099 184.2725,369.8079L184.2725,405.4309L157.0225,405.4309L157.0225,371.7749C157.0205,367.9369 156.0855,364.8759 154.2165,362.5949C152.3475,360.3109 149.8335,359.1719 146.6745,359.1719C143.8105,359.1719 141.3335,360.2139 139.2445,362.3029C137.1555,364.3909 136.1115,366.8699 136.1115,369.7329C136.1115,372.7459 137.0585,375.2229 138.9525,377.1639C140.8465,379.1079 143.2505,380.0799 146.1645,380.0799C148.5465,380.0799 150.7575,379.4479 152.7965,378.1859z" data-pivot="33.1016 -21.0071" fill="none" stroke="#C4FF4D" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2" stroke-dasharray="369.3391 369.3391" stroke-dashoffset="369.3391"/>
            <path id="pathshape__5" d="M225.8025,432.3139L198.5535,432.3139L198.5535,371.7019C198.5535,360.5789 201.4675,351.5209 207.2955,344.5269C210.6485,340.4969 214.9095,337.2909 220.0825,334.9119C225.2555,332.5309 230.5635,331.3419 236.0035,331.3419C246.8365,331.3419 255.9685,334.9849 263.4005,342.2709C270.8305,349.5539 274.5465,358.4899 274.5485,369.0789C274.5465,379.3729 270.8555,388.2609 263.4725,395.7419C256.0885,403.2199 247.3445,406.9599 237.2435,406.9599C235.5915,406.9599 233.1625,406.7899 229.9565,406.4509L229.9565,376.4369C232.1905,378.2339 234.4245,379.1329 236.6585,379.1329C239.4755,379.1329 241.8915,378.0889 243.9085,375.9999C245.9245,373.9109 246.9345,371.4329 246.9325,368.5689C246.9345,365.7029 245.8895,363.2639 243.8005,361.2479C241.7115,359.2319 239.2095,358.2219 236.2965,358.2249C229.3015,358.2219 225.8025,363.0549 225.8025,372.7219C225.8025,392.5859 225.8025,412.4499 225.8025,432.3139z" data-pivot="33.1016 -21.0071" fill="none" stroke="#4DC3FF" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2" stroke-dasharray="425.6107 425.6107" stroke-dashoffset="425.6107"/>
            <path id="pathshape__4" d="M313.7455,305.9909L313.7455,336.3689C318.3615,333.0179 322.9765,331.3419 327.5905,331.3419C334.5855,331.3419 340.1335,333.8679 344.2385,338.9179C348.3425,343.9699 350.3965,350.7939 350.3965,359.3889L350.3965,405.4309L323.1465,405.4309L323.1465,367.0399C323.1465,363.9289 322.8195,361.8399 322.1625,360.7729C321.5075,359.7039 320.2305,359.1719 318.3365,359.1719C315.2755,359.1719 313.7455,361.4279 313.7455,365.9449L313.7455,405.4309L286.4965,405.4309L286.4965,305.9909C295.5795,305.9909 304.6625,305.9909 313.7455,305.9909z" data-pivot="33.1016 -21.0071" fill="none" stroke="#FF4DFF" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2" stroke-dasharray="411.0118 411.0118" stroke-dashoffset="411.0118"/>
            <path id="pathshape__3" d="M406.6455,378.1859L406.6455,406.3779C404.4115,406.7659 402.3705,406.9599 400.5235,406.9599C389.5955,406.9599 380.4885,403.3669 373.2015,396.1789C365.9165,388.9919 362.2735,379.9829 362.2715,369.1509C362.2735,358.6119 365.9525,349.6769 373.3115,342.3429C380.6695,335.0099 389.6205,331.3419 400.1615,331.3419C411.9165,331.3419 421.1805,334.7779 427.9575,341.6509C434.7325,348.5229 438.1215,357.9099 438.1215,369.8079L438.1215,405.4309L410.8715,405.4309L410.8715,371.7749C410.8695,367.9369 409.9345,364.8759 408.0655,362.5949C406.1965,360.3109 403.6825,359.1719 400.5235,359.1719C397.6595,359.1719 395.1825,360.2139 393.0935,362.3029C391.0045,364.3909 389.9605,366.8699 389.9605,369.7329C389.9605,372.7459 390.9075,375.2229 392.8015,377.1639C394.6955,379.1079 397.0995,380.0799 400.0135,380.0799C402.3955,380.0799 404.6065,379.4479 406.6455,378.1859z" data-pivot="33.1016 -21.0071" fill="none" stroke="#00FFAA" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2" stroke-dasharray="369.3391 369.3391" stroke-dashoffset="369.3391"/>
            <path id="pathshape__2" d="M481.2535,305.9909L481.2535,405.4309L454.0045,405.4309L454.0045,305.9909C463.0875,305.9909 472.1705,305.9909 481.2535,305.9909z" data-pivot="33.1016 -21.0071" fill="none" stroke="#FFC34D" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2" stroke-dasharray="253.378 253.378" stroke-dashoffset="253.378"/>
            <path id="pathshape__1" d="M524.4615,332.7989L524.4615,405.4309L497.2125,405.4309L497.2125,332.7989C506.2955,332.7989 515.3785,332.7989 524.4615,332.7989zM510.9095,300.3809C514.6005,300.3809 517.7945,301.6809 520.4915,304.2789C523.1875,306.8779 524.5365,309.9489 524.5365,313.4939C524.5365,317.2819 523.2615,320.3899 520.7105,322.8189C518.1615,325.2479 514.8935,326.4619 510.9095,326.4619C506.9265,326.4619 503.6605,325.2479 501.1115,322.8189C498.5595,320.3899 497.2855,317.2819 497.2855,313.4939C497.2855,309.9489 498.6325,306.8779 501.3285,304.2789C504.0245,301.6809 507.2185,300.3809 510.9095,300.3809z" data-pivot="33.1016 -21.0071" fill="none" stroke="#0055FF" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2" stroke-dasharray="199.762 199.762" stroke-dashoffset="199.762"/>
            <path id="pathshape__0" d="M605.2665,405.4309L578.0175,405.4309L578.0175,364.4159C578.0175,360.2389 576.2915,358.1519 572.8425,358.1519C569.4415,358.1519 567.7415,360.2389 567.7415,364.4159L567.7415,405.4309L540.4925,405.4309L540.4925,364.9259C540.4925,355.4539 543.6265,347.4779 549.8915,340.9939C556.1585,334.5119 563.8335,331.2689 572.9175,331.2689C583.3105,331.2689 591.6425,335.0349 597.9075,342.5609C602.8155,348.4379 605.2665,356.6209 605.2665,367.1119C605.2665,379.8849 605.2665,392.6579 605.2665,405.4309z" data-pivot="33.1016 -21.0071" fill="none" stroke="#FF0055" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2" stroke-dasharray="340.2783 340.2783" stroke-dashoffset="340.2783"/>
            <path id="pathshape" d="M661.5165,378.1859L661.5165,406.3779C659.2825,406.7659 657.2415,406.9599 655.3945,406.9599C644.4665,406.9599 635.3595,403.3669 628.0725,396.1789C620.7875,388.9919 617.1445,379.9829 617.1425,369.1509C617.1445,358.6119 620.8235,349.6769 628.1825,342.3429C635.5405,335.0099 644.4915,331.3419 655.0325,331.3419C666.7875,331.3419 676.0515,334.7779 682.8285,341.6509C689.6035,348.5229 692.9925,357.9099 692.9925,369.8079L692.9925,405.4309L665.7425,405.4309L665.7425,371.7749C665.7405,367.9369 664.8055,364.8759 662.9365,362.5949C661.0675,360.3109 658.5535,359.1719 655.3945,359.1719C652.5305,359.1719 650.0535,360.2139 647.9645,362.3029C645.8755,364.3909 644.8315,366.8699 644.8315,369.7329C644.8315,372.7459 645.7785,375.2229 647.6725,377.1639C649.5665,379.1079 651.9705,380.0799 654.8845,380.0799C657.2665,380.0799 659.4775,379.4479 661.5165,378.1859z" data-pivot="33.1016 -21.0071" fill="none" stroke="#5500FF" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2" stroke-dasharray="369.339 369.339" stroke-dashoffset="369.339"/>
          </g>
          <path id="dolphin2" d="M331.7505,178.6029C328.3965,168.5699 327.4335,158.3059 328.5625,148.4409C317.3795,141.3179 299.6465,155.3449 298.4935,150.1759C303.1605,133.2369 315.8665,125.2799 335.7815,116.8259C343.1455,93.9759 364.2315,80.5199 384.8375,76.9919C398.2105,74.6919 409.0575,77.1939 417.3525,90.1109C424.5375,86.7709 436.2145,85.0719 441.9065,91.4699C448.5785,101.5819 419.5525,116.5789 400.0525,131.9799C402.6445,147.9409 397.8635,159.7219 388.4345,168.7769C390.1635,160.4369 389.6745,153.4009 384.4745,149.1699C384.3845,149.2809 384.2935,149.4089 384.2065,149.5229C384.1555,149.5429 384.1215,149.5699 384.0655,149.6109C378.3635,154.3069 374.8095,160.7199 373.8395,167.7709L373.8305,167.7539C371.1805,184.0759 378.6375,200.9939 393.9545,209.3999C413.3925,220.0579 437.8225,212.9369 448.4875,193.5009C449.9045,190.9209 450.9545,188.2699 451.7545,185.5629C454.0455,174.4899 444.1185,170.1509 418.1615,174.6429C418.0765,174.7369 417.9165,174.7049 418.1615,174.6429C432.2655,160.5899 457.0845,159.9119 456.3675,163.1129C453.7135,148.5339 465.5945,135.7599 461.8155,127.1859C461.8745,127.3159 461.9195,127.4519 461.9635,127.5879C462.0005,127.5239 462.0425,127.4629 462.0835,127.3879C463.0635,129.5699 463.9445,131.8079 464.7185,134.1159C476.9935,170.8169 457.1765,210.5779 420.4815,222.8489C383.7725,235.1299 344.0215,215.3129 331.7505,178.6029z" data-pivot="33.1016 -21.0071" fill="none" stroke="#999999" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="2.199" stroke-dasharray="857.7004 857.7004" stroke-dashoffset="857.7004"/>
          <g id="text3" opacity="0" data-pivot="400.7075 366.3473">
            <path id="pathshape__7" d="M152.7965,378.1859L152.7965,406.3779C150.5625,406.7659 148.5215,406.9599 146.6745,406.9599C135.7465,406.9599 126.6395,403.3669 119.3525,396.1789C112.0675,388.9919 108.4245,379.9829 108.4225,369.1509C108.4245,358.6119 112.1035,349.6769 119.4625,342.3429C126.8205,335.0099 135.7715,331.3419 146.3125,331.3419C158.0675,331.3419 167.3315,334.7779 174.1085,341.6509C180.8835,348.5229 184.2725,357.9099 184.2725,369.8079L184.2725,405.4309L157.0225,405.4309L157.0225,371.7749C157.0205,367.9369 156.0855,364.8759 154.2165,362.5949C152.3475,360.3109 149.8335,359.1719 146.6745,359.1719C143.8105,359.1719 141.3335,360.2139 139.2445,362.3029C137.1555,364.3909 136.1115,366.8699 136.1115,369.7329C136.1115,372.7459 137.0585,375.2229 138.9525,377.1639C140.8465,379.1079 143.2505,380.0799 146.1645,380.0799C148.5465,380.0799 150.7575,379.4479 152.7965,378.1859z" data-pivot="146.3476 369.1509" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
            <path id="pathshape__8" d="M225.8025,432.3139L198.5535,432.3139L198.5535,371.7019C198.5535,360.5789 201.4675,351.5209 207.2955,344.5269C210.6485,340.4969 214.9095,337.2909 220.0825,334.9119C225.2555,332.5309 230.5635,331.3419 236.0035,331.3419C246.8365,331.3419 255.9685,334.9849 263.4005,342.2709C270.8305,349.5539 274.5465,358.4899 274.5485,369.0789C274.5465,379.3729 270.8555,388.2609 263.4725,395.7419C256.0885,403.2199 247.3445,406.9599 237.2435,406.9599C235.5915,406.9599 233.1625,406.7899 229.9565,406.4509L229.9565,376.4369C232.1905,378.2339 234.4245,379.1329 236.6585,379.1329C239.4755,379.1329 241.8915,378.0889 243.9085,375.9999C245.9245,373.9109 246.9345,371.4329 246.9325,368.5689C246.9345,365.7029 245.8895,363.2639 243.8005,361.2479C241.7115,359.2319 239.2095,358.2219 236.2965,358.2249C229.3015,358.2219 225.8025,363.0549 225.8025,372.7219C225.8025,392.5859 225.8025,412.4499 225.8025,432.3139z" data-pivot="236.551 381.8279" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
            <path id="pathshape__9" d="M313.7455,305.9909L313.7455,336.3689C318.3615,333.0179 322.9765,331.3419 327.5905,331.3419C334.5855,331.3419 340.1335,333.8679 344.2385,338.9179C348.3425,343.9699 350.3965,350.7939 350.3965,359.3889L350.3965,405.4309L323.1465,405.4309L323.1465,367.0399C323.1465,363.9289 322.8195,361.8399 322.1625,360.7729C321.5075,359.7039 320.2305,359.1719 318.3365,359.1719C315.2755,359.1719 313.7455,361.4279 313.7455,365.9449L313.7455,405.4309L286.4965,405.4309L286.4965,305.9909C295.5795,305.9909 304.6625,305.9909 313.7455,305.9909z" data-pivot="318.4466 355.7109" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
            <path id="pathshape__10" d="M406.6455,378.1859L406.6455,406.3779C404.4115,406.7659 402.3705,406.9599 400.5235,406.9599C389.5955,406.9599 380.4885,403.3669 373.2015,396.1789C365.9165,388.9919 362.2735,379.9829 362.2715,369.1509C362.2735,358.6119 365.9525,349.6769 373.3115,342.3429C380.6695,335.0099 389.6205,331.3419 400.1615,331.3419C411.9165,331.3419 421.1805,334.7779 427.9575,341.6509C434.7325,348.5229 438.1215,357.9099 438.1215,369.8079L438.1215,405.4309L410.8715,405.4309L410.8715,371.7749C410.8695,367.9369 409.9345,364.8759 408.0655,362.5949C406.1965,360.3109 403.6825,359.1719 400.5235,359.1719C397.6595,359.1719 395.1825,360.2139 393.0935,362.3029C391.0045,364.3909 389.9605,366.8699 389.9605,369.7329C389.9605,372.7459 390.9075,375.2229 392.8015,377.1639C394.6955,379.1079 397.0995,380.0799 400.0135,380.0799C402.3955,380.0799 404.6065,379.4479 406.6455,378.1859z" data-pivot="400.1966 369.1509" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
            <path id="pathshape__11" d="M481.2535,305.9909L481.2535,405.4309L454.0045,405.4309L454.0045,305.9909C463.0875,305.9909 472.1705,305.9909 481.2535,305.9909z" data-pivot="467.629 355.7109" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
            <path id="pathshape__12" d="M524.4615,332.7989L524.4615,405.4309L497.2125,405.4309L497.2125,332.7989C506.2955,332.7989 515.3785,332.7989 524.4615,332.7989zM510.9095,300.3809C514.6005,300.3809 517.7945,301.6809 520.4915,304.2789C523.1875,306.8779 524.5365,309.9489 524.5365,313.4939C524.5365,317.2819 523.2615,320.3899 520.7105,322.8189C518.1615,325.2479 514.8935,326.4619 510.9095,326.4619C506.9265,326.4619 503.6605,325.2479 501.1115,322.8189C498.5595,320.3899 497.2855,317.2819 497.2855,313.4939C497.2855,309.9489 498.6325,306.8779 501.3285,304.2789C504.0245,301.6809 507.2185,300.3809 510.9095,300.3809z" data-pivot="510.8745 352.9059" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
            <path id="pathshape__13" d="M605.2665,405.4309L578.0175,405.4309L578.0175,364.4159C578.0175,360.2389 576.2915,358.1519 572.8425,358.1519C569.4415,358.1519 567.7415,360.2389 567.7415,364.4159L567.7415,405.4309L540.4925,405.4309L540.4925,364.9259C540.4925,355.4539 543.6265,347.4779 549.8915,340.9939C556.1585,334.5119 563.8335,331.2689 572.9175,331.2689C583.3105,331.2689 591.6425,335.0349 597.9075,342.5609C602.8155,348.4379 605.2665,356.6209 605.2665,367.1119C605.2665,379.8849 605.2665,392.6579 605.2665,405.4309z" data-pivot="572.8795 368.3499" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
            <path id="pathshape__14" d="M661.5165,378.1859L661.5165,406.3779C659.2825,406.7659 657.2415,406.9599 655.3945,406.9599C644.4665,406.9599 635.3595,403.3669 628.0725,396.1789C620.7875,388.9919 617.1445,379.9829 617.1425,369.1509C617.1445,358.6119 620.8235,349.6769 628.1825,342.3429C635.5405,335.0099 644.4915,331.3419 655.0325,331.3419C666.7875,331.3419 676.0515,334.7779 682.8285,341.6509C689.6035,348.5229 692.9925,357.9099 692.9925,369.8079L692.9925,405.4309L665.7425,405.4309L665.7425,371.7749C665.7405,367.9369 664.8055,364.8759 662.9365,362.5949C661.0675,360.3109 658.5535,359.1719 655.3945,359.1719C652.5305,359.1719 650.0535,360.2139 647.9645,362.3029C645.8755,364.3909 644.8315,366.8699 644.8315,369.7329C644.8315,372.7459 645.7785,375.2229 647.6725,377.1639C649.5665,379.1079 651.9705,380.0799 654.8845,380.0799C657.2665,380.0799 659.4775,379.4479 661.5165,378.1859z" data-pivot="655.0676 369.1509" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="9.437" stroke-dasharray="none"/>
          </g>
          <g id="group" opacity="0" data-pivot="384.5424 195.1696">
            <ellipse id="ellipse__1" transform="matrix(0.1 0 0 0.1 970.9611 -668.0464)" data-transform="0 0 0.1 0.1 0 0 0" data-pivot="1078.8456 -742.2738" cx="1080.8299" cy="-831.5673" rx="27.1188" ry="28.4417" opacity="0.2" fill="#FFFF00" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1" stroke-dasharray="none"/>
            <ellipse id="ellipse__2" transform="matrix(0.1 0 0 0.1 389.3892 1592.3052)" data-transform="0 0 0.1 0.1 0 0 0" data-pivot="432.6547 1769.2279" cx="438.6076" cy="1691.8402" rx="27.1188" ry="28.4417" opacity="0.2" fill="#FF4D4D" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1" stroke-dasharray="none"/>
            <ellipse id="ellipse__3" transform="matrix(0.1 0 0 0.1 -467.609 987.3293)" data-transform="0 0 0.1 0.1 0 0 0" data-pivot="-519.5656 1097.0326" cx="-517.5813" cy="1023.6134" rx="27.1188" ry="28.4417" opacity="0.2" fill="#4D4DFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1" stroke-dasharray="none"/>
            <ellipse id="ellipse__4" transform="matrix(0.1 0 0 0.1 817.8645 626.3885)" data-transform="0 0 0.1 0.1 0 0 0" data-pivot="908.7383 695.9872" cx="917.337" cy="626.5366" rx="27.1188" ry="28.4417" opacity="0.2" fill="#884DFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1" stroke-dasharray="none"/>
            <ellipse id="ellipse__5" transform="matrix(0.1 0 0 0.1 1227.4952 -432.8224)" data-transform="0 0 0.1 0.1 0 0 0" data-pivot="1363.8835 -480.9138" cx="1367.1907" cy="-558.3015" rx="27.1188" ry="28.4417" opacity="0.2" fill="#FF5500" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1" stroke-dasharray="none"/>
            <ellipse id="ellipse__6" transform="matrix(0.1 0 0 0.1 -672.9425 395.672)" data-transform="0 0 0.1 0.1 0 0 0" data-pivot="-747.7138 439.6355" cx="-745.7295" cy="355.6334" rx="27.1188" ry="28.4417" opacity="0.2" fill="#00FF00" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1" stroke-dasharray="none"/>
            <ellipse id="ellipse__7" transform="matrix(0.1 0 0 0.1 485.2533 847.8775)" data-transform="0 0 0.1 0.1 0 0 0" data-pivot="539.1704 942.0861" cx="537.1861" cy="866.0212" rx="27.1188" ry="28.4417" opacity="0.2" fill="#FF00FF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1" stroke-dasharray="none"/>
            <ellipse id="ellipse__8" transform="matrix(0.1 0 0 0.1 -75.7958 376.7189)" data-transform="0 0 0.1 0.1 0 0 0" data-pivot="-84.2175 418.5766" cx="-83.5561" cy="338.5431" rx="27.1188" ry="28.4417" opacity="0.2" fill="#FF0055" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1" stroke-dasharray="none"/>
            <ellipse id="ellipse__9" transform="matrix(0.1 0 0 0.1 1549.1826 208.5005)" data-transform="0 0 0.1 0.1 0 0 0" data-pivot="1721.314 231.6672" cx="1721.9755" cy="171.4767" rx="27.1188" ry="28.4417" opacity="0.2" fill="#00AAFF" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="1" stroke-dasharray="none"/>
          </g>
          <g id="Pen" transform="matrix(1 0 0 1 331.7507 178.6026)" data-transform="331.7507 178.6026 1 1 0 0 0" data-pivot="-0.0001 0.0003">
            <path id="pathshape__23" d="M15.574,20.927L7.147,12.453C6.91,12.212 6.909,11.819 7.15,11.576C7.391,11.336 7.786,11.337 8.026,11.579L16.623,20.225C16.283,20.474 15.933,20.708 15.574,20.927zM20.133,16.73L11.537,8.088C11.297,7.847 11.297,7.453 11.539,7.213C11.781,6.973 12.176,6.974 12.416,7.215L20.837,15.685C20.615,16.043 20.38,16.391 20.133,16.73zM11.962,22.564L4.516,15.072C4.508,15.064 4.5,15.058 4.495,15.05C4.483,15.04 4.475,15.03 4.468,15.015C4.419,14.958 4.39,14.903 4.375,14.846C4.367,14.839 4.364,14.829 4.362,14.819L0.023,0.797C0.015,0.776 0.011,0.756 0.015,0.735C-0.001,0.698 -0.003,0.658 0.003,0.619C-0.003,0.56 0,0.522 0.018,0.487C0.016,0.459 0.019,0.444 0.024,0.428C0.036,0.394 0.049,0.363 0.052,0.358C0.077,0.309 0.089,0.285 0.112,0.272C0.134,0.226 0.149,0.207 0.179,0.176C0.19,0.162 0.224,0.134 0.274,0.11C0.301,0.082 0.333,0.063 0.384,0.05C0.394,0.036 0.415,0.029 0.433,0.024C0.447,0.019 0.464,0.014 0.496,0.016C0.527,0.002 0.564,-0.001 0.614,0.004C0.661,-0.004 0.705,0.001 0.744,0.019C0.763,0.014 0.782,0.018 0.802,0.025L14.797,4.443C14.802,4.446 14.808,4.447 14.818,4.456C14.856,4.464 14.893,4.481 14.932,4.519C14.973,4.529 15.002,4.554 15.028,4.584C15.036,4.586 15.044,4.59 15.049,4.596L22.5,12.088C22.36,12.522 22.202,12.95 22.027,13.369L14.282,5.578L8.348,3.706L3.663,8.368L5.5,14.306L13.25,22.102C12.83,22.273 12.4,22.427 11.962,22.564z" transform="matrix(3 0 0 3 0.0002 -0.0006)" data-transform="0 0 3 3 0 0 0" data-pivot="-0.0001 0.0003" fill="#000000" stroke="none" stroke-linecap="butt" stroke-linejoin="miter" stroke-width="0.825" stroke-dasharray="none"/>
          </g>
        </g>
      </svg>
    </div>
   <div style="visibility: visible; width: 100%; height: 100%; margin: 20px;" class="scene">
     <a href="https://aphalina.com" style=" color: blue;">Created with Aphalina Animator</a>
   </div>
  </body>
              
            
!

CSS

              
                .scene { position: absolute;  left: 0px; top: 0px; }
              
            
!

JS

              
                 var __extends = (this && this.__extends) || (function () {
        var extendStatics = Object.setPrototypeOf ||
            ({ __proto__: [] } instanceof Array && function (d, b) { d.__proto__ = b; }) ||
            function (d, b) { for (var p in b) if (b.hasOwnProperty(p)) d[p] = b[p]; };
        return function (d, b) {
            extendStatics(d, b);
            function __() { this.constructor = d; }
            d.prototype = b === null ? Object.create(b) : (__.prototype = b.prototype, new __());
        };
    })();
    var Aphalina;
    (function (Aphalina) {
        var TransformMatrix = (function () {
            function TransformMatrix(a, b, c, d, e, f) {
                if (a === void 0) { a = 1; }
                if (b === void 0) { b = 0; }
                if (c === void 0) { c = 0; }
                if (d === void 0) { d = 1; }
                if (e === void 0) { e = 0; }
                if (f === void 0) { f = 0; }
                this.setTransform(a, b, c, d, e, f);
            }
            TransformMatrix.prototype.setTransform = function (a, b, c, d, e, f) {
                this.a = a;
                this.b = b;
                this.c = c;
                this.d = d;
                this.e = e;
                this.f = f;
            };
            TransformMatrix.prototype.reset = function () {
                this.setTransform(1, 0, 0, 1, 0, 0);
            };
            TransformMatrix.prototype.transform = function (a, b, c, d, e, f) {
                var a1 = this.a, b1 = this.b, c1 = this.c, d1 = this.d, e1 = this.e, f1 = this.f;
                this.a = a1 * a + c1 * b;
                this.b = b1 * a + d1 * b;
                this.c = a1 * c + c1 * d;
                this.d = b1 * c + d1 * d;
                this.e = a1 * e + c1 * f + e1;
                this.f = b1 * e + d1 * f + f1;
            };
            TransformMatrix.prototype.translate = function (tx, ty) {
                this.transform(1, 0, 0, 1, tx, ty);
            };
            TransformMatrix.prototype.rotate = function (angle) {
                angle = angle * Math.PI / 180;
                var cos = Math.cos(angle), sin = Math.sin(angle);
                this.transform(cos, sin, -sin, cos, 0, 0);
            };
            TransformMatrix.prototype.scale = function (sx, sy) {
                this.transform(sx, 0, 0, sy, 0, 0);
            };
            TransformMatrix.prototype.skew = function (ax, ay) {
                this.transform(1, Math.tan(ay * Math.PI / 180), Math.tan(ax * Math.PI / 180), 1, 0, 0);
            };
            return TransformMatrix;
        }());
        Aphalina.TransformMatrix = TransformMatrix;
        var Shape = (function () {
            function Shape(element) {
                this._pathProgress = 0;
                this._pathLenght = 0;
                this._rotateAlongPath = false;
                this.element = element;
                var transformAttribute = this.element.getAttribute("data-transform");
                var pivotAttribute = this.element.getAttribute("data-pivot");
                if (transformAttribute) {
                    var transformValues = transformAttribute.split(" ");
                    this._x = parseFloat(transformValues[0]);
                    this._y = parseFloat(transformValues[1]);
                    this._scaleX = parseFloat(transformValues[2]);
                    this._scaleY = parseFloat(transformValues[3]);
                    this._rotation = parseFloat(transformValues[4]);
                    this._skewX = parseFloat(transformValues[5]);
                    this._skewY = parseFloat(transformValues[6]);
                }
                else {
                    this._x = 0;
                    this._y = 0;
                    this._scaleX = 1;
                    this._scaleY = 1;
                    this._rotation = 0;
                    this._skewX = 0;
                    this._skewY = 0;
                }
                if (pivotAttribute) {
                    var pivotValues = pivotAttribute.split(" ");
                    this._pivotX = parseFloat(pivotValues[0]);
                    this._pivotY = parseFloat(pivotValues[1]);
                }
                else {
                    this._pivotX = 0;
                    this._pivotY = 0;
                }
                this._matrix = new TransformMatrix();
                this._isDirty = false;
            }
            Object.defineProperty(Shape.prototype, "x", {
                get: function () { return this._x; },
                set: function (val) { this._x = val; this._isDirty = true; },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(Shape.prototype, "y", {
                get: function () { return this._y; },
                set: function (val) { this._y = val; this._isDirty = true; },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(Shape.prototype, "scaleX", {
                get: function () { return this._scaleX; },
                set: function (val) { this._scaleX = val; this._isDirty = true; },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(Shape.prototype, "scaleY", {
                get: function () { return this._scaleY; },
                set: function (val) { this._scaleY = val; this._isDirty = true; },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(Shape.prototype, "rotation", {
                get: function () { return this._rotation; },
                set: function (val) { this._rotation = val; this._isDirty = true; },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(Shape.prototype, "skewX", {
                get: function () { return this._skewX; },
                set: function (val) { this._skewX = val; this._isDirty = true; },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(Shape.prototype, "skewY", {
                get: function () { return this._skewY; },
                set: function (val) { this._skewY = val; this._isDirty = true; },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(Shape.prototype, "pivotX", {
                get: function () { return this._pivotX; },
                set: function (val) { this._pivotX = val; this._isDirty = true; },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(Shape.prototype, "pivotY", {
                get: function () { return this._pivotY; },
                set: function (val) { this._pivotY = val; this._isDirty = true; },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(Shape.prototype, "path", {
                get: function () { return this._path; },
                set: function (val) { this._path = val; this._pathLenght = 0; this._isDirty = true; },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(Shape.prototype, "pathProgress", {
                get: function () { return this._pathProgress; },
                set: function (val) { this._pathProgress = val; this._isDirty = true; },
                enumerable: true,
                configurable: true
            });
            Object.defineProperty(Shape.prototype, "rotateAlongPath", {
                get: function () { return this._rotateAlongPath; },
                set: function (val) { this._rotateAlongPath = val; this._isDirty = true; },
                enumerable: true,
                configurable: true
            });
            Shape.prototype.update = function () {
                if (this._isDirty) {
                    if (this._path) {
                        if (this._pathLenght == 0)
                            this._pathLenght = this._path.getTotalLength();
                        var distance = this._pathProgress * this._pathLenght;
                        var pathPoint = this._path.getPointAtLength(distance);
                        this._x = pathPoint.x - this._pivotX;
                        this._y = pathPoint.y - this._pivotY;
                        if (this._rotateAlongPath) {
                            if (this.pathProgress < 0.99) {
                                var pathPoint2 = this._path.getPointAtLength((this._pathProgress + 0.001) * this._pathLenght);
                                this._rotation = Math.atan2(pathPoint2.y - pathPoint.y, pathPoint2.x - pathPoint.x) / Math.PI * 180.0;
                            }
                            else {
                                var pathPoint2 = this._path.getPointAtLength((this._pathProgress - 0.001) * this._pathLenght);
                                this._rotation = Math.atan2(pathPoint.y - pathPoint2.y, pathPoint.x - pathPoint2.x) / Math.PI * 180.0;
                            }
                        }
                    }
                    var m = this._matrix;
                    m.reset();
                    m.translate(this._pivotX, this._pivotY);
                    m.translate(this._x, this._y);
                    m.rotate(this._rotation);
                    m.skew(this._skewX, this._skewY);
                    m.scale(this._scaleX, this._scaleY);
                    m.translate(-this._pivotX, -this._pivotY);
                    var matrixString = 'matrix(' + this._matrix.a + ' ' + this._matrix.b + ' ' + this._matrix.c + ' ' + this._matrix.d + ' ' + this._matrix.e + ' ' + this._matrix.f + ')';
                    this.element.setAttribute('transform', matrixString);
                    this._isDirty = false;
                }
            };
            return Shape;
        }());
        Aphalina.Shape = Shape;
        var SpriteGroup = (function (_super) {
            __extends(SpriteGroup, _super);
            function SpriteGroup(element) {
                var _this = _super.call(this, element) || this;
                var currentFrameAttribute = _this.element.getAttribute("data-currentframe");
                if (currentFrameAttribute) {
                    _this._currentFrame = parseFloat(currentFrameAttribute);
                }
                else {
                    _this._currentFrame = 1;
                }
                _this._oldCurrentFrame = _this._currentFrame;
                return _this;
            }
            Object.defineProperty(SpriteGroup.prototype, "currentFrame", {
                get: function () { return this._currentFrame; },
                set: function (val) { this._currentFrame = val; },
                enumerable: true,
                configurable: true
            });
            SpriteGroup.prototype.calculateActualFrameIndex = function (frame) {
                return (Math.abs(Math.floor(frame - 1))) % this.element.childElementCount;
            };
            SpriteGroup.prototype.update = function () {
                _super.prototype.update.call(this);
                if (this._currentFrame && this._currentFrame != this._oldCurrentFrame) {
                    if (this._oldCurrentFrame != -1) {
                        this.element.children[this.calculateActualFrameIndex(this._oldCurrentFrame)].setAttribute('visibility', 'hidden');
                    }
                    this.element.children[this.calculateActualFrameIndex(this._currentFrame)].setAttribute('visibility', 'inherit');
                    this._oldCurrentFrame = this._currentFrame;
                }
            };
            return SpriteGroup;
        }(Shape));
        Aphalina.SpriteGroup = SpriteGroup;
        var Scene = (function () {
            function Scene(sceneId) {
                this._map = {};
                this.id = sceneId;
            }
            Scene.prototype.svg = function (elementId) {
                var t = this._map[elementId];
                if (!t) {
                    t = this.createShape(elementId);
                    this._map[elementId] = t;
                }
                return t;
            };
            Scene.prototype.createShape = function (elementId) {
                var element = document.getElementById(elementId);
                var shapeTypeAttribute = element.getAttribute("data-shapetype");
                if (shapeTypeAttribute) {
                    switch (shapeTypeAttribute) {
                        case "SpriteGroup":
                            return new SpriteGroup(element);
                    }
                }
                else
                    return new Shape(element);
            };
            Scene.prototype.update = function () {
                for (var elementId in this._map) {
                    if (this._map.hasOwnProperty(elementId)) {
                        this._map[elementId].update();
                    }
                }
            };
            Scene.prototype.load = function () {
                if (this.onload)
                    this.onload();
            };
            Scene.prototype.unload = function () {
                if (this.onunload)
                    this.onunload();
            };
            return Scene;
        }());
        Aphalina.Scene = Scene;
        var Animation = (function () {
            function Animation() {
            }
            Animation.prototype.showScene = function (scene) {
                if (this.currentScene) {
                    var domElement = document.getElementById(this.currentScene.id);
                    domElement.style.visibility = 'hidden';
                    this.currentScene.unload();
                }
                this.currentScene = scene;
                if (this.currentScene) {
                    var domElement = document.getElementById(this.currentScene.id);
                    domElement.style.visibility = 'visible';
                    this.currentScene.load();
                    this.update();
                }
            };
            Animation.prototype.update = function () {
                if (this.currentScene)
                    this.currentScene.update();
            };
            return Animation;
        }());
        Aphalina.Animation = Animation;
    })(Aphalina || (Aphalina = {}));
    var an = new Aphalina.Animation();
    var animation = new Aphalina.Animation();
    update = function() { animation.update();  }
    function build__Scene_1() {
      scene = new Aphalina.Scene('Scene_1');
      scene.Main_Timeline = new TimelineMax({paused : true, repeat : -1, onUpdate : function () { update(); }});
      scene.Main_Timeline.set('#dolphin2', { opacity : 1,  attr : {"stroke-dasharray" : 857.7004, "stroke-dashoffset" : 857.7004} }, 0);
      scene.Main_Timeline.set('#pathshape', {  attr : {"stroke-dasharray" : 369.339, "stroke-dashoffset" : 369.339} }, 0);
      scene.Main_Timeline.set('#pathshape__0', {  attr : {"stroke-dasharray" : 340.2783, "stroke-dashoffset" : 340.2783} }, 0);
      scene.Main_Timeline.set('#pathshape__1', {  attr : {"stroke-dasharray" : 199.762, "stroke-dashoffset" : 199.762} }, 0);
      scene.Main_Timeline.set('#pathshape__2', {  attr : {"stroke-dasharray" : 253.378, "stroke-dashoffset" : 253.378} }, 0);
      scene.Main_Timeline.set('#pathshape__3', {  attr : {"stroke-dasharray" : 369.3391, "stroke-dashoffset" : 369.3391} }, 0);
      scene.Main_Timeline.set('#pathshape__4', {  attr : {"stroke-dasharray" : 411.0118, "stroke-dashoffset" : 411.0118} }, 0);
      scene.Main_Timeline.set('#pathshape__5', {  attr : {"stroke-dasharray" : 425.6107, "stroke-dashoffset" : 425.6107} }, 0);
      scene.Main_Timeline.set('#pathshape__6', {  attr : {"stroke-dasharray" : 369.3391, "stroke-dashoffset" : 369.3391} }, 0);
      scene.Main_Timeline.set(scene.svg('ellipse'), { scaleY : 0.01, scaleX : 0.01 }, 0);
      scene.Main_Timeline.set(scene.svg('clipgroup_clipGeometry'), { scaleY : 0.01, scaleX : 0.01 }, 0);
      scene.Main_Timeline.set('#clipgroup', { opacity : 0 }, 0);
      scene.Main_Timeline.set(scene.svg('ellipse__0'), { scaleY : 0.01, scaleX : 0.01 }, 0);
      scene.Main_Timeline.set(scene.svg('clipgroup__0_clipGeometry'), { scaleY : 0.01, scaleX : 0.01 }, 0);
      scene.Main_Timeline.set('#clipgroup__0', { opacity : 0 }, 0);
      scene.Main_Timeline.set('#group', { opacity : 0 }, 0);
      scene.Main_Timeline.set('#text3', { opacity : 0 }, 0);
      scene.Main_Timeline.set('#text1', { opacity : 1 }, 0);
      scene.Main_Timeline.set(scene.svg('ellipse__1'), { y : 0, x : 0, scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 0);
      scene.Main_Timeline.set(scene.svg('ellipse__2'), { y : 0, x : 0, scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 0);
      scene.Main_Timeline.set(scene.svg('ellipse__3'), { y : 0, x : 0, scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 0);
      scene.Main_Timeline.set(scene.svg('ellipse__4'), { y : 0, x : 0, scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 0);
      scene.Main_Timeline.set(scene.svg('ellipse__5'), { y : 0, x : 0, scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 0);
      scene.Main_Timeline.set(scene.svg('ellipse__6'), { y : 0, x : 0, scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 0);
      scene.Main_Timeline.set(scene.svg('ellipse__7'), { y : 0, x : 0, scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 0);
      scene.Main_Timeline.set(scene.svg('ellipse__8'), { y : 0, x : 0, scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 0);
      scene.Main_Timeline.set(scene.svg('ellipse__9'), { y : 0, x : 0, scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 0);
      scene.Main_Timeline.set('#Pen', { opacity : 1 }, 0);
      scene.Main_Timeline.set(scene.svg('Pen'), { onStart : function (){ scene.svg('Pen').path = document.getElementById('dolphin2'); scene.svg('Pen').rotateAlongPath = false;; } , pathProgress : 0 }, 0);
      scene.Main_Timeline.set('#ellipse__1', { opacity : 0.2 }, 0);
      scene.Main_Timeline.set('#ellipse__2', { opacity : 0.2 }, 0);
      scene.Main_Timeline.set('#ellipse__3', { opacity : 0.2 }, 0);
      scene.Main_Timeline.set('#ellipse__4', { opacity : 0.2 }, 0);
      scene.Main_Timeline.set('#ellipse__5', { opacity : 0.2 }, 0);
      scene.Main_Timeline.set('#ellipse__6', { opacity : 0.2 }, 0);
      scene.Main_Timeline.set('#ellipse__7', { opacity : 0.2 }, 0);
      scene.Main_Timeline.set('#ellipse__8', { opacity : 0.2 }, 0);
      scene.Main_Timeline.set('#ellipse__9', { opacity : 0.2 }, 0);
      scene.Main_Timeline.set(scene.svg('pathshape__7'), { scaleY : 1, scaleX : 1, rotation : 0 }, 0);
      scene.Main_Timeline.set('#pathshape__7', { opacity : 1 }, 0);
      scene.Main_Timeline.set(scene.svg('pathshape__8'), { scaleY : 1, scaleX : 1, rotation : 0 }, 0);
      scene.Main_Timeline.set('#pathshape__8', { opacity : 1 }, 0);
      scene.Main_Timeline.set(scene.svg('pathshape__9'), { scaleY : 1, scaleX : 1, rotation : 0 }, 0);
      scene.Main_Timeline.set('#pathshape__9', { opacity : 1 }, 0);
      scene.Main_Timeline.set(scene.svg('pathshape__10'), { scaleY : 1, scaleX : 1, rotation : 0 }, 0);
      scene.Main_Timeline.set('#pathshape__10', { opacity : 1 }, 0);
      scene.Main_Timeline.set(scene.svg('pathshape__11'), { scaleY : 1, scaleX : 1, rotation : 0 }, 0);
      scene.Main_Timeline.set('#pathshape__11', { opacity : 1 }, 0);
      scene.Main_Timeline.set(scene.svg('pathshape__12'), { scaleY : 1, scaleX : 1, rotation : 0 }, 0);
      scene.Main_Timeline.set('#pathshape__12', { opacity : 1 }, 0);
      scene.Main_Timeline.set(scene.svg('pathshape__13'), { scaleY : 1, scaleX : 1, rotation : 0 }, 0);
      scene.Main_Timeline.set('#pathshape__13', { opacity : 1 }, 0);
      scene.Main_Timeline.set(scene.svg('pathshape__14'), { scaleY : 1, scaleX : 1, rotation : 0 }, 0);
      scene.Main_Timeline.set('#pathshape__14', { opacity : 1 }, 0);
      scene.Main_Timeline.to('#dolphin2', 2, { ease : Power0.easeNone,  attr : {"stroke-dashoffset" : 0} }, 0);
      scene.Main_Timeline.set('#pathshape', {  attr : {"stroke-dashoffset" : 369.339} }, 2);
      scene.Main_Timeline.set('#pathshape__0', {  attr : {"stroke-dashoffset" : 340.2783} }, 2);
      scene.Main_Timeline.set('#pathshape__1', {  attr : {"stroke-dashoffset" : 199.762} }, 2);
      scene.Main_Timeline.set('#pathshape__2', {  attr : {"stroke-dashoffset" : 253.378} }, 2);
      scene.Main_Timeline.set('#pathshape__3', {  attr : {"stroke-dashoffset" : 369.3391} }, 2);
      scene.Main_Timeline.set('#pathshape__4', {  attr : {"stroke-dashoffset" : 411.0118} }, 2);
      scene.Main_Timeline.set('#pathshape__5', {  attr : {"stroke-dashoffset" : 425.6107} }, 2);
      scene.Main_Timeline.set('#pathshape__6', {  attr : {"stroke-dashoffset" : 369.3391} }, 2);
      scene.Main_Timeline.set('#Pen', { opacity : 1 }, 2);
      scene.Main_Timeline.to(scene.svg('Pen'), 2, { pathProgress : 1, ease : Power0.easeNone }, 0);
      scene.Main_Timeline.set(scene.svg('ellipse'), { scaleY : 0.01, scaleX : 0.01 }, 4);
      scene.Main_Timeline.set(scene.svg('clipgroup_clipGeometry'), { scaleY : 0.01, scaleX : 0.01 }, 4);
      scene.Main_Timeline.set('#clipgroup', { opacity : 1 }, 4);
      scene.Main_Timeline.set('#dolphin2', { opacity : 1 }, 5);
      scene.Main_Timeline.set(scene.svg('ellipse__0'), { scaleY : 0.01, scaleX : 0.01 }, 5);
      scene.Main_Timeline.set(scene.svg('clipgroup__0_clipGeometry'), { scaleY : 0.01, scaleX : 0.01 }, 5);
      scene.Main_Timeline.set('#clipgroup__0', { opacity : 1 }, 5);
      scene.Main_Timeline.set('#group', { opacity : 1 }, 6);
      scene.Main_Timeline.set('#text1', { opacity : 1 }, 6.1);
      scene.Main_Timeline.to(scene.svg('ellipse__1'), 6.1, { y : 1026.7369, x : -696.2875, ease : Power0.easeNone }, 0);
      scene.Main_Timeline.to(scene.svg('ellipse__2'), 6.1, { y : -1496.6706, x : -54.0652, ease : Power0.easeNone }, 0);
      scene.Main_Timeline.to(scene.svg('ellipse__3'), 6.1, { y : -828.4438, x : 902.1237, ease : Power0.easeNone }, 0);
      scene.Main_Timeline.to(scene.svg('ellipse__4'), 6.1, { y : -431.367, x : -532.7946, ease : Power0.easeNone }, 0);
      scene.Main_Timeline.to(scene.svg('ellipse__5'), 6.1, { y : 753.4711, x : -982.6483, ease : Power0.easeNone }, 0);
      scene.Main_Timeline.to(scene.svg('ellipse__6'), 6.1, { y : -160.4638, x : 1130.2719, ease : Power0.easeNone }, 0);
      scene.Main_Timeline.to(scene.svg('ellipse__7'), 6.1, { y : -670.8516, x : -152.6437, ease : Power0.easeNone }, 0);
      scene.Main_Timeline.to(scene.svg('ellipse__8'), 6.1, { y : -143.3735, x : 468.0985, ease : Power0.easeNone }, 0);
      scene.Main_Timeline.to(scene.svg('ellipse__9'), 6.1, { y : 23.6929, x : -1337.4331, ease : Power0.easeNone }, 0);
      scene.Main_Timeline.set('#text3', { opacity : 1 }, 8.6);
      scene.Main_Timeline.to('#Pen', 0.3, { opacity : 0, ease : Power0.easeNone }, 2);
      scene.Main_Timeline.to('#pathshape', 2, { ease : Power0.easeNone,  attr : {"stroke-dashoffset" : 0} }, 2);
      scene.Main_Timeline.to('#pathshape__0', 2, { ease : Power0.easeNone,  attr : {"stroke-dashoffset" : 0} }, 2);
      scene.Main_Timeline.to('#pathshape__1', 2, { ease : Power0.easeNone,  attr : {"stroke-dashoffset" : 0} }, 2);
      scene.Main_Timeline.to('#pathshape__2', 2, { ease : Power0.easeNone,  attr : {"stroke-dashoffset" : 0} }, 2);
      scene.Main_Timeline.to('#pathshape__3', 2, { ease : Power0.easeNone,  attr : {"stroke-dashoffset" : 0} }, 2);
      scene.Main_Timeline.to('#pathshape__4', 2, { ease : Power0.easeNone,  attr : {"stroke-dashoffset" : 0} }, 2);
      scene.Main_Timeline.to('#pathshape__5', 2, { ease : Power0.easeNone,  attr : {"stroke-dashoffset" : 0} }, 2);
      scene.Main_Timeline.to('#pathshape__6', 2, { ease : Power0.easeNone,  attr : {"stroke-dashoffset" : 0} }, 2);
      scene.Main_Timeline.to(scene.svg('ellipse'), 1, { scaleY : 1, scaleX : 1, ease : Power1.easeIn }, 4);
      scene.Main_Timeline.to(scene.svg('clipgroup_clipGeometry'), 1, { scaleY : 1, scaleX : 1, ease : Power1.easeIn }, 4);
      scene.Main_Timeline.set('#clipgroup', { opacity : 1 }, 8.6);
      scene.Main_Timeline.to('#dolphin2', 0.5, { opacity : 0, ease : Power0.easeNone }, 5);
      scene.Main_Timeline.to(scene.svg('ellipse__0'), 1, { scaleY : 1, scaleX : 1, ease : Power1.easeIn }, 5);
      scene.Main_Timeline.to(scene.svg('clipgroup__0_clipGeometry'), 1, { scaleY : 1, scaleX : 1, ease : Power1.easeIn }, 5);
      scene.Main_Timeline.set('#clipgroup__0', { opacity : 1 }, 8.6);
      scene.Main_Timeline.set(scene.svg('ellipse__2'), { scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 6.088);
      scene.Main_Timeline.set(scene.svg('ellipse__5'), { scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 6.177);
      scene.Main_Timeline.set(scene.svg('ellipse__6'), { scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 6.266);
      scene.Main_Timeline.set(scene.svg('ellipse__3'), { scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 6.355);
      scene.Main_Timeline.set(scene.svg('ellipse__1'), { scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 6.444);
      scene.Main_Timeline.set(scene.svg('ellipse__9'), { scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 6.533);
      scene.Main_Timeline.set(scene.svg('ellipse__8'), { scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 6.622);
      scene.Main_Timeline.to(scene.svg('ellipse__4'), 0.7, { scaleY : 2.3296, scaleX : 2.3296, rotation : 323.0179, ease : Power1.easeIn }, 6);
      scene.Main_Timeline.set(scene.svg('ellipse__7'), { scaleY : 0.1, scaleX : 0.1, rotation : 0 }, 6.711);
      scene.Main_Timeline.set('#group', { opacity : 1 }, 7.5);
      scene.Main_Timeline.to(scene.svg('ellipse__2'), 0.7, { scaleY : 2.375, scaleX : 2.375, rotation : 252.8082, ease : Power1.easeIn }, 6.088);
      scene.Main_Timeline.to('#text1', 0.5, { opacity : 0, ease : Power0.easeNone }, 6.1);
      scene.Main_Timeline.to(scene.svg('ellipse__5'), 0.7, { scaleY : 1.4195, scaleX : 1.4195, rotation : 318.0835, ease : Power1.easeIn }, 6.177);
      scene.Main_Timeline.to(scene.svg('ellipse__6'), 0.7, { scaleY : 1.2339, scaleX : 1.2339, rotation : 350.4383, ease : Power1.easeIn }, 6.266);
      scene.Main_Timeline.to(scene.svg('ellipse__3'), 0.7, { scaleY : 1.064, scaleX : 1.064, rotation : 254.1853, ease : Power1.easeIn }, 6.355);
      scene.Main_Timeline.to(scene.svg('ellipse__1'), 0.7, { scaleY : 2.8374, scaleX : 2.8374, rotation : 313.0818, ease : Power1.easeIn }, 6.444);
      scene.Main_Timeline.to(scene.svg('ellipse__9'), 0.7, { scaleY : 2.0362, scaleX : 2.0362, rotation : 224.8578, ease : Power1.easeIn }, 6.533);
      scene.Main_Timeline.to(scene.svg('ellipse__8'), 0.7, { scaleY : 1.0769, scaleX : 1.0769, rotation : 258.9575, ease : Power1.easeIn }, 6.622);
      scene.Main_Timeline.set(scene.svg('ellipse__4'), { scaleY : 2.3296, scaleX : 2.3296, rotation : 323.0179 }, 7.5);
      scene.Main_Timeline.to(scene.svg('ellipse__7'), 0.7, { scaleY : 2.5465, scaleX : 2.5465, rotation : 395.757, ease : Power1.easeIn }, 6.711);
      scene.Main_Timeline.set(scene.svg('ellipse__2'), { scaleY : 2.375, scaleX : 2.375, rotation : 252.8082 }, 7.5);
      scene.Main_Timeline.set(scene.svg('ellipse__5'), { scaleY : 1.4195, scaleX : 1.4195, rotation : 318.0835 }, 7.5);
      scene.Main_Timeline.set(scene.svg('ellipse__6'), { scaleY : 1.2339, scaleX : 1.2339, rotation : 350.4383 }, 7.5);
      scene.Main_Timeline.set(scene.svg('ellipse__3'), { scaleY : 1.064, scaleX : 1.064, rotation : 254.1853 }, 7.5);
      scene.Main_Timeline.set(scene.svg('ellipse__1'), { scaleY : 2.8374, scaleX : 2.8374, rotation : 313.0818 }, 7.5);
      scene.Main_Timeline.set(scene.svg('ellipse__9'), { scaleY : 2.0362, scaleX : 2.0362, rotation : 224.8578 }, 7.5);
      scene.Main_Timeline.set(scene.svg('ellipse__8'), { scaleY : 1.0769, scaleX : 1.0769, rotation : 258.9575 }, 7.5);
      scene.Main_Timeline.set(scene.svg('ellipse__7'), { scaleY : 2.5465, scaleX : 2.5465, rotation : 395.757 }, 7.5);
      scene.Main_Timeline.to('#group', 3.5, { opacity : 0, ease : Power0.easeNone }, 7.5);
      scene.Main_Timeline.to('#clipgroup', 0.5, { opacity : 0, ease : Power0.easeNone }, 8.6);
      scene.Main_Timeline.to('#clipgroup__0', 0.5, { opacity : 0, ease : Power0.easeNone }, 8.6);
      scene.Main_Timeline.set('#text3', { opacity : 1 }, 9.1);
      scene.Main_Timeline.set(scene.svg('pathshape__10'), { scaleY : 1, scaleX : 1, rotation : 0 }, 9.231);
      scene.Main_Timeline.set('#pathshape__10', { opacity : 1 }, 9.231);
      scene.Main_Timeline.set(scene.svg('pathshape__13'), { scaleY : 1, scaleX : 1, rotation : 0 }, 9.362);
      scene.Main_Timeline.set('#pathshape__13', { opacity : 1 }, 9.362);
      scene.Main_Timeline.set(scene.svg('pathshape__11'), { scaleY : 1, scaleX : 1, rotation : 0 }, 9.493);
      scene.Main_Timeline.set('#pathshape__11', { opacity : 1 }, 9.493);
      scene.Main_Timeline.set(scene.svg('pathshape__14'), { scaleY : 1, scaleX : 1, rotation : 0 }, 9.625);
      scene.Main_Timeline.set('#pathshape__14', { opacity : 1 }, 9.625);
      scene.Main_Timeline.set(scene.svg('pathshape__7'), { scaleY : 1, scaleX : 1, rotation : 0 }, 9.756);
      scene.Main_Timeline.set('#pathshape__7', { opacity : 1 }, 9.756);
      scene.Main_Timeline.set(scene.svg('pathshape__12'), { scaleY : 1, scaleX : 1, rotation : 0 }, 9.887);
      scene.Main_Timeline.set('#pathshape__12', { opacity : 1 }, 9.887);
      scene.Main_Timeline.set(scene.svg('pathshape__8'), { scaleY : 1, scaleX : 1, rotation : 0 }, 10.018);
      scene.Main_Timeline.set('#pathshape__8', { opacity : 1 }, 10.018);
      scene.Main_Timeline.to(scene.svg('pathshape__9'), 1.95, { scaleY : 4, scaleX : 4, rotation : 81.4476, ease : Power0.easeNone }, 9.1);
      scene.Main_Timeline.to('#pathshape__9', 1.95, { opacity : 0, ease : Power0.easeNone }, 9.1);
      scene.Main_Timeline.to(scene.svg('pathshape__10'), 1.95, { scaleY : 4, scaleX : 4, rotation : 114.2371, ease : Power0.easeNone }, 9.231);
      scene.Main_Timeline.to('#pathshape__10', 1.95, { opacity : 0, ease : Power0.easeNone }, 9.231);
      scene.Main_Timeline.to(scene.svg('pathshape__13'), 1.95, { scaleY : 4, scaleX : 4, rotation : 96.4882, ease : Power0.easeNone }, 9.362);
      scene.Main_Timeline.to('#pathshape__13', 1.95, { opacity : 0, ease : Power0.easeNone }, 9.362);
      scene.Main_Timeline.to(scene.svg('pathshape__11'), 1.95, { scaleY : 4, scaleX : 4, rotation : 20.938, ease : Power0.easeNone }, 9.493);
      scene.Main_Timeline.to('#pathshape__11', 1.95, { opacity : 0, ease : Power0.easeNone }, 9.493);
      scene.Main_Timeline.to(scene.svg('pathshape__14'), 1.95, { scaleY : 4, scaleX : 4, rotation : -105.8281, ease : Power0.easeNone }, 9.625);
      scene.Main_Timeline.to('#pathshape__14', 1.95, { opacity : 0, ease : Power0.easeNone }, 9.625);
      scene.Main_Timeline.to(scene.svg('pathshape__7'), 1.95, { scaleY : 4, scaleX : 4, rotation : 21.1985, ease : Power0.easeNone }, 9.756);
      scene.Main_Timeline.to('#pathshape__7', 1.95, { opacity : 0, ease : Power0.easeNone }, 9.756);
      scene.Main_Timeline.to(scene.svg('pathshape__12'), 1.95, { scaleY : 4, scaleX : 4, rotation : 146.1697, ease : Power0.easeNone }, 9.887);
      scene.Main_Timeline.to('#pathshape__12', 1.95, { opacity : 0, ease : Power0.easeNone }, 9.887);
      scene.Main_Timeline.to(scene.svg('pathshape__8'), 1.95, { scaleY : 4, scaleX : 4, rotation : -20.816, ease : Power0.easeNone }, 10.018);
      scene.Main_Timeline.to('#pathshape__8', 1.95, { opacity : 0, ease : Power0.easeNone }, 10.018);
      scene.Main_Timeline.set(scene.svg('pathshape__9'), { scaleY : 4, scaleX : 4, rotation : 81.4476 }, 12.1);
      scene.Main_Timeline.set('#pathshape__9', { opacity : 0 }, 12.1);
      scene.Main_Timeline.set(scene.svg('pathshape__10'), { scaleY : 4, scaleX : 4, rotation : 114.2371 }, 12.1);
      scene.Main_Timeline.set('#pathshape__10', { opacity : 0 }, 12.1);
      scene.Main_Timeline.set(scene.svg('pathshape__13'), { scaleY : 4, scaleX : 4, rotation : 96.4882 }, 12.1);
      scene.Main_Timeline.set('#pathshape__13', { opacity : 0 }, 12.1);
      scene.Main_Timeline.set(scene.svg('pathshape__11'), { scaleY : 4, scaleX : 4, rotation : 20.938 }, 12.1);
      scene.Main_Timeline.set('#pathshape__11', { opacity : 0 }, 12.1);
      scene.Main_Timeline.set(scene.svg('pathshape__14'), { scaleY : 4, scaleX : 4, rotation : -105.8281 }, 12.1);
      scene.Main_Timeline.set('#pathshape__14', { opacity : 0 }, 12.1);
      scene.Main_Timeline.set(scene.svg('pathshape__7'), { scaleY : 4, scaleX : 4, rotation : 21.1985 }, 12.1);
      scene.Main_Timeline.set('#pathshape__7', { opacity : 0 }, 12.1);
      scene.Main_Timeline.set(scene.svg('pathshape__12'), { scaleY : 4, scaleX : 4, rotation : 146.1697 }, 12.1);
      scene.Main_Timeline.set('#pathshape__12', { opacity : 0 }, 12.1);
      scene.Main_Timeline.set(scene.svg('pathshape__8'), { scaleY : 4, scaleX : 4, rotation : -20.816 }, 12.1);
      scene.Main_Timeline.set('#pathshape__8', { opacity : 0 }, 12.1);
      scene.onload = function() {
        animation.Scene_1.Main_Timeline.restart();
      }
      scene.onunload = function() {
        animation.Scene_1.Main_Timeline.pause();
      }
      return scene;
    }
    function init() {
      animation.Scene_1 = build__Scene_1();
      animation.showScene(animation.Scene_1);
    }
              
            
!
999px

Console