Spektro_animation_minified.svg

<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 1080 1080" width="1080" height="1080" style="width:100%;height:100%;content-visibility:visible"><defs><path d="M0,0 L3840,0 L3840,3840 L0,3840z" id="reuse-0"/><path fill="#0096DC" d="M288.2049865722656,-368.9159851074219 C69.0199966430664,-502.9309997558594 -366.2829895019531,-412.2510070800781 -390.4809875488281,-155.38900756835938 C-412.4389953613281,77.77400207519531 -532.052001953125,394.2330017089844 -267.6059875488281,427.39599609375 C-168.3419952392578,439.85198974609375 -71.39800262451172,410.6130065917969 19.420000076293945,415.71600341796875 C198.64100646972656,425.79400634765625 361.55499267578125,439.4429931640625 388.9389953613281,270.4419860839844 C430.2359924316406,15.800999641418457 507.36700439453125,-234.88400268554688 288.2049865722656,-368.9159851074219z" id="reuse-1"/><path fill-opacity="0" stroke="#398DD3" stroke-width="2" d="M288.2049865722656,-368.9159851074219 C69.0199966430664,-502.9309997558594 -366.2829895019531,-412.2510070800781 -390.4809875488281,-155.38900756835938 C-412.4389953613281,77.77400207519531 -532.052001953125,394.2330017089844 -267.6059875488281,427.39599609375 C-168.3419952392578,439.85198974609375 -71.39800262451172,410.6130065917969 19.420000076293945,415.71600341796875 C198.64100646972656,425.79400634765625 361.55499267578125,439.4429931640625 388.9389953613281,270.4419860839844 C430.2359924316406,15.800999641418457 507.36700439453125,-234.88400268554688 288.2049865722656,-368.9159851074219z" id="reuse-2"/><path fill="#50AF2D" d="M431.0419921875,-135.1199951171875 C351.052001953125,-380.2590026855469 63.09299850463867,-473.989013671875 -193.24400329589844,-465.34600830078125 C-442.53900146484375,-456.95098876953125 -391.260986328125,-245.97500610351562 -439.7969970703125,7.377999782562256 C-523.68798828125,339.197998046875 -80.42900085449219,340.010986328125 105.3550033569336,444.489013671875 C329.2170104980469,570.3980102539062 511.0429992675781,110.01000213623047 431.0419921875,-135.1199951171875z" opacity="1" display="block" id="reuse-3"/><path fill="#B90F4B" d="M350.1659851074219,-154.0399932861328 C301.1300048828125,-231.11099243164062 252.20199584960938,-312.7030029296875 227.88299560546875,-395.9620056152344 C159.25599670410156,-630.8740234375 -282.5429992675781,-378.6659851074219 -418.07598876953125,-159.63800048828125 C-553.5960083007812,59.43199920654297 -414.34600830078125,243.4739990234375 -227.41099548339844,420.17401123046875 C-40.487998962402344,596.8309936523438 205.68699645996094,402.38299560546875 405.87701416015625,241.10699462890625 C538.760986328125,134.1020050048828 446.9309997558594,-1.9429999589920044 350.1659851074219,-154.0399932861328z" opacity="1" style="mix-blend-mode:multiply" display="block" id="reuse-4"/></defs><defs><clipPath id="__lottie_element_2322"><rect width="1080" height="1080"/></clipPath><clipPath id="__lottie_element_2324"><use xlink:href="#reuse-0"/></clipPath><g transform="translate(540 540) scale(1.02400005)" display="block" id="__lottie_element_2327"><path fill="#FFF" d="M0,-250.32400512695312 C138.15382385253906,-250.32400512695312 250.32400512695312,-138.15382385253906 250.32400512695312,0 C250.32400512695312,138.15382385253906 138.15382385253906,250.32400512695312 0,250.32400512695312 C-138.15382385253906,250.32400512695312 -250.32400512695312,138.15382385253906 -250.32400512695312,0 C-250.32400512695312,-138.15382385253906 -138.15382385253906,-250.32400512695312 0,-250.32400512695312z"/><path fill-opacity="0" stroke="#FFF" stroke-width="0" d="M0,-250.32400512695312 C138.15382385253906,-250.32400512695312 250.32400512695312,-138.15382385253906 250.32400512695312,0 C250.32400512695312,138.15382385253906 138.15382385253906,250.32400512695312 0,250.32400512695312 C-138.15382385253906,250.32400512695312 -250.32400512695312,138.15382385253906 -250.32400512695312,0 C-250.32400512695312,-138.15382385253906 -138.15382385253906,-250.32400512695312 0,-250.32400512695312z"/></g><filter id="__lottie_element_2330" filterUnits="objectBoundingBox" x="0%" y="0%" width="100%" height="100%"><feComponentTransfer in="SourceGraphic"><feFuncA type="table" tableValues="1.0 0.0"/></feComponentTransfer></filter><mask id="__lottie_element_2327_2" mask-type="alpha"><g filter="url(#__lottie_element_2330)"><rect width="1080" height="1080" fill="#fff" opacity="0"/><use xlink:href="#__lottie_element_2327"/></g></mask><clipPath id="__lottie_element_2332"><use xlink:href="#reuse-0"/></clipPath><clipPath id="__lottie_element_2336"><use xlink:href="#reuse-0"/></clipPath><clipPath id="__lottie_element_2340"><use xlink:href="#reuse-0"/></clipPath><clipPath id="__lottie_element_2344"><use xlink:href="#reuse-0"/></clipPath><clipPath id="__lottie_element_2348"><use xlink:href="#reuse-0"/></clipPath><g id="__lottie_element_2351"><g id="clockwise" clip-path="url(#__lottie_element_2352)" opacity="1" display="block"><g opacity="1" transform="rotate(28 -2829 4878) scale(3.00000004)" display="block"><use xlink:href="#reuse-1"/><use fill-opacity="0" stroke-width="2" xlink:href="#reuse-2"/></g></g></g><clipPath id="__lottie_element_2352"><use xlink:href="#reuse-0"/></clipPath><clipPath id="__lottie_element_2356"><use xlink:href="#reuse-0"/></clipPath><g id="__lottie_element_2359"><g id="clockwise" clip-path="url(#__lottie_element_2360)" opacity="1" style="mix-blend-mode:multiply" display="block"><g opacity="1" transform="rotate(28 -2829 4878) scale(3.00000004)" style="mix-blend-mode:multiply" display="block"><use xlink:href="#reuse-1"/><use fill-opacity="0" stroke-width="2" xlink:href="#reuse-2"/></g></g></g><clipPath id="__lottie_element_2360"><use xlink:href="#reuse-0"/></clipPath><clipPath id="__lottie_element_2364"><use xlink:href="#reuse-0"/></clipPath><g id="__lottie_element_2367"><g id="clockwise" clip-path="url(#__lottie_element_2368)" opacity="1" display="block"><use opacity="1" transform="matrix(3 0 0 3 1944 1992)" display="block" xlink:href="#reuse-3"/></g></g><clipPath id="__lottie_element_2368"><use xlink:href="#reuse-0"/></clipPath><mask id="__lottie_element_2367_1" mask-type="alpha"><use xlink:href="#__lottie_element_2367"/></mask><mask id="__lottie_element_2359_1" mask-type="alpha"><use xlink:href="#__lottie_element_2359"/></mask><mask id="__lottie_element_2351_1" mask-type="alpha"><use xlink:href="#__lottie_element_2351"/></mask></defs><g mask="url(#__lottie_element_2327_2)" display="block" clip-path="url(#__lottie_element_2322)"><g clip-path="url(#__lottie_element_2324)" transform="matrix(.32 0 0 .32 -74 -74)"><g id="counterclockwise" clip-path="url(#__lottie_element_2332)" opacity="1" display="block"><path fill="gold" d="M232.66099548339844,-386.62298583984375 C25.65999984741211,-538.9550170898438 -121.927001953125,-297.2539978027344 -385.77801513671875,-212.1320037841797 C-630.0239868164062,-133.343994140625 -466.81500244140625,312.18701171875 -235.2689971923828,423.1390075683594 C-3.697000026702881,534.1170043945312 167.26199340820312,331.7460021972656 410.70001220703125,250.4459991455078 C654.093017578125,169.156005859375 459.3160095214844,-219.83099365234375 232.66099548339844,-386.62298583984375z" opacity="1" transform="matrix(3 0 0 3 1920 1902)" display="block"/></g><g id="clockwise" clip-path="url(#__lottie_element_2336)" opacity="1" display="block"><use opacity="1" transform="matrix(3 0 0 3 1944 1992)" display="block" xlink:href="#reuse-3"/></g><g id="counterclockwise" clip-path="url(#__lottie_element_2340)" opacity="1" style="mix-blend-mode:multiply" display="block"><use opacity="1" transform="rotate(87 -3 1920) scale(3.01481018)" style="mix-blend-mode:multiply" display="block" xlink:href="#reuse-4"/></g><g id="clockwise" clip-path="url(#__lottie_element_2344)" opacity="1" style="mix-blend-mode:multiply" display="block"><use opacity="1" transform="rotate(28 -2829 4878) scale(3.00000004)" display="block" xlink:href="#reuse-1"/></g><g mask="url(#__lottie_element_2351_1)" display="block"><g id="counterclockwise" clip-path="url(#__lottie_element_2348)" opacity="1"><use opacity="1" transform="rotate(87 -3 1920) scale(3.01481018)" display="block" xlink:href="#reuse-4"/></g></g><g mask="url(#__lottie_element_2359_1)" style="mix-blend-mode:multiply" display="block"><g id="counterclockwise" clip-path="url(#__lottie_element_2356)" opacity="1"><use opacity="1" transform="rotate(87 -3 1920) scale(3.01481018)" display="block" xlink:href="#reuse-4"/></g></g><g mask="url(#__lottie_element_2367_1)" display="block"><g id="counterclockwise" clip-path="url(#__lottie_element_2364)" opacity="1"><path fill="#502A5A" d="M350.1659851074219,-154.0399932861328 C301.1300048828125,-231.11099243164062 252.20199584960938,-312.7030029296875 227.88299560546875,-395.9620056152344 C159.25599670410156,-630.8740234375 -282.5429992675781,-378.6659851074219 -418.07598876953125,-159.63800048828125 C-553.5960083007812,59.43199920654297 -414.34600830078125,243.4739990234375 -227.41099548339844,420.17401123046875 C-40.487998962402344,596.8309936523438 205.68699645996094,402.38299560546875 405.87701416015625,241.10699462890625 C538.760986328125,134.1020050048828 446.9309997558594,-1.9429999589920044 350.1659851074219,-154.0399932861328z" opacity="1" transform="rotate(87 -3 1920) scale(3.01481018)" display="block"/></g></g></g></g><script>window.addEventListener(&apos;DOMContentLoaded&apos;, function () {
      var clockwiseElements = document.querySelectorAll(&apos;#clockwise&apos;);

      clockwiseElements.forEach(function (element) {
        var animateTransform = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;animateTransform&quot;);
        animateTransform.setAttribute(&quot;attributeName&quot;, &quot;transform&quot;);
        animateTransform.setAttribute(&quot;attributeType&quot;, &quot;XML&quot;);
        animateTransform.setAttribute(&quot;type&quot;, &quot;rotate&quot;);
        animateTransform.setAttribute(&quot;from&quot;, &quot;0 1920 1920&quot;);
        animateTransform.setAttribute(&quot;to&quot;, &quot;360 1920 1920&quot;);
        animateTransform.setAttribute(&quot;begin&quot;, &quot;0s&quot;);
        animateTransform.setAttribute(&quot;dur&quot;, &quot;13s&quot;);
        animateTransform.setAttribute(&quot;repeatCount&quot;, &quot;indefinite&quot;);

        element.appendChild(animateTransform);
      });

      var counterclockwiseElements = document.querySelectorAll(&apos;#counterclockwise&apos;);

      counterclockwiseElements.forEach(function (element) {
        var animateTransform = document.createElementNS(&quot;http://www.w3.org/2000/svg&quot;, &quot;animateTransform&quot;);
        animateTransform.setAttribute(&quot;attributeName&quot;, &quot;transform&quot;);
        animateTransform.setAttribute(&quot;attributeType&quot;, &quot;XML&quot;);
        animateTransform.setAttribute(&quot;type&quot;, &quot;rotate&quot;);
        animateTransform.setAttribute(&quot;from&quot;, &quot;360 1920 1920&quot;);
        animateTransform.setAttribute(&quot;to&quot;, &quot;0 1920 1920&quot;);
        animateTransform.setAttribute(&quot;begin&quot;, &quot;0s&quot;);
        animateTransform.setAttribute(&quot;dur&quot;, &quot;13s&quot;);
        animateTransform.setAttribute(&quot;repeatCount&quot;, &quot;indefinite&quot;);

        element.appendChild(animateTransform);
      });
    });</script></svg>