Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

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

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

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

+ add another resource

Packages

Add Packages

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

Behavior

Save Automatically?

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

Auto-Updating Preview

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

Format on Save

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

Editor Settings

Code Indentation

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

Visit your global Editor Settings.

HTML

              
                <!-- Repo: https://github.com/harryli0088/svelte-polar-animation-tutorial -->
              
            
!

CSS

              
                html, body {
	position: relative;
	width: 100%;
	height: 100%;
}

body {
	color: #333;
	margin: 0;
	padding: 8px;
	box-sizing: border-box;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif;
}

.grid.svelte-1xsa3j5 line.svelte-1xsa3j5,.grid.svelte-1xsa3j5 path.svelte-1xsa3j5{fill:none;stroke:gray;stroke-width:1px}.grid.svelte-1xsa3j5 text.svelte-1xsa3j5{text-anchor:middle}.timeAxis.svelte-1xsa3j5 line.svelte-1xsa3j5{stroke:gray;stroke-width:2px}
              
            
!

JS

              
                //This code was built by Svelte and isn't very helpful to read
//The full repo is here: https://github.com/harryli0088/svelte-polar-animation-tutorial
var app=function(){"use strict";function t(){}const n=t=>t;function e(t,n){for(const e in n)t[e]=n[e];return t}function r(t){return t()}function i(){return Object.create(null)}function o(t){t.forEach(r)}function a(t){return"function"==typeof t}function u(t,n){return t!=t?n==n:t!==n||t&&"object"==typeof t||"function"==typeof t}function l(n,e,r){n.$$.on_destroy.push(function(n,...e){if(null==n)return t;const r=n.subscribe(...e);return r.unsubscribe?()=>r.unsubscribe():r}(e,r))}const s="undefined"!=typeof window;let c=s?()=>window.performance.now():()=>Date.now(),h=s?t=>requestAnimationFrame(t):t;const f=new Set;function d(t){f.forEach((n=>{n.c(t)||(f.delete(n),n.f())})),0!==f.size&&h(d)}function g(t,n){t.appendChild(n)}function p(t,n,e){t.insertBefore(n,e||null)}function m(t){t.parentNode.removeChild(t)}function y(t,n){for(let e=0;e<t.length;e+=1)t[e]&&t[e].d(n)}function b(t){return document.createElement(t)}function w(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function v(t){return document.createTextNode(t)}function x(t,n,e,r){return t.addEventListener(n,e,r),()=>t.removeEventListener(n,e,r)}function $(t,n,e){null==e?t.removeAttribute(n):t.getAttribute(n)!==e&&t.setAttribute(n,e)}function M(t,n){for(const e in n)$(t,e,n[e])}let k,N;function A(){if(void 0===k){k=!1;try{"undefined"!=typeof window&&window.parent&&window.parent.document}catch(t){k=!0}}return k}function j(t,n,e){t.classList[e?"add":"remove"](n)}function E(t){N=t}function _(t){(function(){if(!N)throw new Error("Function called outside component initialization");return N})().$$.on_destroy.push(t)}const S=[],q=[],z=[],O=[],R=Promise.resolve();let P=!1;function C(t){z.push(t)}let I=!1;const L=new Set;function W(){if(!I){I=!0;do{for(let t=0;t<S.length;t+=1){const n=S[t];E(n),D(n.$$)}for(E(null),S.length=0;q.length;)q.pop()();for(let t=0;t<z.length;t+=1){const n=z[t];L.has(n)||(L.add(n),n())}z.length=0}while(S.length);for(;O.length;)O.pop()();P=!1,I=!1,L.clear()}}function D(t){if(null!==t.fragment){t.update(),o(t.before_update);const n=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,n),t.after_update.forEach(C)}}const F=new Set;function H(t,n){t&&t.i&&(F.delete(t),t.i(n))}function T(t,n){const e={},r={},i={$$scope:1};let o=t.length;for(;o--;){const a=t[o],u=n[o];if(u){for(const t in a)t in u||(r[t]=1);for(const t in u)i[t]||(e[t]=u[t],i[t]=1);t[o]=u}else for(const t in a)i[t]=1}for(const t in r)t in e||(e[t]=void 0);return e}function B(t,n,e){const{fragment:i,on_mount:u,on_destroy:l,after_update:s}=t.$$;i&&i.m(n,e),C((()=>{const n=u.map(r).filter(a);l?l.push(...n):o(n),t.$$.on_mount=[]})),s.forEach(C)}function V(t,n){const e=t.$$;null!==e.fragment&&(o(e.on_destroy),e.fragment&&e.fragment.d(n),e.on_destroy=e.fragment=null,e.ctx=[])}function X(t,n){-1===t.$$.dirty[0]&&(S.push(t),P||(P=!0,R.then(W)),t.$$.dirty.fill(0)),t.$$.dirty[n/31|0]|=1<<n%31}function G(n,e,r,a,u,l,s=[-1]){const c=N;E(n);const h=e.props||{},f=n.$$={fragment:null,ctx:null,props:l,update:t,not_equal:u,bound:i(),on_mount:[],on_destroy:[],before_update:[],after_update:[],context:new Map(c?c.$$.context:[]),callbacks:i(),dirty:s,skip_bound:!1};let d=!1;if(f.ctx=r?r(n,h,((t,e,...r)=>{const i=r.length?r[0]:e;return f.ctx&&u(f.ctx[t],f.ctx[t]=i)&&(!f.skip_bound&&f.bound[t]&&f.bound[t](i),d&&X(n,t)),e})):[],f.update(),d=!0,o(f.before_update),f.fragment=!!a&&a(f.ctx),e.target){if(e.hydrate){const t=function(t){return Array.from(t.childNodes)}(e.target);f.fragment&&f.fragment.l(t),t.forEach(m)}else f.fragment&&f.fragment.c();e.intro&&H(n.$$.fragment),B(n,e.target,e.anchor),W()}E(c)}class U{$destroy(){V(this,1),this.$destroy=t}$on(t,n){const e=this.$$.callbacks[t]||(this.$$.callbacks[t]=[]);return e.push(n),()=>{const t=e.indexOf(n);-1!==t&&e.splice(t,1)}}$set(t){var n;this.$$set&&(n=t,0!==Object.keys(n).length)&&(this.$$.skip_bound=!0,this.$$set(t),this.$$.skip_bound=!1)}}const Y=[];function Z(t){const n=t-1;return n*n*n+1}function J(t){return"[object Date]"===Object.prototype.toString.call(t)}function K(t,n){if(t===n||t!=t)return()=>t;const e=typeof t;if(e!==typeof n||Array.isArray(t)!==Array.isArray(n))throw new Error("Cannot interpolate values of different type");if(Array.isArray(t)){const e=n.map(((n,e)=>K(t[e],n)));return t=>e.map((n=>n(t)))}if("object"===e){if(!t||!n)throw new Error("Object cannot be null");if(J(t)&&J(n)){t=t.getTime();const e=(n=n.getTime())-t;return n=>new Date(t+n*e)}const e=Object.keys(n),r={};return e.forEach((e=>{r[e]=K(t[e],n[e])})),t=>{const n={};return e.forEach((e=>{n[e]=r[e](t)})),n}}if("number"===e){const e=n-t;return n=>t+n*e}throw new Error(`Cannot interpolate ${e} values`)}function Q(r,i={}){const o=function(n,e=t){let r;const i=[];function o(t){if(u(n,t)&&(n=t,r)){const t=!Y.length;for(let t=0;t<i.length;t+=1){const e=i[t];e[1](),Y.push(e,n)}if(t){for(let t=0;t<Y.length;t+=2)Y[t][0](Y[t+1]);Y.length=0}}}return{set:o,update:function(t){o(t(n))},subscribe:function(a,u=t){const l=[a,u];return i.push(l),1===i.length&&(r=e(o)||t),a(n),()=>{const t=i.indexOf(l);-1!==t&&i.splice(t,1),0===i.length&&(r(),r=null)}}}}(r);let a,l=r;function s(t,u){if(null==r)return o.set(r=t),Promise.resolve();l=t;let s=a,g=!1,{delay:p=0,duration:m=400,easing:y=n,interpolate:b=K}=e(e({},i),u);if(0===m)return s&&(s.abort(),s=null),o.set(r=l),Promise.resolve();const w=c()+p;let v;return a=function(t){let n;return 0===f.size&&h(d),{promise:new Promise((e=>{f.add(n={c:t,f:e})})),abort(){f.delete(n)}}}((n=>{if(n<w)return!0;g||(v=b(r,t),"function"==typeof m&&(m=m(r,t)),g=!0),s&&(s.abort(),s=null);const e=n-w;return e>m?(o.set(r=t),!1):(o.set(r=v(y(e/m))),!0)})),a.promise}return{set:s,update:(t,n)=>s(t(l,r),n),subscribe:o.subscribe}}function tt(t,n){return t<n?-1:t>n?1:t>=n?0:NaN}function nt(t){let n=t,e=t;function r(t,n,r,i){for(null==r&&(r=0),null==i&&(i=t.length);r<i;){const o=r+i>>>1;e(t[o],n)<0?r=o+1:i=o}return r}return 1===t.length&&(n=(n,e)=>t(n)-e,e=function(t){return(n,e)=>tt(t(n),e)}(t)),{left:r,center:function(t,e,i,o){null==i&&(i=0),null==o&&(o=t.length);const a=r(t,e,i,o-1);return a>i&&n(t[a-1],e)>-n(t[a],e)?a-1:a},right:function(t,n,r,i){for(null==r&&(r=0),null==i&&(i=t.length);r<i;){const o=r+i>>>1;e(t[o],n)>0?i=o:r=o+1}return r}}}const et=nt(tt).right;nt((function(t){return null===t?NaN:+t})).center;var rt=Math.sqrt(50),it=Math.sqrt(10),ot=Math.sqrt(2);function at(t,n,e){var r=(n-t)/Math.max(0,e),i=Math.floor(Math.log(r)/Math.LN10),o=r/Math.pow(10,i);return i>=0?(o>=rt?10:o>=it?5:o>=ot?2:1)*Math.pow(10,i):-Math.pow(10,-i)/(o>=rt?10:o>=it?5:o>=ot?2:1)}function ut(t,n){switch(arguments.length){case 0:break;case 1:this.range(t);break;default:this.range(n).domain(t)}return this}function lt(t,n,e){t.prototype=n.prototype=e,e.constructor=t}function st(t,n){var e=Object.create(t.prototype);for(var r in n)e[r]=n[r];return e}function ct(){}var ht=.7,ft=1/ht,dt="\\s*([+-]?\\d+)\\s*",gt="\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)\\s*",pt="\\s*([+-]?\\d*\\.?\\d+(?:[eE][+-]?\\d+)?)%\\s*",mt=/^#([0-9a-f]{3,8})$/,yt=new RegExp("^rgb\\("+[dt,dt,dt]+"\\)$"),bt=new RegExp("^rgb\\("+[pt,pt,pt]+"\\)$"),wt=new RegExp("^rgba\\("+[dt,dt,dt,gt]+"\\)$"),vt=new RegExp("^rgba\\("+[pt,pt,pt,gt]+"\\)$"),xt=new RegExp("^hsl\\("+[gt,pt,pt]+"\\)$"),$t=new RegExp("^hsla\\("+[gt,pt,pt,gt]+"\\)$"),Mt={aliceblue:15792383,antiquewhite:16444375,aqua:65535,aquamarine:8388564,azure:15794175,beige:16119260,bisque:16770244,black:0,blanchedalmond:16772045,blue:255,blueviolet:9055202,brown:10824234,burlywood:14596231,cadetblue:6266528,chartreuse:8388352,chocolate:13789470,coral:16744272,cornflowerblue:6591981,cornsilk:16775388,crimson:14423100,cyan:65535,darkblue:139,darkcyan:35723,darkgoldenrod:12092939,darkgray:11119017,darkgreen:25600,darkgrey:11119017,darkkhaki:12433259,darkmagenta:9109643,darkolivegreen:5597999,darkorange:16747520,darkorchid:10040012,darkred:9109504,darksalmon:15308410,darkseagreen:9419919,darkslateblue:4734347,darkslategray:3100495,darkslategrey:3100495,darkturquoise:52945,darkviolet:9699539,deeppink:16716947,deepskyblue:49151,dimgray:6908265,dimgrey:6908265,dodgerblue:2003199,firebrick:11674146,floralwhite:16775920,forestgreen:2263842,fuchsia:16711935,gainsboro:14474460,ghostwhite:16316671,gold:16766720,goldenrod:14329120,gray:8421504,green:32768,greenyellow:11403055,grey:8421504,honeydew:15794160,hotpink:16738740,indianred:13458524,indigo:4915330,ivory:16777200,khaki:15787660,lavender:15132410,lavenderblush:16773365,lawngreen:8190976,lemonchiffon:16775885,lightblue:11393254,lightcoral:15761536,lightcyan:14745599,lightgoldenrodyellow:16448210,lightgray:13882323,lightgreen:9498256,lightgrey:13882323,lightpink:16758465,lightsalmon:16752762,lightseagreen:2142890,lightskyblue:8900346,lightslategray:7833753,lightslategrey:7833753,lightsteelblue:11584734,lightyellow:16777184,lime:65280,limegreen:3329330,linen:16445670,magenta:16711935,maroon:8388608,mediumaquamarine:6737322,mediumblue:205,mediumorchid:12211667,mediumpurple:9662683,mediumseagreen:3978097,mediumslateblue:8087790,mediumspringgreen:64154,mediumturquoise:4772300,mediumvioletred:13047173,midnightblue:1644912,mintcream:16121850,mistyrose:16770273,moccasin:16770229,navajowhite:16768685,navy:128,oldlace:16643558,olive:8421376,olivedrab:7048739,orange:16753920,orangered:16729344,orchid:14315734,palegoldenrod:15657130,palegreen:10025880,paleturquoise:11529966,palevioletred:14381203,papayawhip:16773077,peachpuff:16767673,peru:13468991,pink:16761035,plum:14524637,powderblue:11591910,purple:8388736,rebeccapurple:6697881,red:16711680,rosybrown:12357519,royalblue:4286945,saddlebrown:9127187,salmon:16416882,sandybrown:16032864,seagreen:3050327,seashell:16774638,sienna:10506797,silver:12632256,skyblue:8900331,slateblue:6970061,slategray:7372944,slategrey:7372944,snow:16775930,springgreen:65407,steelblue:4620980,tan:13808780,teal:32896,thistle:14204888,tomato:16737095,turquoise:4251856,violet:15631086,wheat:16113331,white:16777215,whitesmoke:16119285,yellow:16776960,yellowgreen:10145074};function kt(){return this.rgb().formatHex()}function Nt(){return this.rgb().formatRgb()}function At(t){var n,e;return t=(t+"").trim().toLowerCase(),(n=mt.exec(t))?(e=n[1].length,n=parseInt(n[1],16),6===e?jt(n):3===e?new qt(n>>8&15|n>>4&240,n>>4&15|240&n,(15&n)<<4|15&n,1):8===e?Et(n>>24&255,n>>16&255,n>>8&255,(255&n)/255):4===e?Et(n>>12&15|n>>8&240,n>>8&15|n>>4&240,n>>4&15|240&n,((15&n)<<4|15&n)/255):null):(n=yt.exec(t))?new qt(n[1],n[2],n[3],1):(n=bt.exec(t))?new qt(255*n[1]/100,255*n[2]/100,255*n[3]/100,1):(n=wt.exec(t))?Et(n[1],n[2],n[3],n[4]):(n=vt.exec(t))?Et(255*n[1]/100,255*n[2]/100,255*n[3]/100,n[4]):(n=xt.exec(t))?Pt(n[1],n[2]/100,n[3]/100,1):(n=$t.exec(t))?Pt(n[1],n[2]/100,n[3]/100,n[4]):Mt.hasOwnProperty(t)?jt(Mt[t]):"transparent"===t?new qt(NaN,NaN,NaN,0):null}function jt(t){return new qt(t>>16&255,t>>8&255,255&t,1)}function Et(t,n,e,r){return r<=0&&(t=n=e=NaN),new qt(t,n,e,r)}function _t(t){return t instanceof ct||(t=At(t)),t?new qt((t=t.rgb()).r,t.g,t.b,t.opacity):new qt}function St(t,n,e,r){return 1===arguments.length?_t(t):new qt(t,n,e,null==r?1:r)}function qt(t,n,e,r){this.r=+t,this.g=+n,this.b=+e,this.opacity=+r}function zt(){return"#"+Rt(this.r)+Rt(this.g)+Rt(this.b)}function Ot(){var t=this.opacity;return(1===(t=isNaN(t)?1:Math.max(0,Math.min(1,t)))?"rgb(":"rgba(")+Math.max(0,Math.min(255,Math.round(this.r)||0))+", "+Math.max(0,Math.min(255,Math.round(this.g)||0))+", "+Math.max(0,Math.min(255,Math.round(this.b)||0))+(1===t?")":", "+t+")")}function Rt(t){return((t=Math.max(0,Math.min(255,Math.round(t)||0)))<16?"0":"")+t.toString(16)}function Pt(t,n,e,r){return r<=0?t=n=e=NaN:e<=0||e>=1?t=n=NaN:n<=0&&(t=NaN),new It(t,n,e,r)}function Ct(t){if(t instanceof It)return new It(t.h,t.s,t.l,t.opacity);if(t instanceof ct||(t=At(t)),!t)return new It;if(t instanceof It)return t;var n=(t=t.rgb()).r/255,e=t.g/255,r=t.b/255,i=Math.min(n,e,r),o=Math.max(n,e,r),a=NaN,u=o-i,l=(o+i)/2;return u?(a=n===o?(e-r)/u+6*(e<r):e===o?(r-n)/u+2:(n-e)/u+4,u/=l<.5?o+i:2-o-i,a*=60):u=l>0&&l<1?0:a,new It(a,u,l,t.opacity)}function It(t,n,e,r){this.h=+t,this.s=+n,this.l=+e,this.opacity=+r}function Lt(t,n,e){return 255*(t<60?n+(e-n)*t/60:t<180?e:t<240?n+(e-n)*(240-t)/60:n)}lt(ct,At,{copy:function(t){return Object.assign(new this.constructor,this,t)},displayable:function(){return this.rgb().displayable()},hex:kt,formatHex:kt,formatHsl:function(){return Ct(this).formatHsl()},formatRgb:Nt,toString:Nt}),lt(qt,St,st(ct,{brighter:function(t){return t=null==t?ft:Math.pow(ft,t),new qt(this.r*t,this.g*t,this.b*t,this.opacity)},darker:function(t){return t=null==t?ht:Math.pow(ht,t),new qt(this.r*t,this.g*t,this.b*t,this.opacity)},rgb:function(){return this},displayable:function(){return-.5<=this.r&&this.r<255.5&&-.5<=this.g&&this.g<255.5&&-.5<=this.b&&this.b<255.5&&0<=this.opacity&&this.opacity<=1},hex:zt,formatHex:zt,formatRgb:Ot,toString:Ot})),lt(It,(function(t,n,e,r){return 1===arguments.length?Ct(t):new It(t,n,e,null==r?1:r)}),st(ct,{brighter:function(t){return t=null==t?ft:Math.pow(ft,t),new It(this.h,this.s,this.l*t,this.opacity)},darker:function(t){return t=null==t?ht:Math.pow(ht,t),new It(this.h,this.s,this.l*t,this.opacity)},rgb:function(){var t=this.h%360+360*(this.h<0),n=isNaN(t)||isNaN(this.s)?0:this.s,e=this.l,r=e+(e<.5?e:1-e)*n,i=2*e-r;return new qt(Lt(t>=240?t-240:t+120,i,r),Lt(t,i,r),Lt(t<120?t+240:t-120,i,r),this.opacity)},displayable:function(){return(0<=this.s&&this.s<=1||isNaN(this.s))&&0<=this.l&&this.l<=1&&0<=this.opacity&&this.opacity<=1},formatHsl:function(){var t=this.opacity;return(1===(t=isNaN(t)?1:Math.max(0,Math.min(1,t)))?"hsl(":"hsla(")+(this.h||0)+", "+100*(this.s||0)+"%, "+100*(this.l||0)+"%"+(1===t?")":", "+t+")")}}));var Wt=t=>()=>t;function Dt(t){return 1==(t=+t)?Ft:function(n,e){return e-n?function(t,n,e){return t=Math.pow(t,e),n=Math.pow(n,e)-t,e=1/e,function(r){return Math.pow(t+r*n,e)}}(n,e,t):Wt(isNaN(n)?e:n)}}function Ft(t,n){var e=n-t;return e?function(t,n){return function(e){return t+e*n}}(t,e):Wt(isNaN(t)?n:t)}var Ht=function t(n){var e=Dt(n);function r(t,n){var r=e((t=St(t)).r,(n=St(n)).r),i=e(t.g,n.g),o=e(t.b,n.b),a=Ft(t.opacity,n.opacity);return function(n){return t.r=r(n),t.g=i(n),t.b=o(n),t.opacity=a(n),t+""}}return r.gamma=t,r}(1);function Tt(t,n){n||(n=[]);var e,r=t?Math.min(n.length,t.length):0,i=n.slice();return function(o){for(e=0;e<r;++e)i[e]=t[e]*(1-o)+n[e]*o;return i}}function Bt(t,n){var e,r=n?n.length:0,i=t?Math.min(r,t.length):0,o=new Array(i),a=new Array(r);for(e=0;e<i;++e)o[e]=Jt(t[e],n[e]);for(;e<r;++e)a[e]=n[e];return function(t){for(e=0;e<i;++e)a[e]=o[e](t);return a}}function Vt(t,n){var e=new Date;return t=+t,n=+n,function(r){return e.setTime(t*(1-r)+n*r),e}}function Xt(t,n){return t=+t,n=+n,function(e){return t*(1-e)+n*e}}function Gt(t,n){var e,r={},i={};for(e in null!==t&&"object"==typeof t||(t={}),null!==n&&"object"==typeof n||(n={}),n)e in t?r[e]=Jt(t[e],n[e]):i[e]=n[e];return function(t){for(e in r)i[e]=r[e](t);return i}}var Ut=/[-+]?(?:\d+\.?\d*|\.?\d+)(?:[eE][-+]?\d+)?/g,Yt=new RegExp(Ut.source,"g");function Zt(t,n){var e,r,i,o=Ut.lastIndex=Yt.lastIndex=0,a=-1,u=[],l=[];for(t+="",n+="";(e=Ut.exec(t))&&(r=Yt.exec(n));)(i=r.index)>o&&(i=n.slice(o,i),u[a]?u[a]+=i:u[++a]=i),(e=e[0])===(r=r[0])?u[a]?u[a]+=r:u[++a]=r:(u[++a]=null,l.push({i:a,x:Xt(e,r)})),o=Yt.lastIndex;return o<n.length&&(i=n.slice(o),u[a]?u[a]+=i:u[++a]=i),u.length<2?l[0]?function(t){return function(n){return t(n)+""}}(l[0].x):function(t){return function(){return t}}(n):(n=l.length,function(t){for(var e,r=0;r<n;++r)u[(e=l[r]).i]=e.x(t);return u.join("")})}function Jt(t,n){var e,r,i=typeof n;return null==n||"boolean"===i?Wt(n):("number"===i?Xt:"string"===i?(e=At(n))?(n=e,Ht):Zt:n instanceof At?Ht:n instanceof Date?Vt:(r=n,!ArrayBuffer.isView(r)||r instanceof DataView?Array.isArray(n)?Bt:"function"!=typeof n.valueOf&&"function"!=typeof n.toString||isNaN(n)?Gt:Xt:Tt))(t,n)}function Kt(t,n){return t=+t,n=+n,function(e){return Math.round(t*(1-e)+n*e)}}function Qt(t){return+t}var tn=[0,1];function nn(t){return t}function en(t,n){return(n-=t=+t)?function(e){return(e-t)/n}:(e=isNaN(n)?NaN:.5,function(){return e});var e}function rn(t,n,e){var r=t[0],i=t[1],o=n[0],a=n[1];return i<r?(r=en(i,r),o=e(a,o)):(r=en(r,i),o=e(o,a)),function(t){return o(r(t))}}function on(t,n,e){var r=Math.min(t.length,n.length)-1,i=new Array(r),o=new Array(r),a=-1;for(t[r]<t[0]&&(t=t.slice().reverse(),n=n.slice().reverse());++a<r;)i[a]=en(t[a],t[a+1]),o[a]=e(n[a],n[a+1]);return function(n){var e=et(t,n,1,r)-1;return o[e](i[e](n))}}function an(t,n){return n.domain(t.domain()).range(t.range()).interpolate(t.interpolate()).clamp(t.clamp()).unknown(t.unknown())}function un(){var t,n,e,r,i,o,a=tn,u=tn,l=Jt,s=nn;function c(){var t,n,e,l=Math.min(a.length,u.length);return s!==nn&&(t=a[0],n=a[l-1],t>n&&(e=t,t=n,n=e),s=function(e){return Math.max(t,Math.min(n,e))}),r=l>2?on:rn,i=o=null,h}function h(n){return isNaN(n=+n)?e:(i||(i=r(a.map(t),u,l)))(t(s(n)))}return h.invert=function(e){return s(n((o||(o=r(u,a.map(t),Xt)))(e)))},h.domain=function(t){return arguments.length?(a=Array.from(t,Qt),c()):a.slice()},h.range=function(t){return arguments.length?(u=Array.from(t),c()):u.slice()},h.rangeRound=function(t){return u=Array.from(t),l=Kt,c()},h.clamp=function(t){return arguments.length?(s=!!t||nn,c()):s!==nn},h.interpolate=function(t){return arguments.length?(l=t,c()):l},h.unknown=function(t){return arguments.length?(e=t,h):e},function(e,r){return t=e,n=r,c()}}function ln(){return un()(nn,nn)}function sn(t,n){if((e=(t=n?t.toExponential(n-1):t.toExponential()).indexOf("e"))<0)return null;var e,r=t.slice(0,e);return[r.length>1?r[0]+r.slice(2):r,+t.slice(e+1)]}function cn(t){return(t=sn(Math.abs(t)))?t[1]:NaN}var hn,fn=/^(?:(.)?([<>=^]))?([+\-( ])?([$#])?(0)?(\d+)?(,)?(\.\d+)?(~)?([a-z%])?$/i;function dn(t){if(!(n=fn.exec(t)))throw new Error("invalid format: "+t);var n;return new gn({fill:n[1],align:n[2],sign:n[3],symbol:n[4],zero:n[5],width:n[6],comma:n[7],precision:n[8]&&n[8].slice(1),trim:n[9],type:n[10]})}function gn(t){this.fill=void 0===t.fill?" ":t.fill+"",this.align=void 0===t.align?">":t.align+"",this.sign=void 0===t.sign?"-":t.sign+"",this.symbol=void 0===t.symbol?"":t.symbol+"",this.zero=!!t.zero,this.width=void 0===t.width?void 0:+t.width,this.comma=!!t.comma,this.precision=void 0===t.precision?void 0:+t.precision,this.trim=!!t.trim,this.type=void 0===t.type?"":t.type+""}function pn(t,n){var e=sn(t,n);if(!e)return t+"";var r=e[0],i=e[1];return i<0?"0."+new Array(-i).join("0")+r:r.length>i+1?r.slice(0,i+1)+"."+r.slice(i+1):r+new Array(i-r.length+2).join("0")}dn.prototype=gn.prototype,gn.prototype.toString=function(){return this.fill+this.align+this.sign+this.symbol+(this.zero?"0":"")+(void 0===this.width?"":Math.max(1,0|this.width))+(this.comma?",":"")+(void 0===this.precision?"":"."+Math.max(0,0|this.precision))+(this.trim?"~":"")+this.type};var mn={"%":(t,n)=>(100*t).toFixed(n),b:t=>Math.round(t).toString(2),c:t=>t+"",d:function(t){return Math.abs(t=Math.round(t))>=1e21?t.toLocaleString("en").replace(/,/g,""):t.toString(10)},e:(t,n)=>t.toExponential(n),f:(t,n)=>t.toFixed(n),g:(t,n)=>t.toPrecision(n),o:t=>Math.round(t).toString(8),p:(t,n)=>pn(100*t,n),r:pn,s:function(t,n){var e=sn(t,n);if(!e)return t+"";var r=e[0],i=e[1],o=i-(hn=3*Math.max(-8,Math.min(8,Math.floor(i/3))))+1,a=r.length;return o===a?r:o>a?r+new Array(o-a+1).join("0"):o>0?r.slice(0,o)+"."+r.slice(o):"0."+new Array(1-o).join("0")+sn(t,Math.max(0,n+o-1))[0]},X:t=>Math.round(t).toString(16).toUpperCase(),x:t=>Math.round(t).toString(16)};function yn(t){return t}var bn,wn,vn,xn=Array.prototype.map,$n=["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"];function Mn(t){var n,e,r=void 0===t.grouping||void 0===t.thousands?yn:(n=xn.call(t.grouping,Number),e=t.thousands+"",function(t,r){for(var i=t.length,o=[],a=0,u=n[0],l=0;i>0&&u>0&&(l+u+1>r&&(u=Math.max(1,r-l)),o.push(t.substring(i-=u,i+u)),!((l+=u+1)>r));)u=n[a=(a+1)%n.length];return o.reverse().join(e)}),i=void 0===t.currency?"":t.currency[0]+"",o=void 0===t.currency?"":t.currency[1]+"",a=void 0===t.decimal?".":t.decimal+"",u=void 0===t.numerals?yn:function(t){return function(n){return n.replace(/[0-9]/g,(function(n){return t[+n]}))}}(xn.call(t.numerals,String)),l=void 0===t.percent?"%":t.percent+"",s=void 0===t.minus?"−":t.minus+"",c=void 0===t.nan?"NaN":t.nan+"";function h(t){var n=(t=dn(t)).fill,e=t.align,h=t.sign,f=t.symbol,d=t.zero,g=t.width,p=t.comma,m=t.precision,y=t.trim,b=t.type;"n"===b?(p=!0,b="g"):mn[b]||(void 0===m&&(m=12),y=!0,b="g"),(d||"0"===n&&"="===e)&&(d=!0,n="0",e="=");var w="$"===f?i:"#"===f&&/[boxX]/.test(b)?"0"+b.toLowerCase():"",v="$"===f?o:/[%p]/.test(b)?l:"",x=mn[b],$=/[defgprs%]/.test(b);function M(t){var i,o,l,f=w,M=v;if("c"===b)M=x(t)+M,t="";else{var k=(t=+t)<0||1/t<0;if(t=isNaN(t)?c:x(Math.abs(t),m),y&&(t=function(t){t:for(var n,e=t.length,r=1,i=-1;r<e;++r)switch(t[r]){case".":i=n=r;break;case"0":0===i&&(i=r),n=r;break;default:if(!+t[r])break t;i>0&&(i=0)}return i>0?t.slice(0,i)+t.slice(n+1):t}(t)),k&&0==+t&&"+"!==h&&(k=!1),f=(k?"("===h?h:s:"-"===h||"("===h?"":h)+f,M=("s"===b?$n[8+hn/3]:"")+M+(k&&"("===h?")":""),$)for(i=-1,o=t.length;++i<o;)if(48>(l=t.charCodeAt(i))||l>57){M=(46===l?a+t.slice(i+1):t.slice(i))+M,t=t.slice(0,i);break}}p&&!d&&(t=r(t,1/0));var N=f.length+t.length+M.length,A=N<g?new Array(g-N+1).join(n):"";switch(p&&d&&(t=r(A+t,A.length?g-M.length:1/0),A=""),e){case"<":t=f+t+M+A;break;case"=":t=f+A+t+M;break;case"^":t=A.slice(0,N=A.length>>1)+f+t+M+A.slice(N);break;default:t=A+f+t+M}return u(t)}return m=void 0===m?6:/[gprs]/.test(b)?Math.max(1,Math.min(21,m)):Math.max(0,Math.min(20,m)),M.toString=function(){return t+""},M}return{format:h,formatPrefix:function(t,n){var e=h(((t=dn(t)).type="f",t)),r=3*Math.max(-8,Math.min(8,Math.floor(cn(n)/3))),i=Math.pow(10,-r),o=$n[8+r/3];return function(t){return e(i*t)+o}}}}function kn(t,n,e,r){var i,o=function(t,n,e){var r=Math.abs(n-t)/Math.max(0,e),i=Math.pow(10,Math.floor(Math.log(r)/Math.LN10)),o=r/i;return o>=rt?i*=10:o>=it?i*=5:o>=ot&&(i*=2),n<t?-i:i}(t,n,e);switch((r=dn(null==r?",f":r)).type){case"s":var a=Math.max(Math.abs(t),Math.abs(n));return null!=r.precision||isNaN(i=function(t,n){return Math.max(0,3*Math.max(-8,Math.min(8,Math.floor(cn(n)/3)))-cn(Math.abs(t)))}(o,a))||(r.precision=i),vn(r,a);case"":case"e":case"g":case"p":case"r":null!=r.precision||isNaN(i=function(t,n){return t=Math.abs(t),n=Math.abs(n)-t,Math.max(0,cn(n)-cn(t))+1}(o,Math.max(Math.abs(t),Math.abs(n))))||(r.precision=i-("e"===r.type));break;case"f":case"%":null!=r.precision||isNaN(i=function(t){return Math.max(0,-cn(Math.abs(t)))}(o))||(r.precision=i-2*("%"===r.type))}return wn(r)}function Nn(t){var n=t.domain;return t.ticks=function(t){var e=n();return function(t,n,e){var r,i,o,a,u=-1;if(e=+e,(t=+t)==(n=+n)&&e>0)return[t];if((r=n<t)&&(i=t,t=n,n=i),0===(a=at(t,n,e))||!isFinite(a))return[];if(a>0)for(t=Math.ceil(t/a),n=Math.floor(n/a),o=new Array(i=Math.ceil(n-t+1));++u<i;)o[u]=(t+u)*a;else for(a=-a,t=Math.ceil(t*a),n=Math.floor(n*a),o=new Array(i=Math.ceil(n-t+1));++u<i;)o[u]=(t+u)/a;return r&&o.reverse(),o}(e[0],e[e.length-1],null==t?10:t)},t.tickFormat=function(t,e){var r=n();return kn(r[0],r[r.length-1],null==t?10:t,e)},t.nice=function(e){null==e&&(e=10);var r,i,o=n(),a=0,u=o.length-1,l=o[a],s=o[u],c=10;for(s<l&&(i=l,l=s,s=i,i=a,a=u,u=i);c-- >0;){if((i=at(l,s,e))===r)return o[a]=l,o[u]=s,n(o);if(i>0)l=Math.floor(l/i)*i,s=Math.ceil(s/i)*i;else{if(!(i<0))break;l=Math.ceil(l*i)/i,s=Math.floor(s*i)/i}r=i}return t},t}function An(){var t=ln();return t.copy=function(){return an(t,An())},ut.apply(t,arguments),Nn(t)}function jn(t,n,e){const r=t.slice();return r[27]=n[e],r}function En(t,n,e){const r=t.slice();return r[30]=n[e],r}function _n(t){let n,r=[t[30]],i={};for(let t=0;t<r.length;t+=1)i=e(i,r[t]);return{c(){n=w("line"),M(n,i),j(n,"svelte-1xsa3j5",!0)},m(t,e){p(t,n,e)},p(t,e){M(n,i=T(r,[256&e[0]&&t[30]])),j(n,"svelte-1xsa3j5",!0)},d(t){t&&m(n)}}}function Sn(t){let n,r,i=t[27].label+"",o=[t[27].attr],a={};for(let t=0;t<o.length;t+=1)a=e(a,o[t]);return{c(){n=w("text"),r=v(i),M(n,a),j(n,"svelte-1xsa3j5",!0)},m(t,e){p(t,n,e),g(n,r)},p(t,e){512&e[0]&&i!==(i=t[27].label+"")&&function(t,n){n=""+n,t.wholeText!==n&&(t.data=n)}(r,i),M(n,a=T(o,[512&e[0]&&t[27].attr])),j(n,"svelte-1xsa3j5",!0)},d(t){t&&m(n)}}}function qn(n){let e,r,i,o,a,u,l,s,c,h,f,d,M,k,N,j,E,_,S,q,z,O,R,P,I,L,W,D,F,H,T,B,V,X,G,U=n[8],Y=[];for(let t=0;t<U.length;t+=1)Y[t]=_n(En(n,U,t));let Z=n[9],J=[];for(let t=0;t<Z.length;t+=1)J[t]=Sn(jn(n,Z,t));return{c(){e=b("main"),r=b("div"),i=w("svg"),o=w("g"),a=w("g"),u=w("path");for(let t=0;t<Y.length;t+=1)Y[t].c();l=w("line");for(let t=0;t<J.length;t+=1)J[t].c();h=w("g"),f=w("text"),d=v("Now"),N=w("line"),_=w("line"),z=w("line"),P=w("text"),I=v("5 sec"),D=w("text"),F=v("ago"),$(u,"d",n[7]),$(u,"class","svelte-1xsa3j5"),$(l,"x1",s=n[5](180)),$(l,"y1",n[6]),$(l,"x2",c=n[5](179.9)),$(l,"y2",n[6]),$(l,"class","svelte-1xsa3j5"),$(a,"class","grid svelte-1xsa3j5"),$(f,"x",M=-20),$(f,"y",n[10]),$(f,"dy",k=5),$(f,"text-anchor","end"),$(N,"x1",j=-15),$(N,"y1",n[10]),$(N,"x2",E=0),$(N,"y2",n[10]),$(N,"class","svelte-1xsa3j5"),$(_,"x1",S=0),$(_,"y1",n[10]),$(_,"x2",q=0),$(_,"y2",n[3]),$(_,"class","svelte-1xsa3j5"),$(z,"x1",O=-15),$(z,"y1",n[2]),$(z,"x2",R=0),$(z,"y2",n[3]),$(z,"class","svelte-1xsa3j5"),$(P,"x",L=-20),$(P,"y",n[3]),$(P,"dy",W=-5),$(P,"text-anchor","end"),$(D,"x",H=-20),$(D,"y",n[3]),$(D,"dy",T=10),$(D,"text-anchor","end"),$(h,"class","timeAxis svelte-1xsa3j5"),$(h,"transform",B=`translate(${-n[2]+zn-10},0)`),$(h,"opacity",V=Math.max(0,10*(n[4]-.9))),$(o,"transform",X=`translate(${n[0]/2},${n[1]/2})`),$(i,"width",n[0]),$(i,"height",n[1]),C((()=>n[21].call(r)))},m(t,s){p(t,e,s),g(e,r),g(r,i),g(i,o),g(o,a),g(a,u);for(let t=0;t<Y.length;t+=1)Y[t].m(a,null);g(a,l);for(let t=0;t<J.length;t+=1)J[t].m(a,null);g(o,h),g(h,f),g(f,d),g(h,N),g(h,_),g(h,z),g(h,P),g(P,I),g(h,D),g(D,F),G=function(t,n){"static"===getComputedStyle(t).position&&(t.style.position="relative");const e=b("iframe");e.setAttribute("style","display: block; position: absolute; top: 0; left: 0; width: 100%; height: 100%; overflow: hidden; border: 0; opacity: 0; pointer-events: none; z-index: -1;"),e.setAttribute("aria-hidden","true"),e.tabIndex=-1;const r=A();let i;return r?(e.src="data:text/html,<script>onresize=function(){parent.postMessage(0,'*')}<\/script>",i=x(window,"message",(t=>{t.source===e.contentWindow&&n()}))):(e.src="about:blank",e.onload=()=>{i=x(e.contentWindow,"resize",n)}),g(t,e),()=>{(r||i&&e.contentWindow)&&i(),m(e)}}(r,n[21].bind(r))},p(t,n){if(128&n[0]&&$(u,"d",t[7]),256&n[0]){let e;for(U=t[8],e=0;e<U.length;e+=1){const r=En(t,U,e);Y[e]?Y[e].p(r,n):(Y[e]=_n(r),Y[e].c(),Y[e].m(a,l))}for(;e<Y.length;e+=1)Y[e].d(1);Y.length=U.length}if(32&n[0]&&s!==(s=t[5](180))&&$(l,"x1",s),64&n[0]&&$(l,"y1",t[6]),32&n[0]&&c!==(c=t[5](179.9))&&$(l,"x2",c),64&n[0]&&$(l,"y2",t[6]),512&n[0]){let e;for(Z=t[9],e=0;e<Z.length;e+=1){const r=jn(t,Z,e);J[e]?J[e].p(r,n):(J[e]=Sn(r),J[e].c(),J[e].m(a,null))}for(;e<J.length;e+=1)J[e].d(1);J.length=Z.length}1024&n[0]&&$(f,"y",t[10]),1024&n[0]&&$(N,"y1",t[10]),1024&n[0]&&$(N,"y2",t[10]),1024&n[0]&&$(_,"y1",t[10]),8&n[0]&&$(_,"y2",t[3]),4&n[0]&&$(z,"y1",t[2]),8&n[0]&&$(z,"y2",t[3]),8&n[0]&&$(P,"y",t[3]),8&n[0]&&$(D,"y",t[3]),4&n[0]&&B!==(B=`translate(${-t[2]+zn-10},0)`)&&$(h,"transform",B),16&n[0]&&V!==(V=Math.max(0,10*(t[4]-.9)))&&$(h,"opacity",V),3&n[0]&&X!==(X=`translate(${t[0]/2},${t[1]/2})`)&&$(o,"transform",X),1&n[0]&&$(i,"width",t[0]),2&n[0]&&$(i,"height",t[1])},i:t,o:t,d(t){t&&m(e),y(Y,t),y(J,t),G()}}}bn=Mn({thousands:",",grouping:[3],currency:["$",""]}),wn=bn.format,vn=bn.formatPrefix;const zn=40;function On(t,n,e){let r,i,o,a,u,s,c,h,f,d,g,p,m,y,b,w,v,x,$;const M=180/Math.PI;let{fullWidth:k=500}=n;const N=Q(0,{duration:4e3,easing:Z});l(t,N,(t=>e(4,$=t)));const A=setInterval((()=>{N.set(1===$?0:1)}),5e3);_((()=>clearInterval(A)));const j=[];for(let t=180;t<360;++t)j.push(t);for(let t=0;t<180;++t)j.push(t);j.push(179.9);const E=[{angle:180,label:"180°",dy:15},{angle:225,label:"",dy:0},{angle:270,label:"270°",dy:-5},{angle:315,label:"",dy:0},{angle:0,label:"0° (360°)",dy:0},{angle:45,label:"",dy:0},{angle:90,label:"90°",dy:-5},{angle:135,label:"",dy:0},{angle:179.999,label:"180°",dy:15}];return t.$$set=t=>{"fullWidth"in t&&e(0,k=t.fullWidth)},t.$$.update=()=>{1&t.$$.dirty[0]&&e(12,r=Math.min(500,k)),4096&t.$$.dirty[0]&&e(1,i=r),4096&t.$$.dirty[0]&&e(13,o=r-60),2&t.$$.dirty[0]&&e(14,a=i-60),8192&t.$$.dirty[0]&&e(2,u=o/2),16384&t.$$.dirty[0]&&e(3,s=a/2),16&t.$$.dirty[0]&&e(15,c=$*zn),32788&t.$$.dirty[0]&&e(5,h=An().domain([0,180,180,360]).range([c/2,$*u,-$*u+c,c/2])),24&t.$$.dirty[0]&&e(6,f=$*s),16&t.$$.dirty[0]&&e(16,d=An().domain([0,180,180,360]).range([0,180*(1-$),180*($-1),0])),65636&t.$$.dirty[0]&&e(17,g=(t,n=u)=>{const e=h(t),r=d(t)/M;return{x1:e+n*Math.sin(r),y1:-n*Math.cos(r),x2:e,y2:f}}),16&t.$$.dirty[0]&&e(18,p=(12+3*$)/16),262148&t.$$.dirty[0]&&e(19,m=u*p),655360&t.$$.dirty[0]&&e(7,y=j.reduce(((t,n)=>{const{x1:e,y1:r}=g(n,m);return t+=` ${e},${r}`}),"M")),131072&t.$$.dirty[0]&&e(8,b=E.map((t=>g(t.angle)))),16&t.$$.dirty[0]&&e(20,w=E.filter((t=>t.label.length>0&&!(179===Math.floor(t.angle)&&0===$)))),1179664&t.$$.dirty[0]&&e(9,v=w.map((t=>{const{x1:n,y1:e}=g(t.angle);return{attr:{x:n,y:e,dy:-5*$+(1-$)*t.dy},label:t.label}}))),262152&t.$$.dirty[0]&&e(10,x=-s*p)},[k,i,u,s,$,h,f,y,b,v,x,N,r,o,a,c,d,g,p,m,w,function(){k=this.clientWidth,e(0,k)}]}class Rn extends U{constructor(t){super(),G(this,t,On,qn,u,{fullWidth:0},[-1,-1])}}function Pn(n){let e,r,i;return r=new Rn({}),{c(){var t;e=b("main"),(t=r.$$.fragment)&&t.c()},m(t,n){p(t,e,n),B(r,e,null),i=!0},p:t,i(t){i||(H(r.$$.fragment,t),i=!0)},o(t){!function(t,n,e,r){if(t&&t.o){if(F.has(t))return;F.add(t),(void 0).c.push((()=>{F.delete(t),r&&(e&&t.d(1),r())})),t.o(n)}}(r.$$.fragment,t),i=!1},d(t){t&&m(e),V(r)}}}return new class extends U{constructor(t){super(),G(this,t,null,Pn,u,{})}}({target:document.body})}();
//# sourceMappingURL=bundle.js.map

              
            
!
999px

Console