css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

Pen Settings

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. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <h1>Durable Functions: Pattern #1, Function Chaining</h1>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 50 485 540">
  <defs>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_43" data-name="¡ÂÁ˚ÏˇÌÌ˚È „‡‰ËÂÌÚ 43" cx="431.51" cy="508.38" r="1.42" gradientTransform="translate(-105.13 580.45) rotate(-90.8)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#42e8e0"/>
      <stop offset="1" stop-color="#42e8e0"/>
    </radialGradient>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_53" data-name="¡ÂÁ˚ÏˇÌÌ˚È „‡‰ËÂÌÚ 53" cx="435.47" cy="508.38" r="1.42" gradientTransform="translate(-105.13 580.45) rotate(-90.8)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#3bc3ca"/>
      <stop offset="1" stop-color="#3bc3ca"/>
    </radialGradient>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_52" data-name="¡ÂÁ˚ÏˇÌÌ˚È „‡‰ËÂÌÚ 52" cx="439.43" cy="508.38" r="1.42" gradientTransform="translate(-105.13 580.45) rotate(-90.8)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#349fb4"/>
      <stop offset="1" stop-color="#349fb4"/>
    </radialGradient>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_51" data-name="¡ÂÁ˚ÏˇÌÌ˚È „‡‰ËÂÌÚ 51" cx="443.39" cy="508.38" r="1.42" gradientTransform="translate(-105.13 580.45) rotate(-90.8)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#2d7b9e"/>
      <stop offset="1" stop-color="#2d7b9e"/>
    </radialGradient>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_50" data-name="¡ÂÁ˚ÏˇÌÌ˚È „‡‰ËÂÌÚ 50" cx="447.35" cy="508.38" r="1.42" gradientTransform="translate(-105.13 580.45) rotate(-90.8)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#265687"/>
      <stop offset="1" stop-color="#265687"/>
    </radialGradient>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_49" data-name="¡ÂÁ˚ÏˇÌÌ˚È „‡‰ËÂÌÚ 49" cx="451.31" cy="508.38" r="1.42" gradientTransform="translate(-105.13 580.45) rotate(-90.8)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#1f3271"/>
      <stop offset="1" stop-color="#1f3271"/>
    </radialGradient>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_40" data-name="¡ÂÁ˚ÏˇÌÌ˚È „‡‰ËÂÌÚ 40" cx="455.27" cy="508.38" r="1.42" gradientTransform="translate(-105.13 580.45) rotate(-90.8)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#180d5b"/>
      <stop offset="1" stop-color="#180d5b"/>
    </radialGradient>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_43-2" cx="377.58" cy="651.05" r="1.42" gradientTransform="translate(1042.16 -280.57) rotate(89.2)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_43"/>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_53-2" cx="381.54" cy="651.05" r="1.42" gradientTransform="translate(1042.16 -280.57) rotate(89.2)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_53"/>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_52-2" cx="385.5" cy="651.05" r="1.42" gradientTransform="translate(1042.16 -280.57) rotate(89.2)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_52"/>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_51-2" cx="389.46" cy="651.05" r="1.42" gradientTransform="translate(1042.16 -280.57) rotate(89.2)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_51"/>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_50-2" cx="393.42" cy="651.05" r="1.42" gradientTransform="translate(1042.16 -280.57) rotate(89.2)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_50"/>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_49-2" cx="397.38" cy="651.05" r="1.42" gradientTransform="translate(1042.16 -280.57) rotate(89.2)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_49"/>
    <clipPath id="clip-path" transform="translate(0 52.69)">
      <path d="M355.85,135.63l.57.33a1.7,1.7,0,0,1,.6,2.32,1.68,1.68,0,0,1-2.32.6l-.56-.33Z" fill="none"/>
    </clipPath>
    <clipPath id="clip-path-2" transform="translate(0 52.69)">
      <path d="M310.3,112.85l-.56-.33a1.69,1.69,0,1,1,1.71-2.92l.56.33Z" fill="none"/>
    </clipPath>
    <filter id="luminosity-noclip" x="369" y="101" width="13" height="14" filterUnits="userSpaceOnUse" color-interpolation-filters="sRGB">
      <feFlood flood-color="#fff" result="bg"/>
      <feBlend in="SourceGraphic" in2="bg"/>
    </filter>
    <mask id="mask" x="369" y="153.69" width="13" height="14" maskUnits="userSpaceOnUse">
      <g filter="url(#luminosity-noclip)">
        <g transform="translate(0 52.69)">
          <image width="13" height="14" transform="translate(369 101)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAAACXBIWXMAAAsSAAALEgHS3X78AAAA2UlEQVQoU5WQsY2DQBBF3ywCAlgQhgXqICGiAYqgISKKsFyBGyAiISSimLmIO1n2HdyTRprgP33NAKhzTlWVq2OKosA5x38wZVnied5Z7gWzbZtUVcUwDHoWPjAAdV1TFMVZ9hsDcLvd8DyPcRwvtRmAaZokz/PLt5ljSZKEOI55PB6nbaL6k7nf72qMIU1T+r6XSxLA8/lUEcFaS9d1H8U3CWCeZxURgiCgbds38aMEsCyLigi+79M0zYv4qwSwrquKCGEYkmUZ1lqstfKndLDvu0ZRdHxYvgCiPltecteikAAAAABJRU5ErkJggg=="/>
        </g>
      </g>
    </mask>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_43-3" cx="742.22" cy="223.21" r="1.42" gradientTransform="matrix(-0.87, -0.5, -0.5, 0.87, 1091.02, 304)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_43"/>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_53-3" cx="746.18" cy="223.21" r="1.42" gradientTransform="matrix(-0.87, -0.5, -0.5, 0.87, 1091.02, 304)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_53"/>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_52-3" cx="750.14" cy="223.21" r="1.42" gradientTransform="matrix(-0.87, -0.5, -0.5, 0.87, 1091.02, 304)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_52"/>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_51-3" cx="754.1" cy="223.21" r="1.42" gradientTransform="matrix(-0.87, -0.5, -0.5, 0.87, 1091.02, 304)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_51"/>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_50-3" cx="758.06" cy="223.21" r="1.42" gradientTransform="matrix(-0.87, -0.5, -0.5, 0.87, 1091.02, 304)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_50"/>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_49-3" cx="762.02" cy="223.22" r="1.42" gradientTransform="matrix(-0.87, -0.5, -0.5, 0.87, 1091.02, 304)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_49"/>
    <radialGradient id="_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_40-2" cx="765.98" cy="223.22" r="1.42" gradientTransform="matrix(-0.87, -0.5, -0.5, 0.87, 1091.02, 304)" xlink:href="#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_40"/>
    <linearGradient id="linear-gradient" x1="369" y1="173.78" x2="369" y2="-18" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="aqua" stop-opacity="0.5"/>
      <stop offset="0.07" stop-color="aqua" stop-opacity="0.4"/>
      <stop offset="0.17" stop-color="aqua" stop-opacity="0.27"/>
      <stop offset="0.28" stop-color="aqua" stop-opacity="0.17"/>
      <stop offset="0.4" stop-color="aqua" stop-opacity="0.1"/>
      <stop offset="0.53" stop-color="aqua" stop-opacity="0.04"/>
      <stop offset="0.7" stop-color="aqua" stop-opacity="0.01"/>
      <stop offset="1" stop-color="aqua" stop-opacity="0"/>
    </linearGradient>
    <linearGradient id="linear-gradient-2" x1="-157.64" y1="975.89" x2="-157.19" y2="975.43" gradientTransform="matrix(205.52, 0, 0, -131.15, 32723.7, 128402.58)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#fff"/>
      <stop offset="1" stop-color="#843cf6"/>
    </linearGradient>
    <linearGradient id="linear-gradient-3" x1="-157.66" y1="975.8" x2="-157.2" y2="975.35" gradientTransform="matrix(205.52, 0, 0, -131.15, 32723.69, 128385.27)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#1985b7"/>
      <stop offset="1" stop-color="#691be5"/>
    </linearGradient>
    <linearGradient id="linear-gradient-4" x1="-157.64" y1="975.73" x2="-157.19" y2="975.27" gradientTransform="matrix(205.52, 0, 0, -131.15, 32723.7, 128364.49)" xlink:href="#linear-gradient-2"/>
    <linearGradient id="linear-gradient-5" x1="-157.66" y1="975.64" x2="-157.21" y2="975.2" gradientTransform="matrix(205.52, 0, 0, -131.15, 32723.69, 128347.18)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#38b8f2"/>
      <stop offset="1" stop-color="#843cf6"/>
    </linearGradient>
    <linearGradient id="linear-gradient-6" x1="-157.64" y1="976.6" x2="-157.19" y2="976.14" xlink:href="#linear-gradient-2"/>
    <linearGradient id="linear-gradient-7" x1="-157.66" y1="976.51" x2="-157.2" y2="976.06" xlink:href="#linear-gradient-3"/>
    <linearGradient id="linear-gradient-8" x1="-157.64" y1="976.44" x2="-157.19" y2="975.98" gradientTransform="matrix(205.52, 0, 0, -131.15, 32723.7, 128364.49)" xlink:href="#linear-gradient-2"/>
    <linearGradient id="linear-gradient-9" x1="-157.66" y1="976.35" x2="-157.21" y2="975.91" xlink:href="#linear-gradient-5"/>
    <linearGradient id="linear-gradient-10" x1="-157.64" y1="977.31" x2="-157.19" y2="976.86" xlink:href="#linear-gradient-2"/>
    <linearGradient id="linear-gradient-11" x1="-157.66" y1="977.23" x2="-157.2" y2="976.78" xlink:href="#linear-gradient-3"/>
    <linearGradient id="linear-gradient-12" x1="-157.64" y1="977.15" x2="-157.19" y2="976.7" gradientTransform="matrix(205.52, 0, 0, -131.15, 32723.7, 128364.49)" xlink:href="#linear-gradient-2"/>
    <linearGradient id="linear-gradient-13" x1="-157.66" y1="977.07" x2="-157.21" y2="976.63" xlink:href="#linear-gradient-5"/>
    <linearGradient id="linear-gradient-14" x1="-157.64" y1="978.03" x2="-157.19" y2="977.58" xlink:href="#linear-gradient-2"/>
    <linearGradient id="linear-gradient-15" x1="-157.66" y1="977.95" x2="-157.2" y2="977.49" xlink:href="#linear-gradient-3"/>
    <linearGradient id="linear-gradient-16" x1="-157.64" y1="977.87" x2="-157.19" y2="977.42" gradientTransform="matrix(205.52, 0, 0, -131.15, 32723.7, 128364.49)" xlink:href="#linear-gradient-2"/>
    <linearGradient id="linear-gradient-17" x1="-157.66" y1="977.79" x2="-157.21" y2="977.34" xlink:href="#linear-gradient-5"/>
    <linearGradient id="linear-gradient-18" x1="-158.97" y1="976.76" x2="-158.05" y2="975.84" xlink:href="#linear-gradient-2"/>
    <linearGradient id="linear-gradient-19" x1="-159.01" y1="976.77" x2="-158.05" y2="975.81" xlink:href="#linear-gradient-3"/>
    <linearGradient id="linear-gradient-20" x1="-158.97" y1="976.76" x2="-158.05" y2="975.83" gradientTransform="matrix(205.52, 0, 0, -131.15, 32723.7, 128364.49)" xlink:href="#linear-gradient-2"/>
    <linearGradient id="linear-gradient-21" x1="-159.01" y1="976.76" x2="-158.07" y2="975.83" xlink:href="#linear-gradient-5"/>
    <linearGradient id="linear-gradient-22" x1="-158.97" y1="977.31" x2="-158.04" y2="976.38" xlink:href="#linear-gradient-2"/>
    <linearGradient id="linear-gradient-23" x1="-159" y1="977.31" x2="-158.05" y2="976.36" xlink:href="#linear-gradient-3"/>
    <linearGradient id="linear-gradient-24" x1="-158.97" y1="977.3" x2="-158.04" y2="976.38" gradientTransform="matrix(205.52, 0, 0, -131.15, 32723.7, 128364.49)" xlink:href="#linear-gradient-2"/>
    <linearGradient id="linear-gradient-25" x1="-159" y1="977.3" x2="-158.07" y2="976.37" xlink:href="#linear-gradient-5"/>
    <radialGradient id="radial-gradient" cx="-25057.92" cy="-21859.99" r="416.4" gradientTransform="matrix(0.28, -1.93, 0, 2.08, 7169.47, -2567.62)" gradientUnits="userSpaceOnUse">
      <stop offset="0" stop-color="#42e8e0"/>
      <stop offset="0.01" stop-color="#40ddda"/>
      <stop offset="0.06" stop-color="#3aaec0"/>
      <stop offset="0.12" stop-color="#3484a9"/>
      <stop offset="0.18" stop-color="#2f6195"/>
      <stop offset="0.24" stop-color="#2b4486"/>
      <stop offset="0.31" stop-color="#282e79"/>
      <stop offset="0.38" stop-color="#261e71"/>
      <stop offset="0.46" stop-color="#24156c"/>
      <stop offset="0.58" stop-color="#24126a"/>
      <stop offset="0.99" stop-color="#24126a" stop-opacity="0.3"/>
    </radialGradient>
  </defs>
  <title>durable1</title>
  <g style="isolation: isolate">
    <g id="Layer_1" data-name="Layer 1">
      <rect y="49.69" width="485" height="543"/>
      <g id="drawing-lines" opacity="0.51">
        <path d="M227.9,249.09,256,249s14,1,15-15,0-53,0-53,1-14,17-13,36,0,36,0" transform="translate(0 52.69)" fill="none" stroke="#09d6d0" stroke-miterlimit="10"/>
        <path d="M228,364.5l28.1.09s14-1,15,15,0,53,0,53,1,14,17,13,36,0,36,0" transform="translate(0 52.69)" fill="none" stroke="#09d6d0" stroke-miterlimit="10"/>
        <path d="M230.63,298.72h28.76a5.8,5.8,0,0,1,1.11.11c2.66.49,13-1.33,12.86-11.47-.19-13.89.14-16.86.14-16.86s0-8,10-8H324" transform="translate(0 52.69)" fill="none" stroke="#09d6d0" stroke-miterlimit="10"/>
        <path d="M229.63,324.15h28.76a6.74,6.74,0,0,0,1.11-.09c2.66-.42,13,1.13,12.86,9.74-.19,11.78.14,14.31.14,14.31s0,6.79,10,6.79H323" transform="translate(0 52.69)" fill="none" stroke="#09d6d0" stroke-miterlimit="10"/>
      </g>
      <g id="bright-lines" opacity="0.51">
        <path id="line1" d="M227.9,249.09,256,249s14,1,15-15,0-53,0-53,1-14,17-13,36,0,36,0" transform="translate(0 52.69)" fill="none" stroke="#f7f9f9" stroke-miterlimit="10"/>
        <path id="line4" d="M228,364.5l28.1.09s14-1,15,15,0,53,0,53,1,14,17,13,36,0,36,0" transform="translate(0 52.69)" fill="none" stroke="#f7f9f9" stroke-miterlimit="10"/>
        <path id="line2" d="M230.63,298.72h28.76a5.8,5.8,0,0,1,1.11.11c2.66.49,13-1.33,12.86-11.47-.19-13.89.14-16.86.14-16.86s0-8,10-8H324" transform="translate(0 52.69)" fill="none" stroke="#f7f9f9" stroke-miterlimit="10"/>
        <path id="line3" d="M229.63,324.15h28.76a6.74,6.74,0,0,0,1.11-.09c2.66-.42,13,1.13,12.86,9.74-.19,11.78.14,14.31.14,14.31s0,6.79,10,6.79H323" transform="translate(0 52.69)" fill="none" stroke="#f7f9f9" stroke-miterlimit="10"/>
      </g>
      <g id="activated">
        <polygon points="353.66 136.58 348.56 133.63 348.56 123.27 353.66 126.21 353.66 136.58" fill="#42e8e0"/>
        <g id="dots-up">
            <path d="M397.13,140.43a1.42,1.42,0,1,1-1.4,1.44A1.43,1.43,0,0,1,397.13,140.43Z" transform="translate(0 52.69)" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_43)" style="mix-blend-mode: lighten"/>
            <path d="M397.08,136.47a1.42,1.42,0,1,1-1.4,1.44A1.42,1.42,0,0,1,397.08,136.47Z" transform="translate(0 52.69)" opacity="0.92" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_53)" style="mix-blend-mode: lighten"/>
            <path d="M397,132.51a1.42,1.42,0,1,1-1.4,1.44A1.41,1.41,0,0,1,397,132.51Z" transform="translate(0 52.69)" opacity="0.83" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_52)" style="mix-blend-mode: lighten"/>
            <path d="M397,128.55a1.42,1.42,0,1,1-1.4,1.44A1.42,1.42,0,0,1,397,128.55Z" transform="translate(0 52.69)" opacity="0.75" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_51)" style="mix-blend-mode: lighten"/>
            <path d="M396.91,124.59a1.42,1.42,0,1,1-1.4,1.44A1.41,1.41,0,0,1,396.91,124.59Z" transform="translate(0 52.69)" opacity="0.67" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_50)" style="mix-blend-mode: lighten"/>
            <path d="M396.86,120.63a1.42,1.42,0,1,1-1.41,1.44A1.42,1.42,0,0,1,396.86,120.63Z" transform="translate(0 52.69)" opacity="0.58" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_49)" style="mix-blend-mode: lighten"/>
            <path d="M396.8,116.67a1.42,1.42,0,1,1-1.4,1.44A1.42,1.42,0,0,1,396.8,116.67Z" transform="translate(0 52.69)" opacity="0.5" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_40)" style="mix-blend-mode: lighten"/>
            <path d="M396.48,107.53a1.43,1.43,0,1,1,1.4-1.44A1.41,1.41,0,0,1,396.48,107.53Z" transform="translate(0 52.69)" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_43-2)" style="mix-blend-mode: lighten"/>
            <path d="M396.54,111.49a1.43,1.43,0,1,1,1.4-1.45A1.42,1.42,0,0,1,396.54,111.49Z" transform="translate(0 52.69)" opacity="0.92" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_53-2)" style="mix-blend-mode: lighten"/>
            <path d="M396.59,115.45A1.43,1.43,0,1,1,398,114,1.43,1.43,0,0,1,396.59,115.45Z" transform="translate(0 52.69)" opacity="0.83" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_52-2)" style="mix-blend-mode: lighten"/>
            <path d="M396.65,119.41a1.43,1.43,0,1,1,1.4-1.45A1.42,1.42,0,0,1,396.65,119.41Z" transform="translate(0 52.69)" opacity="0.75" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_51-2)" style="mix-blend-mode: lighten"/>
            <path d="M396.7,123.37a1.43,1.43,0,1,1,1.41-1.45A1.43,1.43,0,0,1,396.7,123.37Z" transform="translate(0 52.69)" opacity="0.67" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_50-2)" style="mix-blend-mode: lighten"/>
            <path d="M396.76,127.33a1.43,1.43,0,1,1,1.4-1.45A1.42,1.42,0,0,1,396.76,127.33Z" transform="translate(0 52.69)" opacity="0.58" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_49-2)" style="mix-blend-mode: lighten"/>
        </g>
        <g id="beam-r" opacity="0.5" style="mix-blend-mode: lighten">
          <g clip-path="url(#clip-path)">
            <image width="9" height="8" transform="translate(354 187.69)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAkAAAAICAYAAAArzdW1AAAACXBIWXMAAAsSAAALEgHS3X78AAAAUUlEQVQYV3WPwQ0AIQgEF6vwaStn4bZy/s4u5l4YNUhCwmwGEgxQHR1JarmYgkor1NHxhU2KwjPbLp2iy1dplQ2YEEktF0sr3L4TEPbzvfj8A+z+QCISsKjsAAAAAElFTkSuQmCC"/>
          </g>
          <image width="48" height="30" transform="translate(309 161.69)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAADAAAAAeCAYAAABqpJ3BAAAACXBIWXMAAAsSAAALEgHS3X78AAACd0lEQVRYR9XVO2sUURjG8f/7ntvs7MZEEIwRNUKUIIhYKIhpFAs/QLCJgiAIioKFKKkEGxHS2QiChQYbaxGbIGKhImJhIeINRdg6X+BYTM5GcWMm2dvkqaY4y57fPO+ZIzFGAEY3nY4AzcV5YQNFYXnzIrBt5Ez8/0+qFYkxLgNUEKOIUVDhV/N+5duQrUMzrbePCGINCIg1BcYbfn69W1mINhfnZXnzWrRgFYyAVQB2Tl6q7FhJOsQAY1vORtFi46KKOFM8G0WDRYLl25u5SrXxFwBg+9i5iAji0ghZxBsANFjwFlP3fH52sxKQfwApOyYuRpbGSYwiwSKZQ4ygeUC8Qbzl0+PZgUJWBKTsOnAlJgBG0Zor2nEGySzqHR8fXh0YYlVAyu6j16PWXNFGzSMqBcYatO6RPPBh7nzfIaUBABMnb0Sk2DhOUV80IMEgucc0MiRY3s/O9A2yJkDK3lO3oliDZg7NPeJM0UawiLdoI/Du8nRfEOsCpOy7cCdq5kAF0whgFTOUIc5ihjMk87yePtFTSEcAgP3X7kWMtMZHgi1Gq+7RoQwzkiNGeTl1uCeQjgEpB28/iuKWzsJwDa354g6xiuYebQS0Hni+Z7KrkK4BUg49eBK1HoqbO/eIUczmHHG2OCuNwMLoeNcQXQekHHn6ooDUfHHQg0UzC9a01nQD0jMAwNSrt1GDawEkc23XdQLpKSDl2I8vUYyA0RXXrBfRF0DK8eb3Vf9srZC+AqAcAspD+g5IKQMpgxgYIKVTyMABUA4B7SGVAKSsB1IpQEoZSEJUEpBSBrLyzVKBbIivUNm0a2NhdFwq3cCfWRgdl3aN/AbZnrwbld1ajwAAAABJRU5ErkJggg=="/>
          <g clip-path="url(#clip-path-2)">
            <image width="10" height="7" transform="translate(303 158.69)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAoAAAAHCAYAAAAxrNxjAAAACXBIWXMAAAsSAAALEgHS3X78AAAATUlEQVQYV4WPsQ3AMAgED3qnTXZLxvNwrr0AKSIk64Pkq7jXC4FFBADX8XwDMGY3BNdS5QB2tvsXruT2bTGx6kZlzG6+SvVE4ghaTn8Bm2Mgfgxhr2YAAAAASUVORK5CYII="/>
          </g>
        </g>
        <g id="wheel">
          <path d="M378.54,106.81a2.13,2.13,0,0,1-1-.31,4.89,4.89,0,0,1-2.19-3.8,1.42,1.42,0,0,1,2.31-1.34,4.86,4.86,0,0,1,2.2,3.8,1.64,1.64,0,0,1-.69,1.49A1.26,1.26,0,0,1,378.54,106.81Zm-1.91-5.51a1,1,0,0,0-.49.12,1.39,1.39,0,0,0-.57,1.28,4.59,4.59,0,0,0,2.07,3.59,1.41,1.41,0,0,0,1.39.15,1.39,1.39,0,0,0,.57-1.28,4.58,4.58,0,0,0-2.08-3.59A1.82,1.82,0,0,0,376.63,101.3Z" transform="translate(0 52.69)" fill="#42e8e0"/>
          <g mask="url(#mask)">
            <image width="13" height="14" transform="translate(369 153.69)" xlink:href="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAAACXBIWXMAAAsSAAALEgHS3X78AAAAYklEQVQoU52SwRGAMAgED6vgSStaOK3En3aBr4w6koDcm529AWg9mgGAshCSWaIBLzWo19rO3aLhnpoJuJeQtdVNwD+ba4rAF/Q88Az8mDKgWy8CyWxc3wOUhaYrVxbyHvkCEGYoDHNQKoYAAAAASUVORK5CYII="/>
          </g>
          <path d="M378.88,104.68c0,.83-.58,1.16-1.3.75a2.89,2.89,0,0,1-1.29-2.25c0-.83.58-1.16,1.29-.75A2.86,2.86,0,0,1,378.88,104.68Z" transform="translate(0 52.69)" fill="#42e8e0"/>
          <g id="outer-fan">
            <polygon points="378.23 148.99 376.94 148.25 376.94 145.72 378.23 146.46 378.23 148.99" fill="#42e8e0"/>
            <polygon points="376.06 147.9 374.83 147.65 374.15 144.85 375.38 145.1 376.06 147.9" fill="#42e8e0" opacity="0.8"/>
            <polygon points="374.03 147.66 372.99 147.93 371.7 145.14 372.74 144.87 374.03 147.66" fill="#42e8e0" opacity="0.6"/>
            <polygon points="372.36 148.3 371.6 149.06 369.83 146.55 370.58 145.79 372.36 148.3" fill="#42e8e0" opacity="0.4"/>
            <polygon points="371.19 149.75 370.79 150.93 368.71 148.95 369.11 147.77 371.19 149.75" fill="#42e8e0" opacity="0.2"/>
            <polygon points="370.65 151.88 370.65 153.36 368.46 152.1 368.46 150.61 370.65 151.88" fill="#42e8e0" opacity="0.1"/>
          </g>
          <g id="fan">
            <polygon points="377.81 153.23 377.36 152.97 377.36 149.19 377.81 149.45 377.81 153.23" fill="#42e8e0" opacity="0.2"/>
            <polygon points="376.86 152.77 376.43 152.68 375.42 148.51 375.85 148.59 376.86 152.77" fill="#42e8e0" opacity="0.4"/>
            <polygon points="375.97 152.69 375.61 152.78 373.69 148.62 374.05 148.52 375.97 152.69" fill="#42e8e0" opacity="0.6"/>
            <polygon points="375.25 152.99 374.98 153.26 372.34 149.51 372.6 149.24 375.25 152.99" fill="#42e8e0" opacity="0.8"/>
            <polygon points="374.75 153.65 374.61 154.06 371.5 151.1 371.64 150.69 374.75 153.65" fill="#42e8e0"/>
            <polygon points="374.53 154.6 374.53 155.12 371.26 153.23 371.26 152.71 374.53 154.6" fill="#42e8e0"/>
            <polygon points="374.61 155.75 374.75 156.32 371.64 155.69 371.5 155.12 374.61 155.75" fill="#42e8e0"/>
            <polygon points="374.98 156.98 375.25 157.56 372.6 158.25 372.34 157.67 374.98 156.98" fill="#42e8e0"/>
            <polygon points="375.61 158.18 375.97 158.7 374.05 160.64 373.69 160.12 375.61 158.18" fill="#42e8e0"/>
            <polygon points="376.43 159.22 376.86 159.63 375.85 162.64 375.42 162.23 376.43 159.22" fill="#42e8e0"/>
            <polygon points="377.36 160.01 377.81 160.28 377.81 164.05 377.36 163.79 377.36 160.01" fill="#42e8e0"/>
          </g>
          <g id="outer-circle">
            <path d="M378.7,91a26.86,26.86,0,0,1,10.49,17.23l2.24,1.89c-.73-8-6.07-17.15-12.73-21.6Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.6"/>
            <path d="M387.11,117.43c-2.14,2.16-5.61,2.37-9.53.1a18.76,18.76,0,0,1-2.68-1.9l-1,1.72a22.54,22.54,0,0,0,3.64,2.66c5,2.86,9.3,2.38,11.77-.69Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.2"/>
            <path d="M369.23,112l1-1.72a24.89,24.89,0,0,1-4.4-13.13c0-7.08,4.69-10.19,10.67-7.39V87.26c-7.17-3.48-12.81.18-12.81,8.63C363.66,101.15,365.85,107.09,369.23,112Z" transform="translate(0 52.69)" fill="#42e8e0"/>
          </g>
          <g>
            <polygon points="382.19 166.68 381.05 166.02 381.05 149 382.19 149.66 382.19 166.68" fill="#42e8e0"/>
            <polygon points="383.82 167.62 382.68 166.96 382.68 159.56 383.82 160.22 383.82 167.62" fill="#42e8e0" opacity="0.8"/>
            <polygon points="385.57 168.63 384.42 167.97 384.42 156.19 385.57 156.85 385.57 168.63" fill="#42e8e0" opacity="0.6"/>
            <polygon points="387.29 169.62 386.14 168.96 386.14 159.79 387.29 160.45 387.29 169.62" fill="#42e8e0" opacity="0.2"/>
          </g>
        </g>
        <g id="dots-r">
          <path d="M335.35,125.51a1.42,1.42,0,1,0,1.94-.52A1.41,1.41,0,0,0,335.35,125.51Z" transform="translate(0 52.69)" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_43-3)" style="mix-blend-mode: lighten"/>
          <path d="M331.92,123.53a1.42,1.42,0,1,0,1.94-.52A1.41,1.41,0,0,0,331.92,123.53Z" transform="translate(0 52.69)" opacity="0.92" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_53-3)" style="mix-blend-mode: lighten"/>
          <path d="M328.49,121.55a1.42,1.42,0,1,0,1.94-.52A1.41,1.41,0,0,0,328.49,121.55Z" transform="translate(0 52.69)" opacity="0.83" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_52-3)" style="mix-blend-mode: lighten"/>
          <path d="M325.06,119.57a1.42,1.42,0,1,0,1.94-.52A1.41,1.41,0,0,0,325.06,119.57Z" transform="translate(0 52.69)" opacity="0.75" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_51-3)" style="mix-blend-mode: lighten"/>
          <path d="M321.63,117.59a1.42,1.42,0,1,0,1.94-.52A1.41,1.41,0,0,0,321.63,117.59Z" transform="translate(0 52.69)" opacity="0.67" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_50-3)" style="mix-blend-mode: lighten"/>
          <path d="M318.2,115.61a1.42,1.42,0,1,0,1.94-.52A1.41,1.41,0,0,0,318.2,115.61Z" transform="translate(0 52.69)" opacity="0.58" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_49-3)" style="mix-blend-mode: lighten"/>
          <path d="M314.77,113.63a1.42,1.42,0,1,0,1.94-.52A1.41,1.41,0,0,0,314.77,113.63Z" transform="translate(0 52.69)" opacity="0.5" fill="url(#_ÂÁ_Ï_ÌÌ_È_ËÂÌÚ_40-2)" style="mix-blend-mode: lighten"/>
        </g>
        <polygon points="362.15 107.71 360.44 106.72 360.44 104.36 362.15 105.35 362.15 107.71" fill="#42e8e0"/>
        <g id="panels" opacity="0.5">
          <g>
            <polygon points="353.66 92.28 348.56 89.34 348.56 83.45 353.66 86.39 353.66 92.28" fill="#42e8e0"/>
            <polygon points="353.66 97.55 348.56 94.6 348.56 92.25 353.66 95.19 353.66 97.55" fill="#42e8e0"/>
            <polygon points="353.66 102.81 348.56 99.86 348.56 97.51 353.66 100.45 353.66 102.81" fill="#42e8e0"/>
            <polygon points="353.66 177.02 348.56 174.07 348.56 171.72 353.66 174.66 353.66 177.02" fill="#42e8e0"/>
            <polygon points="353.66 182.28 348.56 179.34 348.56 176.98 353.66 179.93 353.66 182.28" fill="#42e8e0"/>
            <polygon points="353.66 187.54 348.56 184.6 348.56 182.24 353.66 185.19 353.66 187.54" fill="#42e8e0"/>
            <polygon points="353.66 192.8 348.56 189.86 348.56 187.5 353.66 190.45 353.66 192.8" fill="#42e8e0"/>
            <polygon points="353.66 198.07 348.56 195.12 348.56 192.76 353.66 195.71 353.66 198.07" fill="#42e8e0"/>
            <polygon points="353.66 123.3 348.56 120.36 348.56 102.77 353.66 105.71 353.66 123.3" fill="#42e8e0"/>
            <polygon points="353.66 136.58 348.56 133.63 348.56 123.27 353.66 126.21 353.66 136.58" fill="#42e8e0"/>
            <path d="M346.23,86.6l-2.58-1.48a2.34,2.34,0,0,1-1.16-2V75.65a.91.91,0,0,1,1.36-.79l2.57,1.49a2.34,2.34,0,0,1,1.17,2v7.45A.91.91,0,0,1,346.23,86.6Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.8"/>
            <path d="M340.15,90.12l-2.57-1.48a2.33,2.33,0,0,1-1.17-2V79.17a.9.9,0,0,1,1.36-.78l2.57,1.48a2.35,2.35,0,0,1,1.17,2v7.45A.9.9,0,0,1,340.15,90.12Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.6"/>
            <path d="M334.07,93.67l-2.57-1.49a2.35,2.35,0,0,1-1.17-2V82.71a.9.9,0,0,1,1.36-.78l2.58,1.48a2.34,2.34,0,0,1,1.16,2v7.45A.91.91,0,0,1,334.07,93.67Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.4"/>
            <path d="M328,97.48,325.43,96a2.33,2.33,0,0,1-1.17-2V86.53a.91.91,0,0,1,1.36-.79l2.57,1.49a2.35,2.35,0,0,1,1.17,2V96.7A.9.9,0,0,1,328,97.48Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.2"/>
            <polygon points="353.66 145.37 348.56 142.43 348.56 136.54 353.66 139.48 353.66 145.37" fill="#42e8e0"/>
            <polygon points="353.66 154.17 348.56 151.22 348.56 145.33 353.66 148.28 353.66 154.17" fill="#42e8e0"/>
            <polygon points="353.66 162.96 348.56 160.02 348.56 154.13 353.66 157.07 353.66 162.96" fill="#42e8e0"/>
            <polygon points="353.66 171.76 348.56 168.81 348.56 162.92 353.66 165.87 353.66 171.76" fill="#42e8e0"/>
          </g>
          <g>
            <polygon points="362.15 97.18 360.44 96.2 360.44 90.31 362.15 91.29 362.15 97.18" fill="#42e8e0"/>
            <polygon points="362.15 102.44 360.44 101.46 360.44 99.1 362.15 100.09 362.15 102.44" fill="#42e8e0"/>
            <polygon points="362.15 107.71 360.44 106.72 360.44 104.36 362.15 105.35 362.15 107.71" fill="#42e8e0"/>
            <polygon points="362.15 181.92 360.44 180.93 360.44 178.57 362.15 179.56 362.15 181.92" fill="#42e8e0"/>
            <polygon points="362.15 187.18 360.44 186.19 360.44 183.84 362.15 184.82 362.15 187.18" fill="#42e8e0"/>
            <polygon points="362.15 192.44 360.44 191.46 360.44 189.1 362.15 190.09 362.15 192.44" fill="#42e8e0"/>
            <polygon points="362.15 197.7 360.44 196.72 360.44 194.36 362.15 195.35 362.15 197.7" fill="#42e8e0"/>
            <polygon points="362.15 202.97 360.44 201.98 360.44 199.62 362.15 200.61 362.15 202.97" fill="#42e8e0"/>
            <polygon points="362.15 128.2 360.44 127.22 360.44 109.63 362.15 110.61 362.15 128.2" fill="#42e8e0"/>
            <polygon points="362.15 141.47 360.44 140.49 360.44 130.12 362.15 131.11 362.15 141.47" fill="#42e8e0"/>
            <polygon points="362.15 150.27 360.44 149.28 360.44 143.39 362.15 144.38 362.15 150.27" fill="#42e8e0"/>
            <polygon points="362.15 159.07 360.44 158.08 360.44 152.19 362.15 153.18 362.15 159.07" fill="#42e8e0"/>
            <polygon points="362.15 167.86 360.44 166.87 360.44 160.99 362.15 161.97 362.15 167.86" fill="#42e8e0"/>
            <polygon points="362.15 176.66 360.44 175.67 360.44 169.78 362.15 170.77 362.15 176.66" fill="#42e8e0"/>
          </g>
          <g>
            <polygon points="356.08 193.57 358.02 194.69 358.02 200.58 356.08 199.46 356.08 193.57" fill="#42e8e0"/>
            <polygon points="356.08 188.31 358.02 189.43 358.02 191.78 356.08 190.67 356.08 188.31" fill="#42e8e0"/>
            <polygon points="356.08 183.05 358.02 184.17 358.02 186.52 356.08 185.41 356.08 183.05" fill="#42e8e0"/>
            <polygon points="356.08 108.84 358.02 109.95 358.02 112.31 356.08 111.19 356.08 108.84" fill="#42e8e0"/>
            <polygon points="356.08 103.58 358.02 104.69 358.02 107.05 356.08 105.93 356.08 103.58" fill="#42e8e0"/>
            <polygon points="356.08 98.32 358.02 99.43 358.02 101.79 356.08 100.67 356.08 98.32" fill="#42e8e0"/>
            <polygon points="356.08 93.05 358.02 94.17 358.02 96.53 356.08 95.41 356.08 93.05" fill="#42e8e0"/>
            <polygon points="356.08 87.79 358.02 88.91 358.02 91.26 356.08 90.15 356.08 87.79" fill="#42e8e0"/>
            <polygon points="356.08 162.55 358.02 163.67 358.02 181.26 356.08 180.15 356.08 162.55" fill="#42e8e0"/>
            <polygon points="356.08 149.28 358.02 150.4 358.02 160.76 356.08 159.65 356.08 149.28" fill="#42e8e0"/>
            <polygon points="356.08 140.49 358.02 141.6 358.02 147.49 356.08 146.38 356.08 140.49" fill="#42e8e0"/>
            <polygon points="356.08 131.69 358.02 132.81 358.02 138.7 356.08 137.58 356.08 131.69" fill="#42e8e0"/>
            <polygon points="356.08 122.9 358.02 124.01 358.02 129.9 356.08 128.79 356.08 122.9" fill="#42e8e0"/>
            <polygon points="356.08 114.1 358.02 115.22 358.02 121.11 356.08 119.99 356.08 114.1" fill="#42e8e0"/>
          </g>
          <polygon points="353.66 177.02 348.56 174.07 348.56 171.72 353.66 174.66 353.66 177.02" fill="#42e8e0"/>
          <polygon points="353.66 162.96 348.56 160.02 348.56 154.13 353.66 157.07 353.66 162.96" fill="#42e8e0"/>
        </g>
        <g>
          <path d="M327.8,92.19c0,.63-.44.89-1,.57a2.21,2.21,0,0,1-1-1.72c0-.64.45-.89,1-.58A2.2,2.2,0,0,1,327.8,92.19Z" transform="translate(0 52.69)" fill="#42e8e0"/>
          <path d="M333.88,88.37c0,.63-.45.89-1,.57a2.17,2.17,0,0,1-1-1.72c0-.63.44-.89,1-.57A2.19,2.19,0,0,1,333.88,88.37Z" transform="translate(0 52.69)" fill="#42e8e0"/>
          <path d="M340,84.83c0,.63-.44.89-1,.57a2.17,2.17,0,0,1-1-1.72c0-.63.44-.89,1-.57A2.18,2.18,0,0,1,340,84.83Z" transform="translate(0 52.69)" fill="#42e8e0"/>
          <path d="M346,81.31c0,.63-.44.89-1,.57a2.21,2.21,0,0,1-1-1.72c0-.64.45-.89,1-.58A2.2,2.2,0,0,1,346,81.31Z" transform="translate(0 52.69)" fill="#42e8e0"/>
        </g>
        <path id="glow" d="M284-18l38,164,41,26s7,4,10,0l41-26s0,.22.48-2.39S454-18,454-18Z" transform="translate(0 52.69)" fill="url(#linear-gradient)"/>
      </g>
      <g id="func4" opacity="0.89">
        <g id="Artboard">
          <g id="_1" data-name="1">
            <g id="Layer-2">
              <path id="Body" d="M415.25,449.62a3.88,3.88,0,0,1-.49,3.09,3.83,3.83,0,0,1-1.24,1.23l-39.75,24.65a9.43,9.43,0,0,1-10,0l-39.86-25a3.92,3.92,0,0,1-1.82-3.65v-7.56l3.52,3.5,38.1-23.91a9.4,9.4,0,0,1,10.06,0L411.55,446l3.7-3.68Z" transform="translate(0 52.69)" fill="url(#linear-gradient-2)"/>
              <g id="Top">
                <path id="Path" d="M369.61,421.35l33.32,21.23a3.94,3.94,0,0,1,1.2,5.42,4,4,0,0,1-1.24,1.22L369.6,469.86a1.58,1.58,0,0,1-1.66,0l-33.36-20.94a3.91,3.91,0,0,1,0-6.64l33.35-20.94A1.57,1.57,0,0,1,369.61,421.35Z" transform="translate(0 52.69)" fill="#3ed2f4"/>
                <path id="Path-2" data-name="Path" d="M372.16,428.51,398,445.24a3.93,3.93,0,0,1,1.16,5.43,3.87,3.87,0,0,1-1.9,1.53L367.2,463.59a6.27,6.27,0,0,1-4.88-.19L339,452.48a3.93,3.93,0,0,1-1.88-5.22,3.87,3.87,0,0,1,1.44-1.64l26.78-17.13A6.28,6.28,0,0,1,372.16,428.51Z" transform="translate(0 52.69)" fill="#6be1f5"/>
                <path id="Combined-Shape" d="M373.8,414.1l39.76,25.34a3.92,3.92,0,0,1,0,6.64l-39.75,24.65a9.43,9.43,0,0,1-10,0l-39.86-25a3.91,3.91,0,0,1-1.23-5.4,3.83,3.83,0,0,1,1.23-1.24l39.8-25A9.4,9.4,0,0,1,373.8,414.1ZM371.69,423a5.49,5.49,0,0,0-5.87,0L337,441a1.44,1.44,0,0,0-.49.49,1.57,1.57,0,0,0,.49,2.16l28.82,18.09a5.5,5.5,0,0,0,5.82,0L400.43,444a1.56,1.56,0,0,0,0-2.65Z" transform="translate(0 52.69)" fill="url(#linear-gradient-3)"/>
              </g>
            </g>
            <g id="Layer-1">
              <path id="Body-2" data-name="Body" d="M415.25,432.33a3.91,3.91,0,0,1-1.73,4.32L373.77,461.3a9.43,9.43,0,0,1-10,0l-39.86-25a3.91,3.91,0,0,1-1.82-3.64V425l3.52,3.5,38.1-23.91a9.42,9.42,0,0,1,10.06,0l37.75,24.06,3.7-3.69Z" transform="translate(0 52.69)" fill="url(#linear-gradient-4)"/>
              <g id="Top-2" data-name="Top">
                <path id="Path-3" data-name="Path" d="M369.61,404.06l33.32,21.24a3.93,3.93,0,0,1,0,6.64L369.6,452.57a1.56,1.56,0,0,1-1.66,0l-33.36-20.94a3.91,3.91,0,0,1,0-6.64l33.35-20.93A1.57,1.57,0,0,1,369.61,404.06Z" transform="translate(0 52.69)" fill="#3ed2f4"/>
                <path id="Path-4" data-name="Path" d="M372.16,411.22,398,428a3.91,3.91,0,0,1,1.16,5.42,3.87,3.87,0,0,1-1.9,1.53L367.2,446.3a6.27,6.27,0,0,1-4.88-.19L339,435.19a3.93,3.93,0,0,1-1.88-5.22,3.85,3.85,0,0,1,1.44-1.63l26.78-17.13A6.28,6.28,0,0,1,372.16,411.22Z" transform="translate(0 52.69)" fill="#6be1f5"/>
                <path id="Combined-Shape-2" data-name="Combined-Shape" d="M373.8,396.81l39.76,25.34a3.92,3.92,0,0,1,0,6.64l-39.75,24.65a9.41,9.41,0,0,1-10,0l-39.86-25a3.93,3.93,0,0,1,0-6.64l39.8-25A9.4,9.4,0,0,1,373.8,396.81Zm-2.11,8.89a5.51,5.51,0,0,0-5.87,0L337,423.75a1.44,1.44,0,0,0-.49.49,1.58,1.58,0,0,0,.49,2.17l28.82,18.09a5.5,5.5,0,0,0,5.82,0l28.75-17.83a1.56,1.56,0,0,0,0-2.65Z" transform="translate(0 52.69)" fill="url(#linear-gradient-5)"/>
              </g>
            </g>
          </g>
        </g>
      </g>
      <g id="func3" opacity="0.89">
        <g id="Artboard-2" data-name="Artboard">
          <g id="_1-2" data-name="1">
            <g id="Layer-2-2" data-name="Layer-2">
              <path id="Body-3" data-name="Body" d="M415.25,356.62a3.88,3.88,0,0,1-.49,3.09,3.83,3.83,0,0,1-1.24,1.23l-39.75,24.65a9.43,9.43,0,0,1-10,0l-39.86-25a3.92,3.92,0,0,1-1.82-3.65v-7.56l3.52,3.5,38.1-23.91a9.4,9.4,0,0,1,10.06,0L411.55,353l3.7-3.68Z" transform="translate(0 52.69)" fill="url(#linear-gradient-6)"/>
              <g id="Top-3" data-name="Top">
                <path id="Path-5" data-name="Path" d="M369.61,328.35l33.32,21.23a3.94,3.94,0,0,1,1.2,5.42,4,4,0,0,1-1.24,1.22L369.6,376.86a1.58,1.58,0,0,1-1.66,0l-33.36-20.94a3.91,3.91,0,0,1,0-6.64l33.35-20.94A1.57,1.57,0,0,1,369.61,328.35Z" transform="translate(0 52.69)" fill="#3ed2f4"/>
                <path id="Path-6" data-name="Path" d="M372.16,335.51,398,352.24a3.93,3.93,0,0,1,1.16,5.43,3.87,3.87,0,0,1-1.9,1.53L367.2,370.59a6.27,6.27,0,0,1-4.88-.19L339,359.48a3.93,3.93,0,0,1-1.88-5.22,3.87,3.87,0,0,1,1.44-1.64l26.78-17.13A6.28,6.28,0,0,1,372.16,335.51Z" transform="translate(0 52.69)" fill="#6be1f5"/>
                <path id="Combined-Shape-3" data-name="Combined-Shape" d="M373.8,321.1l39.76,25.34a3.92,3.92,0,0,1,0,6.64l-39.75,24.65a9.43,9.43,0,0,1-10,0l-39.86-25a3.91,3.91,0,0,1-1.23-5.4,3.83,3.83,0,0,1,1.23-1.24l39.8-25A9.4,9.4,0,0,1,373.8,321.1ZM371.69,330a5.49,5.49,0,0,0-5.87,0L337,348a1.44,1.44,0,0,0-.49.49,1.57,1.57,0,0,0,.49,2.16l28.82,18.09a5.5,5.5,0,0,0,5.82,0L400.43,351a1.56,1.56,0,0,0,0-2.65Z" transform="translate(0 52.69)" fill="url(#linear-gradient-7)"/>
              </g>
            </g>
            <g id="Layer-1-2" data-name="Layer-1">
              <path id="Body-4" data-name="Body" d="M415.25,339.33a3.91,3.91,0,0,1-1.73,4.32L373.77,368.3a9.43,9.43,0,0,1-10,0l-39.86-25a3.91,3.91,0,0,1-1.82-3.64V332l3.52,3.5,38.1-23.91a9.42,9.42,0,0,1,10.06,0l37.75,24.06,3.7-3.69Z" transform="translate(0 52.69)" fill="url(#linear-gradient-8)"/>
              <g id="Top-4" data-name="Top">
                <path id="Path-7" data-name="Path" d="M369.61,311.06l33.32,21.24a3.93,3.93,0,0,1,0,6.64L369.6,359.57a1.56,1.56,0,0,1-1.66,0l-33.36-20.94a3.91,3.91,0,0,1,0-6.64l33.35-20.93A1.57,1.57,0,0,1,369.61,311.06Z" transform="translate(0 52.69)" fill="#3ed2f4"/>
                <path id="Path-8" data-name="Path" d="M372.16,318.22,398,335a3.91,3.91,0,0,1,1.16,5.42,3.87,3.87,0,0,1-1.9,1.53L367.2,353.3a6.27,6.27,0,0,1-4.88-.19L339,342.19a3.93,3.93,0,0,1-1.88-5.22,3.85,3.85,0,0,1,1.44-1.63l26.78-17.13A6.28,6.28,0,0,1,372.16,318.22Z" transform="translate(0 52.69)" fill="#6be1f5"/>
                <path id="Combined-Shape-4" data-name="Combined-Shape" d="M373.8,303.81l39.76,25.34a3.92,3.92,0,0,1,0,6.64l-39.75,24.65a9.41,9.41,0,0,1-10,0l-39.86-25a3.93,3.93,0,0,1,0-6.64l39.8-25A9.4,9.4,0,0,1,373.8,303.81Zm-2.11,8.89a5.51,5.51,0,0,0-5.87,0L337,330.75a1.44,1.44,0,0,0-.49.49,1.58,1.58,0,0,0,.49,2.17l28.82,18.09a5.5,5.5,0,0,0,5.82,0l28.75-17.83a1.56,1.56,0,0,0,0-2.65Z" transform="translate(0 52.69)" fill="url(#linear-gradient-9)"/>
              </g>
            </g>
          </g>
        </g>
      </g>
      <g id="func2" opacity="0.89">
        <g id="Artboard-3" data-name="Artboard">
          <g id="_1-3" data-name="1">
            <g id="Layer-2-3" data-name="Layer-2">
              <path id="Body-5" data-name="Body" d="M415.25,262.62a3.88,3.88,0,0,1-.49,3.09,3.83,3.83,0,0,1-1.24,1.23l-39.75,24.65a9.43,9.43,0,0,1-10,0l-39.86-25a3.92,3.92,0,0,1-1.82-3.65v-7.56l3.52,3.5,38.1-23.91a9.4,9.4,0,0,1,10.06,0l37.75,24,3.7-3.68Z" transform="translate(0 52.69)" fill="url(#linear-gradient-10)"/>
              <g id="Top-5" data-name="Top">
                <path id="Path-9" data-name="Path" d="M369.61,234.35l33.32,21.23a3.94,3.94,0,0,1,1.2,5.42,4,4,0,0,1-1.24,1.22L369.6,282.86a1.58,1.58,0,0,1-1.66,0l-33.36-20.94a3.91,3.91,0,0,1,0-6.64l33.35-20.94A1.57,1.57,0,0,1,369.61,234.35Z" transform="translate(0 52.69)" fill="#3ed2f4"/>
                <path id="Path-10" data-name="Path" d="M372.16,241.51,398,258.24a3.93,3.93,0,0,1,1.16,5.43,3.87,3.87,0,0,1-1.9,1.53L367.2,276.59a6.27,6.27,0,0,1-4.88-.19L339,265.48a3.93,3.93,0,0,1-1.88-5.22,3.87,3.87,0,0,1,1.44-1.64l26.78-17.13A6.28,6.28,0,0,1,372.16,241.51Z" transform="translate(0 52.69)" fill="#6be1f5"/>
                <path id="Combined-Shape-5" data-name="Combined-Shape" d="M373.8,227.1l39.76,25.34a3.92,3.92,0,0,1,0,6.64l-39.75,24.65a9.43,9.43,0,0,1-10,0l-39.86-25a3.91,3.91,0,0,1-1.23-5.4,3.83,3.83,0,0,1,1.23-1.24l39.8-25A9.4,9.4,0,0,1,373.8,227.1ZM371.69,236a5.49,5.49,0,0,0-5.87,0L337,254a1.44,1.44,0,0,0-.49.49,1.57,1.57,0,0,0,.49,2.16l28.82,18.09a5.5,5.5,0,0,0,5.82,0L400.43,257a1.56,1.56,0,0,0,0-2.65Z" transform="translate(0 52.69)" fill="url(#linear-gradient-11)"/>
              </g>
            </g>
            <g id="Layer-1-3" data-name="Layer-1">
              <path id="Body-6" data-name="Body" d="M415.25,245.33a3.91,3.91,0,0,1-1.73,4.32L373.77,274.3a9.43,9.43,0,0,1-10,0l-39.86-25a3.91,3.91,0,0,1-1.82-3.64V238l3.52,3.5,38.1-23.91a9.42,9.42,0,0,1,10.06,0l37.75,24.06,3.7-3.69Z" transform="translate(0 52.69)" fill="url(#linear-gradient-12)"/>
              <g id="Top-6" data-name="Top">
                <path id="Path-11" data-name="Path" d="M369.61,217.06l33.32,21.24a3.93,3.93,0,0,1,0,6.64L369.6,265.57a1.56,1.56,0,0,1-1.66,0l-33.36-20.94a3.91,3.91,0,0,1,0-6.64l33.35-20.93A1.57,1.57,0,0,1,369.61,217.06Z" transform="translate(0 52.69)" fill="#3ed2f4"/>
                <path id="Path-12" data-name="Path" d="M372.16,224.22,398,241a3.91,3.91,0,0,1,1.16,5.42,3.87,3.87,0,0,1-1.9,1.53L367.2,259.3a6.27,6.27,0,0,1-4.88-.19L339,248.19a3.93,3.93,0,0,1-1.88-5.22,3.85,3.85,0,0,1,1.44-1.63l26.78-17.13A6.28,6.28,0,0,1,372.16,224.22Z" transform="translate(0 52.69)" fill="#6be1f5"/>
                <path id="Combined-Shape-6" data-name="Combined-Shape" d="M373.8,209.81l39.76,25.34a3.92,3.92,0,0,1,0,6.64l-39.75,24.65a9.41,9.41,0,0,1-10,0l-39.86-25a3.93,3.93,0,0,1,0-6.64l39.8-25A9.4,9.4,0,0,1,373.8,209.81Zm-2.11,8.89a5.51,5.51,0,0,0-5.87,0L337,236.75a1.44,1.44,0,0,0-.49.49,1.58,1.58,0,0,0,.49,2.17l28.82,18.09a5.5,5.5,0,0,0,5.82,0l28.75-17.83a1.56,1.56,0,0,0,0-2.65Z" transform="translate(0 52.69)" fill="url(#linear-gradient-13)"/>
              </g>
            </g>
          </g>
        </g>
      </g>
      <g id="func1" opacity="0.89">
        <g id="Artboard-4" data-name="Artboard">
          <g id="_1-4" data-name="1">
            <g id="Layer-2-4" data-name="Layer-2">
              <path id="Body-7" data-name="Body" d="M415.25,168.62a3.88,3.88,0,0,1-.49,3.09,3.83,3.83,0,0,1-1.24,1.23l-39.75,24.65a9.43,9.43,0,0,1-10,0l-39.86-25a3.92,3.92,0,0,1-1.82-3.65v-7.56l3.52,3.5,38.1-23.91a9.4,9.4,0,0,1,10.06,0l37.75,24,3.7-3.68Z" transform="translate(0 52.69)" fill="url(#linear-gradient-14)"/>
              <g id="Top-7" data-name="Top">
                <path id="Path-13" data-name="Path" d="M369.61,140.35l33.32,21.23a3.94,3.94,0,0,1,1.2,5.42,4,4,0,0,1-1.24,1.22L369.6,188.86a1.58,1.58,0,0,1-1.66,0l-33.36-20.94a3.91,3.91,0,0,1,0-6.64l33.35-20.94A1.57,1.57,0,0,1,369.61,140.35Z" transform="translate(0 52.69)" fill="#3ed2f4"/>
                <path id="Path-14" data-name="Path" d="M372.16,147.51,398,164.24a3.93,3.93,0,0,1,1.16,5.43,3.87,3.87,0,0,1-1.9,1.53L367.2,182.59a6.27,6.27,0,0,1-4.88-.19L339,171.48a3.93,3.93,0,0,1-1.88-5.22,3.87,3.87,0,0,1,1.44-1.64l26.78-17.13A6.28,6.28,0,0,1,372.16,147.51Z" transform="translate(0 52.69)" fill="#6be1f5"/>
                <path id="Combined-Shape-7" data-name="Combined-Shape" d="M373.8,133.1l39.76,25.34a3.92,3.92,0,0,1,0,6.64l-39.75,24.65a9.43,9.43,0,0,1-10,0l-39.86-25a3.91,3.91,0,0,1-1.23-5.4,3.83,3.83,0,0,1,1.23-1.24l39.8-25A9.4,9.4,0,0,1,373.8,133.1ZM371.69,142a5.49,5.49,0,0,0-5.87,0L337,160a1.44,1.44,0,0,0-.49.49,1.57,1.57,0,0,0,.49,2.16l28.82,18.09a5.5,5.5,0,0,0,5.82,0L400.43,163a1.56,1.56,0,0,0,0-2.65Z" transform="translate(0 52.69)" fill="url(#linear-gradient-15)"/>
              </g>
            </g>
            <g id="Layer-1-4" data-name="Layer-1">
              <path id="Body-8" data-name="Body" d="M415.25,151.33a3.91,3.91,0,0,1-1.73,4.32L373.77,180.3a9.43,9.43,0,0,1-10,0l-39.86-25a3.91,3.91,0,0,1-1.82-3.64V144l3.52,3.5,38.1-23.91a9.42,9.42,0,0,1,10.06,0l37.75,24.06,3.7-3.69Z" transform="translate(0 52.69)" fill="url(#linear-gradient-16)"/>
              <g id="Top-8" data-name="Top">
                <path id="Path-15" data-name="Path" d="M369.61,123.06l33.32,21.24a3.93,3.93,0,0,1,0,6.64L369.6,171.57a1.56,1.56,0,0,1-1.66,0l-33.36-20.94a3.91,3.91,0,0,1,0-6.64l33.35-20.93A1.57,1.57,0,0,1,369.61,123.06Z" transform="translate(0 52.69)" fill="#3ed2f4"/>
                <path id="Path-16" data-name="Path" d="M372.16,130.22,398,147a3.91,3.91,0,0,1,1.16,5.42,3.87,3.87,0,0,1-1.9,1.53L367.2,165.3a6.27,6.27,0,0,1-4.88-.19L339,154.19a3.93,3.93,0,0,1-1.88-5.22,3.85,3.85,0,0,1,1.44-1.63l26.78-17.13A6.28,6.28,0,0,1,372.16,130.22Z" transform="translate(0 52.69)" fill="#6be1f5"/>
                <path id="Combined-Shape-8" data-name="Combined-Shape" d="M373.8,115.81l39.76,25.34a3.92,3.92,0,0,1,0,6.64l-39.75,24.65a9.41,9.41,0,0,1-10,0l-39.86-25a3.93,3.93,0,0,1,0-6.64l39.8-25A9.4,9.4,0,0,1,373.8,115.81Zm-2.11,8.89a5.51,5.51,0,0,0-5.87,0L337,142.75a1.44,1.44,0,0,0-.49.49,1.58,1.58,0,0,0,.49,2.17l28.82,18.09a5.5,5.5,0,0,0,5.82,0l28.75-17.83a1.56,1.56,0,0,0,0-2.65Z" transform="translate(0 52.69)" fill="url(#linear-gradient-17)"/>
              </g>
            </g>
          </g>
        </g>
      </g>
      <g>
        <g id="Layer-2-5" data-name="Layer-2">
          <path id="Body-9" data-name="Body" d="M233.49,364.57a9.16,9.16,0,0,1-1,6.67,8.11,8.11,0,0,1-2.43,2.64L152.33,427a17,17,0,0,1-19.49-.06L54.85,373a8.77,8.77,0,0,1-3.57-7.85V348.88l6.89,7.54,74.53-51.49a17,17,0,0,1,19.69.08l73.85,51.8,7.25-7.93Z" transform="translate(0 52.69)" fill="url(#linear-gradient-18)"/>
          <g id="Top-9" data-name="Top">
            <path id="Path-17" data-name="Path" d="M144.19,303.7l65.19,45.73a9,9,0,0,1,2.35,11.66,8.08,8.08,0,0,1-2.43,2.63l-65.12,44.45a2.84,2.84,0,0,1-3.25,0l-65.27-45.1a9,9,0,0,1-2.42-11.64,8.25,8.25,0,0,1,2.42-2.66l65.25-45.07A2.82,2.82,0,0,1,144.19,303.7Z" transform="translate(0 52.69)" fill="#3ed2f4"/>
            <path id="Path-18" data-name="Path" d="M149.18,319.12l50.54,36A9,9,0,0,1,202,366.83a7.89,7.89,0,0,1-3.72,3.31l-58.78,24.52a11.24,11.24,0,0,1-9.56-.41L84.38,370.73c-3.84-2-5.49-7-3.69-11.23A8.32,8.32,0,0,1,83.5,356l52.39-36.89A11.35,11.35,0,0,1,149.18,319.12Z" transform="translate(0 52.69)" fill="#6be1f5"/>
            <path id="Combined-Shape-9" data-name="Combined-Shape" d="M152.39,288.08l77.8,54.58a9,9,0,0,1,2.35,11.66,8.11,8.11,0,0,1-2.43,2.64L152.33,410a17,17,0,0,1-19.49-.06l-78-53.88a9,9,0,0,1-2.42-11.64,8.18,8.18,0,0,1,2.42-2.67L132.7,288A17,17,0,0,1,152.39,288.08Zm-4.12,19.15a9.92,9.92,0,0,0-11.48,0l-56.31,38.9a3.33,3.33,0,0,0-1,1.07,3.59,3.59,0,0,0,1,4.66l56.39,38.95a9.91,9.91,0,0,0,11.37,0l56.26-38.4a3.16,3.16,0,0,0,1-1.05,3.58,3.58,0,0,0-.94-4.66Z" transform="translate(0 52.69)" fill="url(#linear-gradient-19)"/>
          </g>
        </g>
        <g id="Layer-1-5" data-name="Layer-1">
          <path id="Body-10" data-name="Body" d="M233.49,327.34a9.16,9.16,0,0,1-1,6.67,8.11,8.11,0,0,1-2.43,2.64l-77.78,53.08a17,17,0,0,1-19.49-.06l-78-53.88a8.76,8.76,0,0,1-3.57-7.85V311.65l6.89,7.54L132.7,267.7a17,17,0,0,1,19.69.08l73.85,51.8,7.25-7.93Z" transform="translate(0 52.69)" fill="url(#linear-gradient-20)"/>
          <g id="Top-10" data-name="Top">
            <path id="Path-19" data-name="Path" d="M144.19,266.47l65.19,45.73a9,9,0,0,1,2.35,11.66,8.11,8.11,0,0,1-2.43,2.64l-65.12,44.44a2.84,2.84,0,0,1-3.25,0L75.66,325.84a9,9,0,0,1-2.42-11.64,8.18,8.18,0,0,1,2.42-2.67l65.25-45.07A2.82,2.82,0,0,1,144.19,266.47Z" transform="translate(0 52.69)" fill="#3ed2f4"/>
            <path id="Path-20" data-name="Path" d="M149.18,281.89l50.54,36A9,9,0,0,1,202,329.6a7.89,7.89,0,0,1-3.72,3.31l-58.78,24.52a11.27,11.27,0,0,1-9.56-.4L84.38,333.5c-3.84-2-5.49-7-3.69-11.23a8.32,8.32,0,0,1,2.81-3.53l52.39-36.89A11.35,11.35,0,0,1,149.18,281.89Z" transform="translate(0 52.69)" fill="#6be1f5"/>
            <path id="Combined-Shape-10" data-name="Combined-Shape" d="M152.39,250.85l77.8,54.58a9,9,0,0,1,2.35,11.66,8.11,8.11,0,0,1-2.43,2.64l-77.78,53.08a17,17,0,0,1-19.49-.06l-78-53.88a9,9,0,0,1-2.42-11.64,8.05,8.05,0,0,1,2.42-2.66l77.85-53.79A17,17,0,0,1,152.39,250.85ZM148.27,270a9.92,9.92,0,0,0-11.48-.05L80.48,308.87a3.3,3.3,0,0,0-1,1.06,3.58,3.58,0,0,0,1,4.66l56.39,39a9.91,9.91,0,0,0,11.37,0l56.26-38.39a3.3,3.3,0,0,0,1-1.06,3.58,3.58,0,0,0-.94-4.66Z" transform="translate(0 52.69)" fill="url(#linear-gradient-21)"/>
          </g>
        </g>
        <g id="Layer-2-6" data-name="Layer-2">
          <path id="Body-11" data-name="Body" d="M234.38,293.22a9.19,9.19,0,0,1-.95,6.68,8.08,8.08,0,0,1-2.43,2.63l-77.78,53.08a17,17,0,0,1-19.49-.05l-78-53.88a8.75,8.75,0,0,1-3.57-7.86V277.53l6.89,7.55,74.53-51.49a17,17,0,0,1,19.68.07l73.86,51.81,7.25-7.94Z" transform="translate(0 52.69)" fill="url(#linear-gradient-22)"/>
          <g id="Top-11" data-name="Top">
            <path id="Path-21" data-name="Path" d="M145.08,232.35l65.19,45.73a9,9,0,0,1,2.35,11.66,8.11,8.11,0,0,1-2.43,2.64l-65.12,44.44a2.83,2.83,0,0,1-3.25,0L76.55,291.72a9,9,0,0,1-2.42-11.64,8,8,0,0,1,2.42-2.66l65.24-45.08A2.86,2.86,0,0,1,145.08,232.35Z" transform="translate(0 52.69)" fill="#3ed2f4"/>
            <path id="Path-22" data-name="Path" d="M150.07,247.78l50.54,36a9,9,0,0,1,2.27,11.68,7.81,7.81,0,0,1-3.72,3.3l-58.78,24.52a11.26,11.26,0,0,1-9.57-.4L85.26,299.39c-3.83-2-5.48-7-3.68-11.23a8.19,8.19,0,0,1,2.81-3.53l52.39-36.89A11.33,11.33,0,0,1,150.07,247.78Z" transform="translate(0 52.69)" fill="#6be1f5"/>
            <path id="Combined-Shape-11" data-name="Combined-Shape" d="M153.27,216.74l77.81,54.57A9,9,0,0,1,233.43,283a8.11,8.11,0,0,1-2.43,2.64l-77.78,53.08a17,17,0,0,1-19.49-.06l-78-53.88a9,9,0,0,1-2.42-11.64,8.14,8.14,0,0,1,2.42-2.66l77.85-53.78A17,17,0,0,1,153.27,216.74Zm-4.11,19.15a9.92,9.92,0,0,0-11.48,0l-56.31,38.9a3.33,3.33,0,0,0-1,1.07,3.57,3.57,0,0,0,1,4.65l56.39,39a9.91,9.91,0,0,0,11.37,0l56.25-38.39a3.28,3.28,0,0,0,1-1.05,3.59,3.59,0,0,0-.94-4.67Z" transform="translate(0 52.69)" fill="url(#linear-gradient-23)"/>
          </g>
        </g>
        <g id="Layer-1-6" data-name="Layer-1">
          <path id="Body-12" data-name="Body" d="M234.38,256a9.16,9.16,0,0,1-.95,6.67,8.11,8.11,0,0,1-2.43,2.64l-77.78,53.08a17,17,0,0,1-19.49-.06l-78-53.88a8.74,8.74,0,0,1-3.57-7.85V240.3l6.89,7.55,74.53-51.49a17,17,0,0,1,19.68.07l73.86,51.81,7.25-7.94Z" transform="translate(0 52.69)" fill="url(#linear-gradient-24)"/>
          <g id="Top-12" data-name="Top">
            <path id="Path-23" data-name="Path" d="M145.08,195.13l65.19,45.73a9,9,0,0,1,2.35,11.65,8.11,8.11,0,0,1-2.43,2.64l-65.12,44.44a2.83,2.83,0,0,1-3.25,0L76.55,254.49a9,9,0,0,1-2.42-11.64,8,8,0,0,1,2.42-2.66l65.24-45.08A2.84,2.84,0,0,1,145.08,195.13Z" transform="translate(0 52.69)" fill="#3ed2f4"/>
            <path id="Path-24" data-name="Path" d="M150.07,210.55l50.54,36a9,9,0,0,1,2.27,11.68,7.89,7.89,0,0,1-3.72,3.31l-58.78,24.52a11.26,11.26,0,0,1-9.57-.41L85.26,262.16c-3.83-2-5.48-7-3.68-11.23a8.19,8.19,0,0,1,2.81-3.53l52.39-36.89A11.35,11.35,0,0,1,150.07,210.55Z" transform="translate(0 52.69)" fill="#6be1f5"/>
            <path id="Combined-Shape-12" data-name="Combined-Shape" d="M153.27,179.51l77.81,54.58a9,9,0,0,1,2.35,11.66,8.08,8.08,0,0,1-2.43,2.63l-77.78,53.08a17,17,0,0,1-19.49,0l-78-53.88a9,9,0,0,1-2.42-11.64,8.08,8.08,0,0,1,2.42-2.67l77.85-53.78A17,17,0,0,1,153.27,179.51Zm-4.11,19.15a9.92,9.92,0,0,0-11.48,0l-56.31,38.9a3.33,3.33,0,0,0-1,1.07,3.57,3.57,0,0,0,1,4.65l56.39,39a9.93,9.93,0,0,0,11.37,0l56.25-38.4a3.09,3.09,0,0,0,1-1.05,3.59,3.59,0,0,0-.94-4.67Z" transform="translate(0 52.69)" fill="url(#linear-gradient-25)"/>
          </g>
        </g>
      </g>
      <path id="glow-2" data-name="glow" d="M243.91,5.1c48.64,117.83-2.46,347.93-43.65,444.78-44.23,104-139,77.36-169.73-46.08C-6.27,255.71,39,152.33,55.81,38.18S209.83-77.44,243.91,5.1Z" transform="translate(0 52.69)" opacity="0.09" fill="url(#radial-gradient)" style="mix-blend-mode: lighten"/>
      <g id="particles">
          <path d="M76.94,130.9a1.63,1.63,0,1,1-2.3,0A1.63,1.63,0,0,1,76.94,130.9Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.3"/>
          <path d="M101.23,148.72a1.62,1.62,0,1,1-2.3,0A1.63,1.63,0,0,1,101.23,148.72Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.3"/>
          <path d="M96.55,127.6a1.65,1.65,0,1,1-2.34,0A1.65,1.65,0,0,1,96.55,127.6Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.2"/>
          <path d="M90.59,128.78a1.06,1.06,0,0,1,0,1.5,1.07,1.07,0,0,1-1.51,0,1.06,1.06,0,0,1,0-1.5A1.07,1.07,0,0,1,90.59,128.78Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.2"/>
          <path d="M119.89,137.81a1.65,1.65,0,1,0-.55-2.27A1.65,1.65,0,0,0,119.89,137.81Z" transform="translate(0 52.69)" fill="#42e8e0"/>
          <path d="M66.92,171.77a1.62,1.62,0,1,1-1.54-1.71A1.62,1.62,0,0,1,66.92,171.77Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.3"/>
          <path d="M70.4,201.69A1.63,1.63,0,1,1,68.86,200,1.64,1.64,0,0,1,70.4,201.69Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.3"/>
          <path d="M82.69,183.89a1.66,1.66,0,1,1-1.57-1.74A1.66,1.66,0,0,1,82.69,183.89Z" transform="translate(0 52.69)" fill="#42e8e0"/>
          <path d="M77.76,180.32a1.06,1.06,0,1,1-1-1.11A1.06,1.06,0,0,1,77.76,180.32Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.2"/>
          <path d="M91.09,207.94A1.65,1.65,0,1,0,92.38,206,1.65,1.65,0,0,0,91.09,207.94Z" transform="translate(0 52.69)" fill="#42e8e0"/>
          <path d="M124.71,216.69a.84.84,0,0,1,1.18.14.85.85,0,0,1-.14,1.19.84.84,0,0,1-1.18-.15A.83.83,0,0,1,124.71,216.69Z" transform="translate(0 52.69)" fill="#fff" opacity="0.3"/>
          <path d="M135.24,205.19a.84.84,0,1,1,1,1.32.84.84,0,0,1-1-1.32Z" transform="translate(0 52.69)" fill="#fff" opacity="0.3"/>
          <path d="M124.11,206.41a.86.86,0,1,1-.15,1.21A.87.87,0,0,1,124.11,206.41Z" transform="translate(0 52.69)" fill="#fff"/>
          <path d="M124.38,209.55a.54.54,0,0,1,.77.09.55.55,0,1,1-.86.68A.54.54,0,0,1,124.38,209.55Z" transform="translate(0 52.69)" fill="#fff" opacity="0.2"/>
          <path d="M130.67,195a.84.84,0,0,0-.15-1.19.86.86,0,1,0,.15,1.19Z" transform="translate(0 52.69)" fill="#fff"/>
          <g>
            <path d="M116.91,174.44a1.62,1.62,0,1,1-1.72,1.53A1.61,1.61,0,0,1,116.91,174.44Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.3"/>
            <path d="M146.85,171.17a1.63,1.63,0,1,1-1.72,1.53A1.63,1.63,0,0,1,146.85,171.17Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.3"/>
            <path d="M129.13,158.76a1.65,1.65,0,1,1-1.75,1.56A1.64,1.64,0,0,1,129.13,158.76Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.2"/>
            <path d="M125.53,163.66a1.06,1.06,0,0,1-.12,2.12,1.06,1.06,0,1,1,.12-2.12Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.2"/>
            <path d="M153.24,150.52a1.65,1.65,0,0,0-.63-3.24,1.65,1.65,0,1,0,.63,3.24Z" transform="translate(0 52.69)" fill="#42e8e0"/>
          </g>
          <g>
            <path d="M137.12,211.34a1.62,1.62,0,1,1-2.29-.22A1.62,1.62,0,0,1,137.12,211.34Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.3"/>
            <path d="M159.89,231.06a1.62,1.62,0,1,1-2.29-.22A1.62,1.62,0,0,1,159.89,231.06Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.3"/>
            <path d="M156.93,209.63a1.65,1.65,0,0,1-2.55,2.11,1.66,1.66,0,0,1,.22-2.33A1.64,1.64,0,0,1,156.93,209.63Z" transform="translate(0 52.69)" fill="#42e8e0"/>
            <path d="M150.89,210.32a1.06,1.06,0,0,1-.14,1.5,1.06,1.06,0,1,1-1.35-1.64A1.06,1.06,0,0,1,150.89,210.32Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.2"/>
            <path d="M179.37,221.69a1.65,1.65,0,1,0-.36-2.31A1.65,1.65,0,0,0,179.37,221.69Z" transform="translate(0 52.69)" fill="#42e8e0"/>
          </g>
          <g>
            <path d="M210.08,205.43a.84.84,0,1,1,.69,1A.84.84,0,0,1,210.08,205.43Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.3"/>
            <path d="M210.07,189.84a.84.84,0,1,1,.69,1A.84.84,0,0,1,210.07,189.84Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.3"/>
            <path d="M202.69,198.26a.86.86,0,1,1,.7,1A.85.85,0,0,1,202.69,198.26Z" transform="translate(0 52.69)" fill="#42e8e0"/>
            <path d="M205,200.39a.55.55,0,0,1,.63-.45.55.55,0,0,1,.46.63.56.56,0,0,1-.64.45A.55.55,0,0,1,205,200.39Z" transform="translate(0 52.69)" fill="#42e8e0" opacity="0.2"/>
            <path d="M199.8,185.39a.85.85,0,0,0-.92-.78.86.86,0,0,0-.78.93.85.85,0,0,0,.92.78A.86.86,0,0,0,199.8,185.39Z" transform="translate(0 52.69)" fill="#42e8e0"/>
          </g>
        </g>
      </g>
      <path d="M366,133" transform="translate(0 52.69)" fill="#fff"/>
      <g id="lightning">
        <polygon points="373.58 190.61 367.32 190.61 362.97 201.51 367.32 201.56 364.31 211.61 375 197.69 369.67 198.43 373.58 190.61" fill="#f2f0a5"/>
        <polyline points="376.76 194.98 383 201.22 376.32 207.9" fill="none" stroke="#aeebed" stroke-linecap="round" stroke-miterlimit="10"/>
        <polyline points="360.74 194.98 354.5 201.22 361.18 207.9" fill="none" stroke="#aeebed" stroke-linecap="round" stroke-miterlimit="10"/>
      </g>
      <g id="lightning-2" data-name="lightning">
        <polygon points="374.58 283.61 368.32 283.61 363.97 294.51 368.32 294.56 365.31 304.61 376 290.69 370.67 291.43 374.58 283.61" fill="#f2f0a5"/>
        <polyline points="377.76 287.98 384 294.22 377.32 300.9" fill="none" stroke="#aeebed" stroke-linecap="round" stroke-miterlimit="10"/>
        <polyline points="361.74 287.98 355.5 294.22 362.18 300.9" fill="none" stroke="#aeebed" stroke-linecap="round" stroke-miterlimit="10"/>
      </g>
      <g id="lightning-3" data-name="lightning">
        <polygon points="373.58 377.61 367.32 377.61 362.97 388.51 367.32 388.56 364.31 398.61 375 384.69 369.67 385.43 373.58 377.61" fill="#f2f0a5"/>
        <polyline points="376.76 381.98 383 388.22 376.32 394.9" fill="none" stroke="#aeebed" stroke-linecap="round" stroke-miterlimit="10"/>
        <polyline points="360.74 381.98 354.5 388.22 361.18 394.9" fill="none" stroke="#aeebed" stroke-linecap="round" stroke-miterlimit="10"/>
      </g>
      <g id="lightning-4" data-name="lightning">
        <polygon points="372.58 469.61 366.32 469.61 361.97 480.51 366.32 480.56 363.31 490.61 374 476.69 368.67 477.43 372.58 469.61" fill="#f2f0a5"/>
        <polyline points="375.76 473.98 382 480.22 375.32 486.9" fill="none" stroke="#aeebed" stroke-linecap="round" stroke-miterlimit="10"/>
        <polyline points="359.74 473.98 353.5 480.22 360.18 486.9" fill="none" stroke="#aeebed" stroke-linecap="round" stroke-miterlimit="10"/>
      </g>
    </g>
  </g>
