Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs 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 its URL and the proper URL extension.

+ 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

Auto Save

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <svg cache-id="0c843c613a4c4171b3ffcb4c7d087836" id="evGCq9UJtR51" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 640 480" shape-rendering="geometricPrecision" text-rendering="geometricPrecision" style="background-color:rgb(0,0,0)"><defs><filter id="evGCq9UJtR54-filter" x="-400%" width="600%" y="-400%" height="600%"><feGaussianBlur id="evGCq9UJtR54-filter-blur-0" stdDeviation="1,0" result="result"/></filter><radialGradient id="evGCq9UJtR54-fill" cx="0" cy="0" r="0.500000" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0.50000000000000 0.50000000000000)"><stop id="evGCq9UJtR54-fill-0" offset="58%" stop-color="rgba(0,11,255,0)"/><stop id="evGCq9UJtR54-fill-1" offset="100%" stop-color="rgba(0,5,255,0.38)"/></radialGradient><linearGradient id="evGCq9UJtR54-stroke" x1="0" y1="0.500000" x2="1" y2="0.500000" spreadMethod="pad" gradientUnits="objectBoundingBox"><stop id="evGCq9UJtR54-stroke-0" offset="0%" stop-color="rgb(9,0,255)"/><stop id="evGCq9UJtR54-stroke-1" offset="100%" stop-color="rgb(0,163,255)"/></linearGradient><filter id="evGCq9UJtR55-filter" x="-400%" width="600%" y="-400%" height="600%"><feGaussianBlur id="evGCq9UJtR55-filter-blur-0" stdDeviation="1,0" result="result"/></filter><radialGradient id="evGCq9UJtR55-fill" cx="0" cy="0" r="0.500000" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0.50000000000000 0.50000000000000)"><stop id="evGCq9UJtR55-fill-0" offset="54%" stop-color="rgba(0,11,255,0)"/><stop id="evGCq9UJtR55-fill-1" offset="100%" stop-color="rgba(0,5,255,0.5)"/></radialGradient><linearGradient id="evGCq9UJtR55-stroke" x1="0.915810" y1="0.774689" x2="0.108337" y2="0.235510" spreadMethod="pad" gradientUnits="objectBoundingBox"><stop id="evGCq9UJtR55-stroke-0" offset="0%" stop-color="rgb(9,0,255)"/><stop id="evGCq9UJtR55-stroke-1" offset="100%" stop-color="rgb(0,117,255)"/></linearGradient><filter id="evGCq9UJtR56-filter" x="-400%" width="600%" y="-400%" height="600%"><feGaussianBlur id="evGCq9UJtR56-filter-blur-0" stdDeviation="1,0" result="result"/></filter><radialGradient id="evGCq9UJtR56-fill" cx="0" cy="0" r="0.500000" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0.50000000000000 0.50000000000000)"><stop id="evGCq9UJtR56-fill-0" offset="65%" stop-color="rgba(0,11,255,0)"/><stop id="evGCq9UJtR56-fill-1" offset="100%" stop-color="rgba(0,5,255,0.5)"/></radialGradient><linearGradient id="evGCq9UJtR56-stroke" x1="0" y1="0.500000" x2="1" y2="0.500000" spreadMethod="pad" gradientUnits="objectBoundingBox"><stop id="evGCq9UJtR56-stroke-0" offset="0%" stop-color="rgb(9,0,255)"/><stop id="evGCq9UJtR56-stroke-1" offset="100%" stop-color="rgb(0,163,255)"/></linearGradient><radialGradient id="evGCq9UJtR58-fill" cx="0" cy="0" r="0.500000" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0.50000000000000 0.50000000000000)"><stop id="evGCq9UJtR58-fill-0" offset="0%" stop-color="rgb(149,237,255)"/><stop id="evGCq9UJtR58-fill-1" offset="50%" stop-color="rgb(11,192,255)"/><stop id="evGCq9UJtR58-fill-2" offset="70%" stop-color="rgb(0,57,255)"/><stop id="evGCq9UJtR58-fill-3" offset="100%" stop-color="rgba(19,0,255,0)"/></radialGradient><radialGradient id="evGCq9UJtR59-fill" cx="0" cy="0" r="0.500000" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0.50000000000000 0.50000000000000)"><stop id="evGCq9UJtR59-fill-0" offset="0%" stop-color="rgb(149,237,255)"/><stop id="evGCq9UJtR59-fill-1" offset="50%" stop-color="rgb(11,192,255)"/><stop id="evGCq9UJtR59-fill-2" offset="70%" stop-color="rgb(0,57,255)"/><stop id="evGCq9UJtR59-fill-3" offset="100%" stop-color="rgba(19,0,255,0)"/></radialGradient><radialGradient id="evGCq9UJtR510-fill" cx="0" cy="0" r="0.500000" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0.50000000000000 0.50000000000000)"><stop id="evGCq9UJtR510-fill-0" offset="0%" stop-color="rgb(149,237,255)"/><stop id="evGCq9UJtR510-fill-1" offset="50%" stop-color="rgb(11,192,255)"/><stop id="evGCq9UJtR510-fill-2" offset="70%" stop-color="rgb(0,57,255)"/><stop id="evGCq9UJtR510-fill-3" offset="100%" stop-color="rgba(19,0,255,0)"/></radialGradient><radialGradient id="evGCq9UJtR512-fill" cx="0" cy="0" r="0.500000" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0.50000000000000 0.50000000000000)"><stop id="evGCq9UJtR512-fill-0" offset="0%" stop-color="rgb(149,237,255)"/><stop id="evGCq9UJtR512-fill-1" offset="50%" stop-color="rgb(11,192,255)"/><stop id="evGCq9UJtR512-fill-2" offset="70%" stop-color="rgb(0,57,255)"/><stop id="evGCq9UJtR512-fill-3" offset="100%" stop-color="rgba(19,0,255,0)"/></radialGradient><radialGradient id="evGCq9UJtR513-fill" cx="0" cy="0" r="0.500000" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0.50000000000000 0.50000000000000)"><stop id="evGCq9UJtR513-fill-0" offset="0%" stop-color="rgb(149,237,255)"/><stop id="evGCq9UJtR513-fill-1" offset="50%" stop-color="rgb(11,192,255)"/><stop id="evGCq9UJtR513-fill-2" offset="70%" stop-color="rgb(0,57,255)"/><stop id="evGCq9UJtR513-fill-3" offset="100%" stop-color="rgba(19,0,255,0)"/></radialGradient><radialGradient id="evGCq9UJtR514-fill" cx="0" cy="0" r="0.500000" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0.50000000000000 0.50000000000000)"><stop id="evGCq9UJtR514-fill-0" offset="0%" stop-color="rgb(149,237,255)"/><stop id="evGCq9UJtR514-fill-1" offset="50%" stop-color="rgb(11,192,255)"/><stop id="evGCq9UJtR514-fill-2" offset="70%" stop-color="rgb(0,57,255)"/><stop id="evGCq9UJtR514-fill-3" offset="100%" stop-color="rgba(19,0,255,0)"/></radialGradient><radialGradient id="evGCq9UJtR515-fill" cx="0" cy="0" r="0.500000" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0.50000000000000 0.50000000000000)"><stop id="evGCq9UJtR515-fill-0" offset="0%" stop-color="rgb(149,237,255)"/><stop id="evGCq9UJtR515-fill-1" offset="50%" stop-color="rgb(11,192,255)"/><stop id="evGCq9UJtR515-fill-2" offset="70%" stop-color="rgb(0,57,255)"/><stop id="evGCq9UJtR515-fill-3" offset="100%" stop-color="rgba(19,0,255,0)"/></radialGradient><radialGradient id="evGCq9UJtR516-fill" cx="0" cy="0" r="0.500000" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0.50000000000000 0.50000000000000)"><stop id="evGCq9UJtR516-fill-0" offset="0%" stop-color="rgb(149,237,255)"/><stop id="evGCq9UJtR516-fill-1" offset="50%" stop-color="rgb(11,192,255)"/><stop id="evGCq9UJtR516-fill-2" offset="70%" stop-color="rgb(0,57,255)"/><stop id="evGCq9UJtR516-fill-3" offset="100%" stop-color="rgba(19,0,255,0)"/></radialGradient><radialGradient id="evGCq9UJtR517-fill" cx="0" cy="0" r="0.500000" spreadMethod="pad" gradientUnits="objectBoundingBox" gradientTransform="matrix(1 0 0 1 0.50000000000000 0.50000000000000)"><stop id="evGCq9UJtR517-fill-0" offset="0%" stop-color="rgb(149,237,255)"/><stop id="evGCq9UJtR517-fill-1" offset="50%" stop-color="rgb(11,192,255)"/><stop id="evGCq9UJtR517-fill-2" offset="70%" stop-color="rgb(0,57,255)"/><stop id="evGCq9UJtR517-fill-3" offset="100%" stop-color="rgba(19,0,255,0)"/></radialGradient></defs><ellipse id="evGCq9UJtR52" rx="75" ry="75" transform="matrix(1 0 0 1 320.00000000000011 240.00000000000065)" fill="rgb(210,219,237)" fill-opacity="0.05" stroke="none" stroke-width="0"/><g id="evGCq9UJtR53"><path id="evGCq9UJtR54" d="M320,165C346.056130,165,363.143754,185.193664,373.801066,205.400458C384.458378,225.607252,397.907417,265.931817,373.801066,289.174062C349.694715,312.416307,307.404521,313.028065,288.970252,291.757755C270.535983,270.487445,237.887740,266.233382,245,231.846381C252.112260,197.459380,293.943870,165,320,165Z" filter="url(#evGCq9UJtR54-filter)" fill="url(#evGCq9UJtR54-fill)" stroke="url(#evGCq9UJtR54-stroke)" stroke-width="1.280000" stroke-opacity="0.75"/><path id="evGCq9UJtR55" d="M313.821739,177.982135C339.877869,177.982135,363.413020,171.947868,374.070332,192.154662C384.727644,212.361456,386.544350,258.960536,359.594759,280.138242C332.645168,301.315948,300.932724,317.023398,276.573117,300.974889C252.213510,284.926380,243.227474,244.963072,250.339734,210.576071C257.451994,176.189070,287.765609,177.982135,313.821739,177.982135Z" transform="matrix(0.99978828397722 0.02057637533391 -0.02057637533391 0.99978828397722 9.90692950827281 -5.18975902332033)" filter="url(#evGCq9UJtR55-filter)" fill="url(#evGCq9UJtR55-fill)" stroke="url(#evGCq9UJtR55-stroke)" stroke-width="1.280000" stroke-opacity="0.75"/><path id="evGCq9UJtR56" d="M319.361498,156.535243C345.417628,156.535243,356.157810,172.648539,366.815122,192.855333C377.472434,213.062127,413.782855,243.642606,389.676504,266.884851C365.570153,290.127096,307.926329,326.450838,289.492060,305.180528C271.057791,283.910218,251.967653,263.671592,259.079913,229.284591C266.192173,194.897590,293.305368,156.535243,319.361498,156.535243Z" transform="matrix(0.73834027187740 0.67442838235353 -0.67442838235353 0.73834027187740 243.57542160093072 -151.75072453952447)" filter="url(#evGCq9UJtR56-filter)" fill="url(#evGCq9UJtR56-fill)" stroke="url(#evGCq9UJtR56-stroke)" stroke-width="1.280000" stroke-opacity="0.75"/></g><g id="evGCq9UJtR57"><ellipse id="evGCq9UJtR58" rx="4" ry="4" transform="matrix(0.75000000000000 0 0 0.75000000000000 320.00000000029718 148.30120581655294)" opacity="0.5" fill="url(#evGCq9UJtR58-fill)" stroke="none" stroke-width="0"/><ellipse id="evGCq9UJtR59" rx="4" ry="4" transform="matrix(0.75000000000000 0 0 0.75000000000000 407.43313785374738 267.06844399999989)" opacity="0.5" fill="url(#evGCq9UJtR59-fill)" stroke="none" stroke-width="0"/><ellipse id="evGCq9UJtR510" rx="4" ry="4" transform="matrix(1 0 0 1 319.48995575999515 232.09981464000057)" fill="url(#evGCq9UJtR510-fill)" stroke="none" stroke-width="0"/></g><g id="evGCq9UJtR511"><ellipse id="evGCq9UJtR512" rx="1.500000" ry="1.500000" transform="matrix(1 0 0 1 268.93313785155254 296.90045800155258)" opacity="0.2" fill="url(#evGCq9UJtR512-fill)" stroke="none" stroke-width="0"/><ellipse id="evGCq9UJtR513" rx="1.500000" ry="1.500000" transform="matrix(1 0 0 1 251.51223560155253 183.32339973155277)" opacity="0.8" fill="url(#evGCq9UJtR513-fill)" stroke="none" stroke-width="0"/><ellipse id="evGCq9UJtR514" rx="1.500000" ry="1.500000" transform="matrix(1 0 0 1 233.77765891655244 265.56844400155313)" opacity="0.6" fill="url(#evGCq9UJtR514-fill)" stroke="none" stroke-width="0"/><ellipse id="evGCq9UJtR515" rx="1.500000" ry="1.500000" transform="matrix(1 0 0 1 388.96767591655242 305.63961792155317)" opacity="0.4" fill="url(#evGCq9UJtR515-fill)" stroke="none" stroke-width="0"/><ellipse id="evGCq9UJtR516" rx="1.500000" ry="1.500000" transform="matrix(1 0 0 1 403.43313784655243 178.28971399155321)" opacity="0.2" fill="url(#evGCq9UJtR516-fill)" stroke="none" stroke-width="0"/><ellipse id="evGCq9UJtR517" rx="1.500000" ry="1.500000" transform="matrix(1 0 0 1 367.85450560155249 246.44283300655303)" opacity="0" fill="url(#evGCq9UJtR517-fill)" stroke="none" stroke-width="0"/></g><script><![CDATA[!function(t,n){"object"==typeof exports&&"undefined"!=typeof module?module.exports=n():"function"==typeof define&&define.amd?define(n):(t="undefined"!=typeof globalThis?globalThis:t||self).__SVGATOR_PLAYER__=n()}(this,(function(){"use strict";function t(n){return(t="function"==typeof Symbol&&"symbol"==typeof Symbol.iterator?function(t){return typeof t}:function(t){return t&&"function"==typeof Symbol&&t.constructor===Symbol&&t!==Symbol.prototype?"symbol":typeof t})(n)}function n(t,n){if(!(t instanceof n))throw new TypeError("Cannot call a class as a function")}function e(t,n){for(var e=0;e<n.length;e++){var r=n[e];r.enumerable=r.enumerable||!1,r.configurable=!0,"value"in r&&(r.writable=!0),Object.defineProperty(t,r.key,r)}}function r(t,n,r){return n&&e(t.prototype,n),r&&e(t,r),t}function i(t){return(i=Object.setPrototypeOf?Object.getPrototypeOf:function(t){return t.__proto__||Object.getPrototypeOf(t)})(t)}function u(t,n){return(u=Object.setPrototypeOf||function(t,n){return t.__proto__=n,t})(t,n)}function o(t,n){return!n||"object"!=typeof n&&"function"!=typeof n?function(t){if(void 0===t)throw new ReferenceError("this hasn't been initialised - super() hasn't been called");return t}(t):n}function a(t){var n=function(){if("undefined"==typeof Reflect||!Reflect.construct)return!1;if(Reflect.construct.sham)return!1;if("function"==typeof Proxy)return!0;try{return Boolean.prototype.valueOf.call(Reflect.construct(Boolean,[],(function(){}))),!0}catch(t){return!1}}();return function(){var e,r=i(t);if(n){var u=i(this).constructor;e=Reflect.construct(r,arguments,u)}else e=r.apply(this,arguments);return o(this,e)}}function l(t,n,e){return(l="undefined"!=typeof Reflect&&Reflect.get?Reflect.get:function(t,n,e){var r=function(t,n){for(;!Object.prototype.hasOwnProperty.call(t,n)&&null!==(t=i(t)););return t}(t,n);if(r){var u=Object.getOwnPropertyDescriptor(r,n);return u.get?u.get.call(e):u.value}})(t,n,e||t)}var s=Math.abs;function f(t){return t}function c(t,n,e){var r=1-e;return 3*e*r*(t*r+n*e)+e*e*e}function h(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1;return t<0||t>1||e<0||e>1?null:s(t-n)<=1e-5&&s(e-r)<=1e-5?f:function(i){if(i<=0)return t>0?i*n/t:0===n&&e>0?i*r/e:0;if(i>=1)return e<1?1+(i-1)*(r-1)/(e-1):1===e&&t<1?1+(i-1)*(n-1)/(t-1):1;for(var u,o=0,a=1;o<a;){var l=c(t,e,u=(o+a)/2);if(s(i-l)<1e-5)break;l<i?o=u:a=u}return c(n,r,u)}}function v(){return 1}function d(t){return 1===t?1:0}function y(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;if(1===t){if(0===n)return d;if(1===n)return v}var e=1/t;return function(t){return t>=1?1:(t+=n*e)-t%e}}function g(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:2;if(Number.isInteger(t))return t;var e=Math.pow(10,n);return Math.round(t*e)/e}var p=Math.PI/180;function m(t,n,e){return t>=.5?e:n}function b(t,n,e){return 0===t||n===e?n:t*(e-n)+n}function w(t,n,e){var r=b(t,n,e);return r<=0?0:r}function x(t,n,e){return 0===t?n:1===t?e:{x:b(t,n.x,e.x),y:b(t,n.y,e.y)}}function A(t,n,e){return 0===t?n:1===t?e:{x:w(t,n.x,e.x),y:w(t,n.y,e.y)}}function k(t,n,e){var r=function(t,n,e){return Math.round(b(t,n,e))}(t,n,e);return r<=0?0:r>=255?255:r}function _(t,n,e){return 0===t?n:1===t?e:{r:k(t,n.r,e.r),g:k(t,n.g,e.g),b:k(t,n.b,e.b),a:b(t,null==n.a?1:n.a,null==e.a?1:e.a)}}function S(t,n,e){if(0===t)return n;if(1===t)return e;var r=n.length;if(r!==e.length)return m(t,n,e);for(var i=[],u=0;u<r;u++)i.push(_(t,n[u],e[u]));return i}function M(t,n,e){var r=n.length;if(r!==e.length)return m(t,n,e);for(var i=new Array(r),u=0;u<r;u++)i[u]=b(t,n[u],e[u]);return i}function O(t,n){for(var e=[],r=0;r<t;r++)e.push(n);return e}function E(t,n){if(--n<=0)return t;var e=(t=Object.assign([],t)).length;do{for(var r=0;r<e;r++)t.push(t[r])}while(--n>0);return t}var B,I=function(){function t(e){n(this,t),this.list=e,this.length=e.length}return r(t,[{key:"setAttribute",value:function(t,n){for(var e=this.list,r=0;r<this.length;r++)e[r].setAttribute(t,n)}},{key:"removeAttribute",value:function(t){for(var n=this.list,e=0;e<this.length;e++)n[e].removeAttribute(t)}},{key:"style",value:function(t,n){for(var e=this.list,r=0;r<this.length;r++)e[r].style[t]=n}}]),t}(),j=/-./g,P=function(t,n){return n.toUpperCase()};function T(t){return"function"==typeof t?t:m}function F(t){return t?"function"==typeof t?t:Array.isArray(t)?function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:f;if(!Array.isArray(t))return n;switch(t.length){case 1:return y(t[0])||n;case 2:return y(t[0],t[1])||n;case 4:return h(t[0],t[1],t[2],t[3])||n}return n}(t,null):function(t,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:f;switch(t){case"linear":return f;case"steps":return y(n.steps||1,n.jump||0)||e;case"bezier":case"cubic-bezier":return h(n.x1||0,n.y1||0,n.x2||0,n.y2||0)||e}return e}(t.type,t.value,null):null}function R(t,n,e){var r=arguments.length>3&&void 0!==arguments[3]&&arguments[3],i=n.length-1;if(t<=n[0].t)return r?[0,0,n[0].v]:n[0].v;if(t>=n[i].t)return r?[i,1,n[i].v]:n[i].v;var u,o=n[0],a=null;for(u=1;u<=i;u++){if(!(t>n[u].t)){a=n[u];break}o=n[u]}return null==a?r?[i,1,n[i].v]:n[i].v:o.t===a.t?r?[u,1,a.v]:a.v:(t=(t-o.t)/(a.t-o.t),o.e&&(t=o.e(t)),r?[u,t,e(t,o.v,a.v)]:e(t,o.v,a.v))}function C(t,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null;return t&&t.length?"function"!=typeof n?null:("function"!=typeof e&&(e=null),function(r){var i=R(r,t,n);return null!=i&&e&&(i=e(i)),i}):null}function N(t,n){return t.t-n.t}function q(n,e,r,i,u){var o,a="@"===r[0],l="#"===r[0],s=B[r],f=m;switch(a?(o=r.substr(1),r=o.replace(j,P)):l&&(r=r.substr(1)),t(s)){case"function":if(f=s(i,u,R,F,r,a,e,n),l)return f;break;case"string":f=C(i,T(s));break;case"object":if((f=C(i,T(s.i),s.f))&&"function"==typeof s.u)return s.u(e,f,r,a,n)}return f?function(t,n,e){var r=arguments.length>3&&void 0!==arguments[3]&&arguments[3];if(r)return t instanceof I?function(r){return t.style(n,e(r))}:function(r){return t.style[n]=e(r)};if(Array.isArray(n)){var i=n.length;return function(r){var u=e(r);if(null==u)for(var o=0;o<i;o++)t[o].removeAttribute(n);else for(var a=0;a<i;a++)t[a].setAttribute(n,u)}}return function(r){var i=e(r);null==i?t.removeAttribute(n):t.setAttribute(n,i)}}(e,r,f,a):null}function V(n,e,r,i){if(!i||"object"!==t(i))return null;var u=null,o=null;return Array.isArray(i)?o=function(t){if(!t||!t.length)return null;for(var n=0;n<t.length;n++)t[n].e&&(t[n].e=F(t[n].e));return t.sort(N)}(i):(o=i.keys,u=i.data||null),o?q(n,e,r,o,u):null}function L(t,n,e){if(!e)return null;var r=[];for(var i in e)if(e.hasOwnProperty(i)){var u=V(t,n,i,e[i]);u&&r.push(u)}return r.length?r:null}function z(t,n){if(!n.duration||n.duration<0)return null;var e=function(t,n){if(!n)return null;var e=[];if(Array.isArray(n))for(var r=n.length,i=0;i<r;i++){var u=n[i];if(2===u.length){var o=null;if("string"==typeof u[0])o=t.getElementById(u[0]);else if(Array.isArray(u[0])){o=[];for(var a=0;a<u[0].length;a++)if("string"==typeof u[0][a]){var l=t.getElementById(u[0][a]);l&&o.push(l)}o=o.length?1===o.length?o[0]:new I(o):null}if(o){var s=L(t,o,u[1]);s&&(e=e.concat(s))}}}else for(var f in n)if(n.hasOwnProperty(f)){var c=t.getElementById(f);if(c){var h=L(t,c,n[f]);h&&(e=e.concat(h))}}return e.length?e:null}(t,n.elements);return e?function(t,n){var e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:1/0,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=arguments.length>4&&void 0!==arguments[4]&&arguments[4],u=arguments.length>5&&void 0!==arguments[5]?arguments[5]:1,o=t.length,a=r>0?n:0;i&&e%2==0&&(a=n-a);var l=null;return function(s,f){var c=s%n,h=1+(s-c)/n;f*=r,i&&h%2==0&&(f=-f);var v=!1;if(h>e)c=a,v=!0,-1===u&&(c=r>0?0:n);else if(f<0&&(c=n-c),c===l)return!1;l=c;for(var d=0;d<o;d++)t[d](c);return v}}(e,n.duration,n.iterations||1/0,n.direction||1,!!n.alternate,n.fill||1):null}var D=function(){function t(e,r){var i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:{};n(this,t),this._id=0,this._running=!1,this._rollingBack=!1,this._animations=e,this.duration=r.duration,this.alternate=r.alternate,this.fill=r.fill,this.iterations=r.iterations,this.direction=i.direction||1,this.speed=i.speed||1,this.fps=i.fps||100,this.offset=i.offset||0,this.rollbackStartOffset=0}return r(t,[{key:"_rollback",value:function(){var t=this,n=1/0,e=null;this.rollbackStartOffset=this.offset,this._rollingBack||(this._rollingBack=!0,this._running=!0);this._id=window.requestAnimationFrame((function r(i){if(t._rollingBack){null==e&&(e=i);var u=i-e,o=t.rollbackStartOffset-u,a=Math.round(o*t.speed);if(a>t.duration&&n!=1/0){var l=!!t.alternate&&a/t.duration%2>1,s=a%t.duration;a=(s+=l?t.duration:0)||t.duration}var f=t.fps?1e3/t.fps:0,c=Math.max(0,a);if(c<n-f){t.offset=c,n=c;for(var h=t._animations,v=h.length,d=0;d<v;d++)h[d](c,t.direction)}var y=!1;if(t.iterations>0&&-1===t.fill){var g=t.iterations*t.duration,p=g==a;a=p?0:a,t.offset=p?0:t.offset,y=a>g}a>0&&t.offset>=a&&!y?t._id=window.requestAnimationFrame(r):t.stop()}}))}},{key:"_start",value:function(){var t=this,n=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,e=-1/0,r=null,i={},u=function u(o){t._running=!0,null==r&&(r=o);var a=Math.round((o-r+n)*t.speed),l=t.fps?1e3/t.fps:0;if(a>e+l&&!t._rollingBack){t.offset=a,e=a;for(var s=t._animations,f=s.length,c=0,h=0;h<f;h++)i[h]?c++:(i[h]=s[h](a,t.direction),i[h]&&c++);if(c===f)return void t._stop()}t._id=window.requestAnimationFrame(u)};this._id=window.requestAnimationFrame(u)}},{key:"_stop",value:function(){this._id&&window.cancelAnimationFrame(this._id),this._running=!1,this._rollingBack=!1}},{key:"play",value:function(){!this._rollingBack&&this._running||(this._rollingBack=!1,this.rollbackStartOffset>this.duration&&(this.offset=this.rollbackStartOffset-(this.rollbackStartOffset-this.offset)%this.duration,this.rollbackStartOffset=0),this._start(this.offset))}},{key:"stop",value:function(){this._stop(),this.offset=0,this.rollbackStartOffset=0;var t=this.direction,n=this._animations;window.requestAnimationFrame((function(){for(var e=0;e<n.length;e++)n[e](0,t)}))}},{key:"reachedToEnd",value:function(){return this.iterations>0&&this.offset>=this.iterations*this.duration}},{key:"restart",value:function(){this._stop(),this.offset=0,this._start()}},{key:"pause",value:function(){this._stop()}},{key:"reverse",value:function(){this.direction=-this.direction}}],[{key:"build",value:function(n,e){return(n=function(t,n){if(B=n,!t||!t.root||!Array.isArray(t.animations))return null;for(var e=document.getElementsByTagName("svg"),r=!1,i=0;i<e.length;i++)if(e[i].id===t.root&&!e[i].svgatorAnimation){(r=e[i]).svgatorAnimation=!0;break}if(!r)return null;var u=t.animations.map((function(t){return z(r,t)})).filter((function(t){return!!t}));return u.length?{element:r,animations:u,animationSettings:t.animationSettings,options:t.options||void 0}:null}(n,e))?{el:n.element,options:n.options||{},player:new t(n.animations,n.animationSettings,n.options)}:null}}]),t}();!function(){for(var t=0,n=["ms","moz","webkit","o"],e=0;e<n.length&&!window.requestAnimationFrame;++e)window.requestAnimationFrame=window[n[e]+"RequestAnimationFrame"],window.cancelAnimationFrame=window[n[e]+"CancelAnimationFrame"]||window[n[e]+"CancelRequestAnimationFrame"];window.requestAnimationFrame||(window.requestAnimationFrame=function(n){var e=Date.now(),r=Math.max(0,16-(e-t)),i=window.setTimeout((function(){n(e+r)}),r);return t=e+r,i},window.cancelAnimationFrame=window.clearTimeout)}();var U=function(t,n){var e=!1,r=null;return function(i){e&&clearTimeout(e),e=setTimeout((function(){return function(){for(var i=0,u=window.innerHeight,o=0,a=window.innerWidth,l=t.parentNode;l instanceof Element;){var s=window.getComputedStyle(l);if("visible"!==s.overflowY||"visible"!==s.overflowX){var f=l.getBoundingClientRect();"visible"!==s.overflowY&&(i=Math.max(i,f.top),u=Math.min(u,f.bottom)),"visible"!==s.overflowX&&(o=Math.max(o,f.left),a=Math.min(a,f.right))}if(l===l.parentNode)break;l=l.parentNode}e=!1;var c=t.getBoundingClientRect(),h=Math.min(c.height,Math.max(0,i-c.top)),v=Math.min(c.height,Math.max(0,c.bottom-u)),d=Math.min(c.width,Math.max(0,o-c.left)),y=Math.min(c.width,Math.max(0,c.right-a)),g=(c.height-h-v)/c.height,p=(c.width-d-y)/c.width,m=Math.round(g*p*100);null!==r&&r===m||(r=m,n(m))}()}),100)}},W=function(){function t(e,r,i){n(this,t),r=Math.max(1,r||1),r=Math.min(r,100),this.el=e,this.onTresholdChange=i&&i.call?i:function(){},this.tresholdPercent=r||1,this.currentVisibility=null,this.visibilityCalculator=U(e,this.onVisibilityUpdate.bind(this)),this.bindScrollWatchers(),this.visibilityCalculator()}return r(t,[{key:"bindScrollWatchers",value:function(){for(var t=this.el.parentNode;t&&(t.addEventListener("scroll",this.visibilityCalculator),t!==t.parentNode&&t!==document);)t=t.parentNode}},{key:"onVisibilityUpdate",value:function(t){var n=this.currentVisibility>=this.tresholdPercent,e=t>=this.tresholdPercent;if(null===this.currentVisibility||n!==e)return this.currentVisibility=t,void this.onTresholdChange(e);this.currentVisibility=t}}]),t}(),Y=/\.0+$/g;function G(t){return Number.isInteger(t)?t+"":t.toFixed(6).replace(Y,"")}function H(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:" ";return t&&t.length?t.map(G).join(n):""}function Q(t){return G(t.x)+","+G(t.y)}function X(t){return t?null==t.a||t.a>=1?"rgb("+t.r+","+t.g+","+t.b+")":"rgba("+t.r+","+t.g+","+t.b+","+t.a+")":"transparent"}var $={f:null,i:A,u:function(t,n){return function(e){var r=n(e);t.setAttribute("rx",G(r.x)),t.setAttribute("ry",G(r.y))}}},Z={f:null,i:function(t,n,e){return 0===t?n:1===t?e:{width:w(t,n.width,e.width),height:w(t,n.height,e.height)}},u:function(t,n){return function(e){var r=n(e);t.setAttribute("width",G(r.width)),t.setAttribute("height",G(r.height))}}},J=Math.sin,K=Math.cos,tt=Math.acos,nt=Math.asin,et=Math.tan,rt=Math.atan2,it=Math.PI/180,ut=180/Math.PI,ot=Math.sqrt,at=function(){function t(){var e=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,r=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,i=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,u=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,o=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,a=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0;n(this,t),this.m=[e,r,i,u,o,a],this.i=null,this.w=null,this.s=null}return r(t,[{key:"determinant",get:function(){var t=this.m;return t[0]*t[3]-t[1]*t[2]}},{key:"isIdentity",get:function(){if(null===this.i){var t=this.m;this.i=1===t[0]&&0===t[1]&&0===t[2]&&1===t[3]&&0===t[4]&&0===t[5]}return this.i}},{key:"point",value:function(t,n){var e=this.m;return{x:e[0]*t+e[2]*n+e[4],y:e[1]*t+e[3]*n+e[5]}}},{key:"translateSelf",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0;if(!t&&!n)return this;var e=this.m;return e[4]+=e[0]*t+e[2]*n,e[5]+=e[1]*t+e[3]*n,this.w=this.s=this.i=null,this}},{key:"rotateSelf",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0;if(t%=360){var n=J(t*=it),e=K(t),r=this.m,i=r[0],u=r[1];r[0]=i*e+r[2]*n,r[1]=u*e+r[3]*n,r[2]=r[2]*e-i*n,r[3]=r[3]*e-u*n,this.w=this.s=this.i=null}return this}},{key:"scaleSelf",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:1;if(1!==t||1!==n){var e=this.m;e[0]*=t,e[1]*=t,e[2]*=n,e[3]*=n,this.w=this.s=this.i=null}return this}},{key:"skewSelf",value:function(t,n){if(n%=360,(t%=360)||n){var e=this.m,r=e[0],i=e[1],u=e[2],o=e[3];t&&(t=et(t*it),e[2]+=r*t,e[3]+=i*t),n&&(n=et(n*it),e[0]+=u*n,e[1]+=o*n),this.w=this.s=this.i=null}return this}},{key:"resetSelf",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:1,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:0,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:1,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:0,u=arguments.length>5&&void 0!==arguments[5]?arguments[5]:0,o=this.m;return o[0]=t,o[1]=n,o[2]=e,o[3]=r,o[4]=i,o[5]=u,this.w=this.s=this.i=null,this}},{key:"recomposeSelf",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:null,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:null,e=arguments.length>2&&void 0!==arguments[2]?arguments[2]:null,r=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null,i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:null;return this.isIdentity||this.resetSelf(),t&&(t.x||t.y)&&this.translateSelf(t.x,t.y),n&&this.rotateSelf(n),e&&(e.x&&this.skewSelf(e.x,0),e.y&&this.skewSelf(0,e.y)),!r||1===r.x&&1===r.y||this.scaleSelf(r.x,r.y),i&&(i.x||i.y)&&this.translateSelf(i.x,i.y),this}},{key:"decompose",value:function(){var t=arguments.length>0&&void 0!==arguments[0]?arguments[0]:0,n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:0,e=this.m,r=e[0]*e[0]+e[1]*e[1],i=[[e[0],e[1]],[e[2],e[3]]],u=ot(r);if(0===u)return{origin:{x:e[4],y:e[5]},translate:{x:t,y:n},scale:{x:0,y:0},skew:{x:0,y:0},rotate:0};i[0][0]/=u,i[0][1]/=u;var o=e[0]*e[3]-e[1]*e[2]<0;o&&(u=-u);var a=i[0][0]*i[1][0]+i[0][1]*i[1][1];i[1][0]-=i[0][0]*a,i[1][1]-=i[0][1]*a;var l=ot(i[1][0]*i[1][0]+i[1][1]*i[1][1]);if(0===l)return{origin:{x:e[4],y:e[5]},translate:{x:t,y:n},scale:{x:u,y:0},skew:{x:0,y:0},rotate:0};i[1][0]/=l,i[1][1]/=l,a/=l;var s=0;return i[1][1]<0?(s=tt(i[1][1])*ut,i[0][1]<0&&(s=360-s)):s=nt(i[0][1])*ut,o&&(s=-s),a=rt(a,ot(i[0][0]*i[0][0]+i[0][1]*i[0][1]))*ut,o&&(a=-a),{origin:{x:e[4],y:e[5]},translate:{x:t,y:n},scale:{x:u,y:l},skew:{x:a,y:0},rotate:s}}},{key:"toString",value:function(){return null===this.s&&(this.s="matrix("+this.m.map(st).join(" ")+")"),this.s}}]),t}(),lt=/\.0+$/;function st(t){return Number.isInteger(t)?t:t.toFixed(14).replace(lt,"")}function ft(t,n,e){return t+(n-t)*e}function ct(t,n,e){var r=arguments.length>3&&void 0!==arguments[3]&&arguments[3],i={x:ft(t.x,n.x,e),y:ft(t.y,n.y,e)};return r&&(i.a=ht(t,n)),i}function ht(t,n){return Math.atan2(n.y-t.y,n.x-t.x)}Object.freeze({M:2,L:2,Z:0,H:1,V:1,C:6,Q:4,T:2,S:4,A:7});var vt={},dt=null;function yt(n){var e=function(){if(dt)return dt;if("object"!==("undefined"==typeof document?"undefined":t(document)))return{};var n=document.createElementNS("http://www.w3.org/2000/svg","svg");return n.style.position="absolute",n.style.opacity="0.01",n.style.zIndex="-9999",n.style.left="-9999px",n.style.width="1px",n.style.height="1px",dt={svg:n}}().svg;if(!e)return function(t){return null};var r=document.createElementNS(e.namespaceURI,"path");r.setAttributeNS(null,"d",n),r.setAttributeNS(null,"fill","none"),r.setAttributeNS(null,"stroke","none"),e.appendChild(r);var i=r.getTotalLength();return function(t){var n=r.getPointAtLength(i*t);return{x:n.x,y:n.y}}}function gt(t){return vt[t]?vt[t]:vt[t]=yt(t)}function pt(t,n,e,r){if(!t||!r)return!1;var i=["M",t.x,t.y];if(n&&e&&(i.push("C"),i.push(n.x),i.push(n.y),i.push(e.x),i.push(e.y)),n?!e:e){var u=n||e;i.push("Q"),i.push(u.x),i.push(u.y)}return n||e||i.push("L"),i.push(r.x),i.push(r.y),i.join(" ")}function mt(t,n,e,r){var i=arguments.length>4&&void 0!==arguments[4]?arguments[4]:1,u=pt(t,n,e,r),o=gt(u);try{return o(i)}catch(t){return null}}function bt(t,n,e,r){var i=1-r;return i*i*t+2*i*r*n+r*r*e}function wt(t,n,e,r){return 2*(1-r)*(n-t)+2*r*(e-n)}function xt(t,n,e,r){var i=arguments.length>4&&void 0!==arguments[4]&&arguments[4],u=mt(t,n,null,e,r);return u||(u={x:bt(t.x,n.x,e.x,r),y:bt(t.y,n.y,e.y,r)}),i&&(u.a=At(t,n,e,r)),u}function At(t,n,e,r){return Math.atan2(wt(t.y,n.y,e.y,r),wt(t.x,n.x,e.x,r))}function kt(t,n,e,r,i){var u=i*i;return i*u*(r-t+3*(n-e))+3*u*(t+e-2*n)+3*i*(n-t)+t}function _t(t,n,e,r,i){var u=1-i;return 3*(u*u*(n-t)+2*u*i*(e-n)+i*i*(r-e))}function St(t,n,e,r,i){var u=arguments.length>5&&void 0!==arguments[5]&&arguments[5],o=mt(t,n,e,r,i);return o||(o={x:kt(t.x,n.x,e.x,r.x,i),y:kt(t.y,n.y,e.y,r.y,i)}),u&&(o.a=Mt(t,n,e,r,i)),o}function Mt(t,n,e,r,i){return Math.atan2(_t(t.y,n.y,e.y,r.y,i),_t(t.x,n.x,e.x,r.x,i))}function Ot(t,n,e){var r=arguments.length>3&&void 0!==arguments[3]&&arguments[3];if(Bt(n)){if(It(e))return xt(n,e.start,e,t,r)}else if(Bt(e)){if(n.end)return xt(n,n.end,e,t,r)}else{if(n.end)return e.start?St(n,n.end,e.start,e,t,r):xt(n,n.end,e,t,r);if(e.start)return xt(n,e.start,e,t,r)}return ct(n,e,t,r)}function Et(t,n,e){var r=Ot(t,n,e,!0);return r.a=function(t){var n=arguments.length>1&&void 0!==arguments[1]&&arguments[1];return n?t+Math.PI:t}(r.a)/p,r}function Bt(t){return!t.type||"corner"===t.type}function It(t){return null!=t.start&&!Bt(t)}var jt=new at;var Pt={f:function(t){return t?t.join(" "):""},i:function(n,e,r){if(0===n)return e;if(1===n)return r;var i=e.length;if(i!==r.length)return m(n,e,r);for(var u,o=new Array(i),a=0;a<i;a++){if((u=t(e[a]))!==t(r[a]))return m(n,e,r);if("number"===u)o[a]=b(n,e[a],r[a]);else{if(e[a]!==r[a])return m(n,e,r);o[a]=e[a]}}return o}},Tt={f:null,i:M,u:function(t,n){return function(e){var r=n(e);t.setAttribute("x1",G(r[0])),t.setAttribute("y1",G(r[1])),t.setAttribute("x2",G(r[2])),t.setAttribute("y2",G(r[3]))}}},Ft={f:G,i:b},Rt={f:G,i:function(t,n,e){var r=b(t,n,e);return r<=0?0:r>=1?1:r}},Ct={f:function(t){var n=arguments.length>1&&void 0!==arguments[1]?arguments[1]:" ";return t&&t.length>0&&(t=t.map((function(t){return Math.floor(1e4*t)/1e4}))),H(t,n)},i:function(t,n,e){var r,i,u,o=n.length,a=e.length;if(o!==a)if(0===o)n=O(o=a,0);else if(0===a)a=o,e=O(o,0);else{var l=(u=(r=o)*(i=a)/function(t,n){for(var e;n;)e=n,n=t%n,t=e;return t||1}(r,i))<0?-u:u;n=E(n,Math.floor(l/o)),e=E(e,Math.floor(l/a)),o=a=l}for(var s=[],f=0;f<o;f++)s.push(g(w(t,n[f],e[f]),6));return s}};function Nt(t,n,e,r,i,u,o,a){return n=function(t,n,e){for(var r,i,u,o=t.length-1,a={},l=0;l<=o;l++)(r=t[l]).e&&(r.e=n(r.e)),r.v&&"g"===(i=r.v).t&&i.r&&(u=e.getElementById(i.r))&&(a[i.r]=u.querySelectorAll("stop"));return a}(t,r,a),function(r){var i,u=e(r,t,qt);return u?"c"===u.t?X(u.v):"g"===u.t?(n[u.r]&&function(t,n){for(var e=0,r=t.length;e<r;e++)t[e].setAttribute("stop-color",X(n[e]))}(n[u.r],u.v),(i=u.r)?"url(#"+i+")":"none"):"none":"none"}}function qt(t,n,e){if(0===t)return n;if(1===t)return e;if(n&&e){var r=n.t;if(r===e.t)switch(n.t){case"c":return{t:r,v:_(t,n.v,e.v)};case"g":if(n.r===e.r)return{t:r,v:S(t,n.v,e.v),r:n.r}}}return m(t,n,e)}var Vt={blur:A,brightness:w,contrast:w,"drop-shadow":function(t,n,e){return 0===t?n:1===t?e:{blur:A(t,n.blur,e.blur),offset:x(t,n.offset,e.offset),color:_(t,n.color,e.color)}},grayscale:w,"hue-rotate":b,invert:w,opacity:w,saturate:w,sepia:w};function Lt(t,n,e){if(0===t)return n;if(1===t)return e;var r=n.length;if(r!==e.length)return m(t,n,e);for(var i,u=[],o=0;o<r;o++){if(n[o].type!==e[o].type)return n;if(!(i=Vt[n[o].type]))return m(t,n,e);u.push({type:n.type,value:i(t,n[o].value,e[o].value)})}return u}var zt={blur:function(t){return t?function(n){t.setAttribute("stdDeviation",Q(n))}:null},brightness:function(t,n,e){return(t=Ut(e,n))?function(n){n=G(n),t.map((function(t){return t.setAttribute("slope",n)}))}:null},contrast:function(t,n,e){return(t=Ut(e,n))?function(n){var e=G((1-n)/2);n=G(n),t.map((function(t){t.setAttribute("slope",n),t.setAttribute("intercept",e)}))}:null},"drop-shadow":function(t,n,e){var r=e.getElementById(n+"-blur");if(!r)return null;var i=e.getElementById(n+"-offset");if(!i)return null;var u=e.getElementById(n+"-flood");return u?function(t){r.setAttribute("stdDeviation",Q(t.blur)),i.setAttribute("dx",G(t.offset.x)),i.setAttribute("dy",G(t.offset.y)),u.setAttribute("flood-color",X(t.color))}:null},grayscale:function(t){return t?function(n){t.setAttribute("values",H(function(t){return[.2126+.7874*(t=1-t),.7152-.7152*t,.0722-.0722*t,0,0,.2126-.2126*t,.7152+.2848*t,.0722-.0722*t,0,0,.2126-.2126*t,.7152-.7152*t,.0722+.9278*t,0,0,0,0,0,1,0]}(n)))}:null},"hue-rotate":function(t){return t?function(n){return t.setAttribute("values",G(n))}:null},invert:function(t,n,e){return(t=Ut(e,n))?function(n){n=G(n)+" "+G(1-n),t.map((function(t){return t.setAttribute("tableValues",n)}))}:null},opacity:function(t,n,e){return(t=e.getElementById(n+"-A"))?function(n){return t.setAttribute("tableValues","0 "+G(n))}:null},saturate:function(t){return t?function(n){return t.setAttribute("values",G(n))}:null},sepia:function(t){return t?function(n){return t.setAttribute("values",H(function(t){return[.393+.607*(t=1-t),.769-.769*t,.189-.189*t,0,0,.349-.349*t,.686+.314*t,.168-.168*t,0,0,.272-.272*t,.534-.534*t,.131+.869*t,0,0,0,0,0,1,0]}(n)))}:null}};var Dt=["R","G","B"];function Ut(t,n){var e=Dt.map((function(e){return t.getElementById(n+"-"+e)||null}));return-1!==e.indexOf(null)?null:e}var Wt={fill:Nt,"fill-opacity":Rt,stroke:Nt,"stroke-opacity":Rt,"stroke-width":Ft,"stroke-dashoffset":{f:G,i:b},"stroke-dasharray":Ct,opacity:Rt,transform:function(n,e,r,i){if(!(n=function(n,e){if(!n||"object"!==t(n))return null;var r=!1;for(var i in n)n.hasOwnProperty(i)&&(n[i]&&n[i].length?(n[i].forEach((function(t){t.e&&(t.e=e(t.e))})),r=!0):delete n[i]);return r?n:null}(n,i)))return null;var u=function(t,i,u){var o=arguments.length>3&&void 0!==arguments[3]?arguments[3]:null;return n[t]?r(i,n[t],u):e&&e[t]?e[t]:o};return e&&e.a&&n.o?function(t){var e=r(t,n.o,Et);return jt.recomposeSelf(e,u("r",t,b,0)+e.a,u("k",t,x),u("s",t,x),u("t",t,x)).toString()}:function(t){return jt.recomposeSelf(u("o",t,Ot,null),u("r",t,b,0),u("k",t,x),u("s",t,x),u("t",t,x)).toString()}},"#filter":function(t,n,e,r,i,u,o,a){if(!n.items||!t||!t.length)return null;var l=function(t,n){var e=(t=t.map((function(t){return t&&zt[t[0]]?(n.getElementById(t[1]),zt[t[0]](n.getElementById(t[1]),t[1],n)):null}))).length;return function(n){for(var r=0;r<e;r++)t[r]&&t[r](n[r].value)}}(n.items,a);return l?(t=function(t,n){return t.map((function(t){return t.e=n(t.e),t}))}(t,r),function(n){l(e(n,t,Lt))}):null},"#line":Tt,points:{f:H,i:M},d:Pt,r:Ft,"#size":Z,"#radius":$,_:function(t,n){if(Array.isArray(t))for(var e=0;e<t.length;e++)this[t[e]]=n;else this[t]=n}};return function(t){!function(t,n){if("function"!=typeof n&&null!==n)throw new TypeError("Super expression must either be null or a function");t.prototype=Object.create(n&&n.prototype,{constructor:{value:t,writable:!0,configurable:!0}}),n&&u(t,n)}(o,t);var e=a(o);function o(){return n(this,o),e.apply(this,arguments)}return r(o,null,[{key:"build",value:function(t){var n=l(i(o),"build",this).call(this,t,Wt),e=n.el,r=n.options,u=n.player;return function(t,n,e){if("click"===e.start){return void n.addEventListener("click",(function(){switch(e.click){case"freeze":return!t._running&&t.reachedToEnd()&&(t.offset=0),t._running?t.pause():t.play();case"restart":return t.offset>0?t.restart():t.play();case"reverse":var n=!t._rollingBack&&t._running,r=t.reachedToEnd();return n||r&&1===t.fill?(t.pause(),r&&(t.offset=t.duration-1),t._rollback()):r?t.restart():t.play();case"none":default:return!t._running&&t.offset?t.restart():t.play()}}))}if("hover"===e.start)return n.addEventListener("mouseenter",(function(){return t.reachedToEnd()?t.restart():t.play()})),void n.addEventListener("mouseleave",(function(){switch(e.hover){case"freeze":return t.pause();case"reset":return t.stop();case"reverse":return t.pause(),t._rollback();case"none":default:return}}));if("scroll"===e.start)return void new W(n,e.scroll||25,(function(n){n?t.reachedToEnd()?t.restart():t.play():t.pause()}));t.play()}(u,e,r),u}}]),o}(D)}));
__SVGATOR_PLAYER__.build({"root":"evGCq9UJtR51","animations":[{"duration":6000,"direction":1,"iterations":0,"fill":1,"alternate":false,"speed":1,"elements":{"evGCq9UJtR54":{"d":[{"t":0,"v":["M",320,165,"C",346.05613,165,363.1437540858174,185.19366399999998,373.8010660858174,205.400458,"C",384.4583780858174,225.607252,397.9074170858174,265.931817395,373.8010660858174,289.174062395,"C",349.6947150858174,312.41630739500005,307.40452100000005,313.02806499999997,288.970252,291.757755,"C",270.535983,270.487445,237.88774,266.233382,245,231.846381,"C",252.11226,197.45938,293.94387,165,320,165,"Z"],"e":[0.515,0.285,0.51,0.74]},{"t":2600,"v":["M",316,178.168914,"C",342.05613,178.168914,375.86220608499997,178.074226145,386.51951808499996,198.281020145,"C",397.17683008499995,218.48781414500002,385.49740799999995,264.621488,361.39105699999993,287.863733,"C",337.2847059999999,311.10597800000005,289.207867,322.68259103288574,270.773598,301.41228103288574,"C",252.33932899999996,280.14197103288575,237.88774,242.07083000000003,245,207.683829,"C",252.11226000000002,173.296828,289.94387,178.168914,316,178.168914,"Z"],"e":[0.515,0.285,0.51,0.74]},{"t":4800,"v":["M",317.81140492,175.54135713,"C",343.86753491999997,175.54135713,363.51505871,190.88152748810515,374.17237071,211.08832148810515,"C",384.82968271,231.29511548810515,401.77289995175494,252.906590029386,362.526192,279.78699311,"C",323.279484048245,306.66739619061406,319.82822198457103,317.6274048497286,289.169624,307.41821305,"C",258.51102601542897,297.20902125027146,237.88774,271.75524716999996,245,237.36824617,"C",252.11226,202.98124517,291.75527492,175.54135713,317.81140492,175.54135713,"Z"],"e":[0.515,0.285,0.51,0.74]},{"t":6000,"v":["M",320,165,"C",346.05613,165,363.1437540858174,185.19366399999998,373.8010660858174,205.400458,"C",384.4583780858174,225.607252,397.9074170858174,265.931817395,373.8010660858174,289.174062395,"C",349.6947150858174,312.41630739500005,307.40452100000005,313.02806499999997,288.970252,291.757755,"C",270.535983,270.487445,237.88774,266.233382,245,231.846381,"C",252.11226,197.45938,293.94387,165,320,165,"Z"]}]},"evGCq9UJtR55":{"d":[{"t":0,"v":["M",313.8217387906596,177.98213480773074,"C",339.8778687906596,177.98213480773074,363.41302035754126,171.94786825930322,374.07033235754125,192.15466225930322,"C",384.72764435754124,212.36145625930322,386.54435018581404,258.9605358659801,359.59475907766887,280.13824204686574,"C",332.6451679695237,301.3159482277514,300.93272354294686,317.02339796037677,276.573117,300.974889,"C",252.2135104570532,284.92638003962327,243.227474,244.963072,250.339734,210.576071,"C",257.451994,176.18907000000002,287.7656087906596,177.98213480773074,313.8217387906596,177.98213480773074,"Z"],"e":[0.515,0.285,0.51,0.74]},{"t":2000,"v":["M",313.3000657130794,165.27817131615265,"C",339.3561957130794,165.27817131615265,364.88707928370815,184.9828936182999,375.54439128370814,205.1896876182999,"C",386.2017032837081,225.3964816182999,384.51545694184966,270.7121831469037,357.5658658337045,291.8898893277894,"C",330.6162747255593,313.067595508675,298.56219322594495,313.6643431783154,274.2025866829981,297.61583421793864,"C",249.84298014005128,281.5673252575619,216.69098766921766,235.76208943227746,247.56297066930148,211.8244860577664,"C",278.43495366938527,187.88688268325532,284.07481854239376,165.0215735584311,313.3000657130794,165.27817131615265,"Z"],"e":[0.515,0.285,0.51,0.74]},{"t":4000,"v":["M",313.5609022518695,171.6301530619417,"C",339.6170322518695,171.6301530619417,357.8110129419993,180.25966450195133,368.4683249419993,200.46645850195134,"C",379.1256369419993,220.67325250195134,385.6373813745519,270.05861338749014,358.68779026640675,291.2363195683758,"C",331.7381991582616,312.41402574926144,294.34290961424097,303.8083725096395,269.98330307129413,287.7598635492627,"C",245.6236965283473,271.711354588886,241.40898540367542,240.1269363789626,260.4011069037173,210.96463419170706,"C",279.3932284037593,181.80233200445153,285.9202136665267,171.50185418308092,313.5609022518695,171.6301530619417,"Z"],"e":[0.515,0.285,0.51,0.74]},{"t":6000,"v":["M",313.8217387906596,177.98213480773074,"C",339.8778687906596,177.98213480773074,363.41302035754126,171.94786825930322,374.07033235754125,192.15466225930322,"C",384.72764435754124,212.36145625930322,386.54435018581404,258.9605358659801,359.59475907766887,280.13824204686574,"C",332.6451679695237,301.3159482277514,300.93272354294686,317.02339796037677,276.573117,300.974889,"C",252.2135104570532,284.92638003962327,243.227474,244.963072,250.339734,210.576071,"C",257.451994,176.18907000000002,287.7656087906596,177.98213480773074,313.8217387906596,177.98213480773074,"Z"]}]},"evGCq9UJtR56":{"d":[{"t":0,"v":["M",319.3614980803176,156.5352431736322,"C",345.41762808031757,156.5352431736322,356.1578098848189,172.64853923526417,366.8151218848189,192.85533323526417,"C",377.4724338848189,213.06212723526417,413.7828545197454,243.64260573213113,389.6765035197454,266.88485073213116,"C",365.57015251974536,290.1270957321312,307.9263285490836,326.4508381333179,289.4920595490836,305.1805281333179,"C",271.05779054908356,283.9102181333179,251.96765282069865,263.6715917011234,259.0799128206986,229.2845907011234,"C",266.1921728206986,194.8975897011234,293.3053680803176,156.5352431736322,319.3614980803176,156.5352431736322,"Z"],"e":[0.515,0.285,0.51,0.74]},{"t":1300,"v":["M",304.75340767814464,173.91405751973937,"C",330.80953767814464,173.91405751973937,368.65267138469017,178.43376052632178,379.30998338469016,198.64055452632178,"C",389.96729538469015,218.84734852632178,408.37913184039763,257.9103109170771,384.2727808403976,281.1525559170771,"C",360.1664298403976,304.39480091707713,305.84448617972765,335.236083674627,287.4102171797276,313.96577367462703,"C",268.9759481797276,292.69546367462704,242.29634739795964,275.6899886171433,249.40860739795963,241.30298761714343,"C",256.5208673979596,206.91598661714343,278.69727767814464,173.91405751973937,304.75340767814464,173.91405751973937,"Z"],"e":[0.515,0.285,0.51,0.74]},{"t":3300,"v":["M",312.0574528792311,165.2246503466858,"C",338.1135828792311,165.2246503466858,371.2573764321816,173.37701698422265,381.9146884321816,193.58381098422265,"C",392.5720004321816,213.79060498422265,404.93162075852143,250.7907106079433,380.8252697585214,274.03295560794334,"C",356.7189187585214,297.27520060794336,312.09155329950784,325.938946441962,293.6572842995078,304.668636441962,"C",275.2230152995078,283.398326441962,236.54845502532297,262.08786052294647,243.66071502532293,227.7008595229467,"C",250.77297502532292,193.3138585229467,286.0013228792311,165.2246503466858,312.0574528792311,165.2246503466858,"Z"],"e":[0.515,0.285,0.51,0.74]},{"t":6000,"v":["M",319.3614980803176,156.5352431736322,"C",345.41762808031757,156.5352431736322,356.1578098848189,172.64853923526417,366.8151218848189,192.85533323526417,"C",377.4724338848189,213.06212723526417,413.7828545197454,243.64260573213113,389.6765035197454,266.88485073213116,"C",365.57015251974536,290.1270957321312,307.9263285490836,326.4508381333179,289.4920595490836,305.1805281333179,"C",271.05779054908356,283.9102181333179,251.96765282069865,263.6715917011234,259.0799128206986,229.2845907011234,"C",266.1921728206986,194.8975897011234,293.3053680803176,156.5352431736322,319.3614980803176,156.5352431736322,"Z"]}]},"evGCq9UJtR58":{"transform":{"data":{"t":{"x":4.996515201582952e-9,"y":-1.4210854715202004e-13}},"keys":{"o":[{"t":0,"v":{"x":319.9999999965498,"y":148.30120581655305,"type":"cusp","end":{"x":367.6709059830789,"y":147.58234484457665}},"e":[0.495,0.235,0.505,0.78]},{"t":1500,"v":{"x":320,"y":326.505593,"type":"cusp","start":{"x":278.0349980072881,"y":325.26621049771654},"end":{"x":363.6847144555505,"y":327.3868390179986}},"e":[0.495,0.235,0.505,0.78]},{"t":3000,"v":{"x":232.890186,"y":211.683829,"type":"cusp","start":{"x":247.57625782433868,"y":172.42881565117324},"end":{"x":221.24333221031435,"y":247.28553262900925}},"e":[0.495,0.235,0.505,0.78]},{"t":4500,"v":{"x":407.43313785,"y":267.068444,"type":"cusp","start":{"x":422.0489403653007,"y":230.83626586108488},"end":{"x":392.69905702993793,"y":300.0431425647797}},"e":[0.495,0.235,0.505,0.78]},{"t":6000,"v":{"x":319.99999999999983,"y":148.57400700000002,"type":"cusp","start":{"x":272.66096902063487,"y":147.8389085324683}},"e":[0.495,0.235,0.505,0.78]}],"s":[{"t":0,"v":{"x":0.75,"y":0.75}},{"t":700,"v":{"x":1,"y":1}},{"t":2200,"v":{"x":0.5,"y":0.5}},{"t":3800,"v":{"x":1,"y":1}},{"t":5200,"v":{"x":0.5,"y":0.5}},{"t":6000,"v":{"x":0.75,"y":0.75}}]}},"opacity":[{"t":0,"v":0.5},{"t":700,"v":1},{"t":2200,"v":0.25},{"t":3800,"v":1},{"t":5300,"v":0.25},{"t":6000,"v":0.5}]},"evGCq9UJtR59":{"transform":{"data":{"t":{"x":4.996515201582952e-9,"y":-1.4210854715202004e-13}},"keys":{"o":[{"t":0,"v":{"x":407.43313785,"y":267.068444,"type":"cusp","end":{"x":395.213413303292,"y":296.2425883765198}},"e":[0.495,0.235,0.505,0.78]},{"t":1500,"v":{"x":319.9999999965498,"y":148.30120581655305,"type":"cusp","start":{"x":279.17764901880855,"y":157.7771029820375},"end":{"x":373.6634159830789,"y":134.99807484457665}},"e":[0.495,0.235,0.505,0.78]},{"t":3000,"v":{"x":320,"y":326.505593,"type":"cusp","start":{"x":278.0349980072881,"y":325.26621049771654},"end":{"x":363.6847144555505,"y":327.3868390179986}},"e":[0.495,0.235,0.505,0.78]},{"t":4500,"v":{"x":232.890186,"y":211.683829,"type":"cusp","start":{"x":247.57625782433868,"y":172.42881565117324},"end":{"x":221.24333221031435,"y":247.28553262900925}},"e":[0.495,0.235,0.505,0.78]},{"t":6000,"v":{"x":407.43313785,"y":267.068444,"type":"cusp","start":{"x":426.84294736530074,"y":226.0422578610849}},"e":[0.495,0.235,0.505,0.78]}],"s":[{"t":0,"v":{"x":0.75,"y":0.75}},{"t":700,"v":{"x":0.5,"y":0.5}},{"t":2200,"v":{"x":1,"y":1}},{"t":3700,"v":{"x":0.5,"y":0.5}},{"t":5300,"v":{"x":1,"y":1}},{"t":6000,"v":{"x":0.75,"y":0.75}}]}},"opacity":[{"t":0,"v":0.5},{"t":700,"v":0.25},{"t":2200,"v":1},{"t":3700,"v":0.25},{"t":5300,"v":1},{"t":6000,"v":0.5}]},"evGCq9UJtR510":{"transform":{"data":{"t":{"x":-0.5100442400048664,"y":5.684341886080801e-13}},"keys":{"o":[{"t":0,"v":{"x":320,"y":232.09981464,"type":"cusp","end":{"x":309.70784397308114,"y":262.26526861596426}},"e":[0.29,0.46,0.52,0.715]},{"t":800,"v":{"x":320,"y":326.505593,"type":"cusp","start":{"x":294.1379662383006,"y":325.10886689029365},"end":{"x":363.6847144555505,"y":327.3868390179986}},"e":[0.495,0.235,0.505,0.78]},{"t":2300,"v":{"x":232.890186,"y":211.683829,"type":"cusp","start":{"x":247.57625782433868,"y":172.42881565117324},"end":{"x":221.24333221031435,"y":247.28553262900925}},"e":[0.495,0.235,0.505,0.78]},{"t":3800,"v":{"x":407.43313785,"y":267.068444,"type":"cusp","start":{"x":422.0489403653007,"y":230.83626586108488},"end":{"x":397.32284648572653,"y":300.29101893967487}},"e":[0.495,0.235,0.505,0.78]},{"t":5300,"v":{"x":319.9999999965498,"y":148.30120581655305,"type":"cusp","start":{"x":291.6291459181973,"y":160.14157945862797},"end":{"x":349.16190798307895,"y":136.56508384457666}},"e":[0.47,0.305,0.71,0.52]},{"t":6000,"v":{"x":320.0000000049993,"y":232.06980896,"type":"cusp","start":{"x":334.686071829338,"y":192.81479561117322}},"e":[0.495,0.235,0.505,0.78]}],"s":[{"t":0,"v":{"x":1,"y":1}},{"t":1500,"v":{"x":0.5,"y":0.5}},{"t":3100,"v":{"x":1,"y":1}},{"t":4500,"v":{"x":0.5,"y":0.5}},{"t":6000,"v":{"x":1,"y":1}}]}},"opacity":[{"t":0,"v":1},{"t":1500,"v":0.25},{"t":3100,"v":1},{"t":4500,"v":0.25},{"t":6000,"v":1}]},"evGCq9UJtR512":{"transform":{"data":{"t":{"x":-1.41594878,"y":-1.41594878}},"keys":{"o":[{"t":0,"v":{"x":270.34908663155255,"y":298.3164067815526,"type":"cusp","end":{"x":293.14883926683297,"y":285.14233257654365}}},{"t":3000,"v":{"x":260.34908663155255,"y":278.3164067815526,"type":"cusp","start":{"x":297.28884186816026,"y":258.64965478851747},"end":{"x":247.41076983350175,"y":286.7997823816978}}},{"t":6000,"v":{"x":270.34908663155255,"y":298.3164067815526,"type":"cusp","start":{"x":249.10517065224712,"y":310.51726952817194}}}]}},"opacity":[{"t":0,"v":0.2},{"t":1500,"v":1},{"t":4400,"v":0},{"t":6000,"v":1}]},"evGCq9UJtR513":{"transform":{"data":{"t":{"x":-1.41594878,"y":-1.41594878}},"keys":{"o":[{"t":0,"v":{"x":252.92818438155254,"y":184.73934851155278,"type":"cusp","end":{"x":246.348614212828,"y":194.11041632553724}}},{"t":3000,"v":{"x":243.95047942155256,"y":167.91594878155277,"type":"cusp","start":{"x":249.4262982528281,"y":164.25416359553725},"end":{"x":222.83748706673506,"y":183.0162815850132}}},{"t":6000,"v":{"x":252.92818438155254,"y":184.73934851155278,"type":"cusp","start":{"x":258.1590793668574,"y":175.8543788460934}}}]}},"opacity":[{"t":0,"v":0.8},{"t":1500,"v":1},{"t":3400,"v":0.2},{"t":4400,"v":0.2},{"t":6000,"v":0.8}]},"evGCq9UJtR514":{"transform":{"data":{"t":{"x":-1.41594878,"y":-1.41594878}},"keys":{"o":[{"t":0,"v":{"x":235.19360769655245,"y":266.98439278155314,"type":"cusp","end":{"x":230.21885520701463,"y":262.75148449179716}}},{"t":3000,"v":{"x":191.53354769655243,"y":281.31640678155316,"type":"cusp","start":{"x":185.90849664047136,"y":275.6772788202741},"end":{"x":199.32073478347496,"y":287.0941992460949}}},{"t":6000,"v":{"x":235.19360769655245,"y":266.98439278155314,"type":"cusp","start":{"x":240.74676352814745,"y":271.73269695934994}}}]}},"opacity":[{"t":0,"v":0.6},{"t":1500,"v":1},{"t":3000,"v":0.4},{"t":4400,"v":0.2},{"t":6000,"v":0.6}]},"evGCq9UJtR515":{"transform":{"data":{"t":{"x":-1.41594878,"y":-1.41594878}},"keys":{"o":[{"t":0,"v":{"x":390.38362469655243,"y":307.0555667015532,"type":"cusp","end":{"x":378.19254622625493,"y":304.02947963355496}}},{"t":3000,"v":{"x":402.4390146965524,"y":276.8164067815532,"type":"cusp","start":{"x":374.4349671977071,"y":271.87685111742087},"end":{"x":431.7021591046035,"y":288.83536464568164}}},{"t":6000,"v":{"x":390.38362469655243,"y":307.0555667015532,"type":"cusp","start":{"x":405.0366273604892,"y":309.58335104238154}}}]}},"opacity":[{"t":0,"v":0.4},{"t":1500,"v":1},{"t":4400,"v":0.6},{"t":6000,"v":0.4}]},"evGCq9UJtR516":{"transform":{"data":{"t":{"x":-1.41594878,"y":-1.41594878}},"keys":{"o":[{"t":0,"v":{"x":404.84908662655243,"y":179.70566277155322,"type":"cusp","end":{"x":414.8955497405971,"y":187.72180836376552}}},{"t":3000,"v":{"x":422.44343862655245,"y":222.3771087915532,"type":"cusp","start":{"x":398.72015873129607,"y":227.82819671154226},"end":{"x":431.83050774043045,"y":219.35624801342354}}},{"t":6000,"v":{"x":404.84908662655243,"y":179.70566277155322,"type":"cusp","start":{"x":364.6971080233629,"y":157.52207446891236}}}]}},"opacity":[{"t":0,"v":0.2},{"t":1500,"v":1},{"t":2800,"v":0.9103448275862069},{"t":4400,"v":0.8},{"t":6000,"v":0.2}]},"evGCq9UJtR517":{"transform":{"data":{"t":{"x":-1.41594878,"y":-1.41594878}},"keys":{"o":[{"t":0,"v":{"x":369.2704543815525,"y":247.85878178655304,"type":"cusp","end":{"x":395.32063923850694,"y":236.42749391468172}}},{"t":3000,"v":{"x":340.5981763815525,"y":225.37710878655304,"type":"cusp","start":{"x":348.29629388292545,"y":210.15121554882955},"end":{"x":328.4841364901415,"y":247.45229107582105}}},{"t":6000,"v":{"x":369.2704543815525,"y":247.85878178655304,"type":"cusp","start":{"x":360.99924143679607,"y":249.7596099843146}}}]}},"opacity":[{"t":0,"v":0},{"t":1500,"v":1},{"t":4400,"v":1},{"t":6000,"v":0}]}}}],"options":{"start":"load","hover":"freeze","click":"freeze","scroll":25,"font":"embed","exportedIds":"unique","exportCanvasColor":true,"svgFormat":"animated","title":"cosmoloader"},"animationSettings":{"duration":6000,"direction":1,"iterations":0,"fill":1,"alternate":false,"speed":1}})]]></script></svg>
              
            
!

CSS

              
                body {
  margin: 0;
  display: flex;
  background: black;
}
svg {
  max-width: 100wh;
  max-height: 100vh;
  margin: auto;
}
              
            
!

JS

              
                
              
            
!
999px

Console