<text transform="translate(140 510)" opacity="0.77" font-size="17" fill="aqua" font-family="Source Sans Pro" text-anchor="middle">Orchestrator</text>
</svg>

            
          
!
            
              body {
  background: black;
  font-family: 'Source Sans Pro', sans-serif;
}

h1 {
  position: absolute;
  width: 100vw;
  text-align: center;
  color: teal;
  font-size: 4vmin;
  margin-top: 4vmin;
}

svg {
  width: 100vw;
  height: 100vh;
}

#activated {
  opacity: 0;
}

#bright-lines {
  opacity: 0;
}


            
          
!
            
              TweenMax.set('#bright-lines', {
  opacity: 1
})

TweenMax.staggerFromTo('#particles path', 1, {
  opacity: 0
}, {
  cycle: {
    opacity: [0.2, 0.4, 0.1, 0.6, 0.1]
  },
  repeat: -1,
  yoyo: true,
  ease: Sine.easeInOut
}, 0.1, 'start')

const activate = (y, i) => {
  const tl = new TimelineMax(),
        rep = 4
  
  tl.add('start')
  
  tl.to('#activated', 0.5, {
   y: y
  }, 'start')

  tl.fromTo(`#line${i}`, 1, {
    drawSVG: 0
  }, {
    drawSVG: true
  }, 'start')
  
  tl.to('#activated', 1, {
    opacity: 1,
    ease: Sine.easeOut
  }, 'start+=1')
  
  tl.staggerFromTo('#dots-up path, #outer-fan polygon, #fan polygon', 0.5, {
    opacity: 0
  }, {
    opacity: 1,
    repeat: rep,
    yoyo: true,
    ease: Sine.easeOut
  }, 0.1, 'start+=1')
  
  tl.staggerFromTo('#panels polygon', 0.5, {
    opacity: 0
  }, {
    opacity: 1,
    repeat: rep,
    yoyo: true,
    ease: Sine.easeOut
  }, 0.1, 'start+=1')
  
  tl.staggerFromTo('#panels path, #dots-r path', 0.5, {
    opacity: 0
  }, {
    opacity: 1,
    repeat: rep,
    yoyo: true,
    ease: Sine.easeOut
  }, 0.1, 'start+=1')
  
  tl.to('#activated', 0.5, {
    opacity: 0,
    ease: Sine.easeIn
  }, 'start+=4')
  
  tl.to(`#line${i}`, 1, {
    drawSVG: 0
  }, 'start+=4')
  
  tl.timeScale(1.2)
  return tl
}

const master = new TimelineMax()
master.add('begin')
master.add(activate(0, 1), 'begin+=1')
master.add(activate(90, 2), 'begin+=6')
master.add(activate(190, 3), 'begin+=11')
master.add(activate(285, 4), 'begin+=16')
master.timeScale(1.4)

            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console