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;
}

circle.svelte-1cdwx9u.svelte-1cdwx9u{fill:none;stroke:gray;stroke-width:1px}.grid.svelte-1cdwx9u line.svelte-1cdwx9u{fill:none;stroke:gray;stroke-width:1px}.grid.svelte-1cdwx9u text.svelte-1cdwx9u{text-anchor:middle}
              
            
!

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 M(t,n,e){null==e?t.removeAttribute(n):t.getAttribute(n)!==e&&t.setAttribute(n,e)}function $(t,n){for(const e in n)M(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 E(t,n,e){t.classList[e?"add":"remove"](n)}function j(t){N=t}function q(t){(function(){if(!N)throw new Error("Function called outside component initialization");return N})().$$.on_destroy.push(t)}const _=[],S=[],z=[],O=[],R=Promise.resolve();let C=!1;function P(t){z.push(t)}let L=!1;const W=new Set;function I(){if(!L){L=!0;do{for(let t=0;t<_.length;t+=1){const n=_[t];j(n),D(n.$$)}for(j(null),_.length=0;S.length;)S.pop()();for(let t=0;t<z.length;t+=1){const n=z[t];W.has(n)||(W.add(n),n())}z.length=0}while(_.length);for(;O.length;)O.pop()();C=!1,L=!1,W.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(P)}}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),P((()=>{const n=u.map(r).filter(a);l?l.push(...n):o(n),t.$$.on_mount=[]})),s.forEach(P)}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]&&(_.push(t),C||(C=!0,R.then(I)),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;j(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),I()}j(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]+"\\)$"),Mt=new RegExp("^hsla\\("+[gt,pt,pt,gt]+"\\)$"),$t={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?Et(n):3===e?new St(n>>8&15|n>>4&240,n>>4&15|240&n,(15&n)<<4|15&n,1):8===e?jt(n>>24&255,n>>16&255,n>>8&255,(255&n)/255):4===e?jt(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 St(n[1],n[2],n[3],1):(n=bt.exec(t))?new St(255*n[1]/100,255*n[2]/100,255*n[3]/100,1):(n=wt.exec(t))?jt(n[1],n[2],n[3],n[4]):(n=vt.exec(t))?jt(255*n[1]/100,255*n[2]/100,255*n[3]/100,n[4]):(n=xt.exec(t))?Ct(n[1],n[2]/100,n[3]/100,1):(n=Mt.exec(t))?Ct(n[1],n[2]/100,n[3]/100,n[4]):$t.hasOwnProperty(t)?Et($t[t]):"transparent"===t?new St(NaN,NaN,NaN,0):null}function Et(t){return new St(t>>16&255,t>>8&255,255&t,1)}function jt(t,n,e,r){return r<=0&&(t=n=e=NaN),new St(t,n,e,r)}function qt(t){return t instanceof ct||(t=At(t)),t?new St((t=t.rgb()).r,t.g,t.b,t.opacity):new St}function _t(t,n,e,r){return 1===arguments.length?qt(t):new St(t,n,e,null==r?1:r)}function St(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 Ct(t,n,e,r){return r<=0?t=n=e=NaN:e<=0||e>=1?t=n=NaN:n<=0&&(t=NaN),new Lt(t,n,e,r)}function Pt(t){if(t instanceof Lt)return new Lt(t.h,t.s,t.l,t.opacity);if(t instanceof ct||(t=At(t)),!t)return new Lt;if(t instanceof Lt)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 Lt(a,u,l,t.opacity)}function Lt(t,n,e,r){this.h=+t,this.s=+n,this.l=+e,this.opacity=+r}function Wt(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 Pt(this).formatHsl()},formatRgb:Nt,toString:Nt}),lt(St,_t,st(ct,{brighter:function(t){return t=null==t?ft:Math.pow(ft,t),new St(this.r*t,this.g*t,this.b*t,this.opacity)},darker:function(t){return t=null==t?ht:Math.pow(ht,t),new St(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(Lt,(function(t,n,e,r){return 1===arguments.length?Pt(t):new Lt(t,n,e,null==r?1:r)}),st(ct,{brighter:function(t){return t=null==t?ft:Math.pow(ft,t),new Lt(this.h,this.s,this.l*t,this.opacity)},darker:function(t){return t=null==t?ht:Math.pow(ht,t),new Lt(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 St(Wt(t>=240?t-240:t+120,i,r),Wt(t,i,r),Wt(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 It=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):It(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):It(isNaN(t)?n:t)}var Ht=function t(n){var e=Dt(n);function r(t,n){var r=e((t=_t(t)).r,(n=_t(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?It(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,Mn=["y","z","a","f","p","n","µ","m","","k","M","G","T","P","E","Z","Y"];function $n(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],M=/[defgprs%]/.test(b);function $(t){var i,o,l,f=w,$=v;if("c"===b)$=x(t)+$,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,$=("s"===b?Mn[8+hn/3]:"")+$+(k&&"("===h?")":""),M)for(i=-1,o=t.length;++i<o;)if(48>(l=t.charCodeAt(i))||l>57){$=(46===l?a+t.slice(i+1):t.slice(i))+$,t=t.slice(0,i);break}}p&&!d&&(t=r(t,1/0));var N=f.length+t.length+$.length,A=N<g?new Array(g-N+1).join(n):"";switch(p&&d&&(t=r(A+t,A.length?g-$.length:1/0),A=""),e){case"<":t=f+t+$+A;break;case"=":t=f+A+t+$;break;case"^":t=A.slice(0,N=A.length>>1)+f+t+$+A.slice(N);break;default:t=A+f+t+$}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)),$.toString=function(){return t+""},$}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=Mn[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 En(t,n,e){const r=t.slice();return r[16]=n[e],r}function jn(t,n,e){const r=t.slice();return r[19]=n[e],r}function qn(t){let n,r=[t[19]],i={};for(let t=0;t<r.length;t+=1)i=e(i,r[t]);return{c(){n=w("line"),$(n,i),E(n,"svelte-1cdwx9u",!0)},m(t,e){p(t,n,e)},p(t,e){$(n,i=T(r,[32&e&&t[19]])),E(n,"svelte-1cdwx9u",!0)},d(t){t&&m(n)}}}function _n(t){let n,r,i=t[16].label+"",o=[t[16].attr],a={};for(let t=0;t<o.length;t+=1)a=e(a,o[t]);return{c(){n=w("text"),r=v(i),$(n,a),E(n,"svelte-1cdwx9u",!0)},m(t,e){p(t,n,e),g(n,r)},p(t,e){64&e&&i!==(i=t[16].label+"")&&function(t,n){n=""+n,t.wholeText!==n&&(t.data=n)}(r,i),$(n,a=T(o,[64&e&&t[16].attr])),E(n,"svelte-1cdwx9u",!0)},d(t){t&&m(n)}}}function Sn(n){let e,r,i,o,a,u,l,s,c,h,f,d,$,k,N,E,j=n[5],q=[];for(let t=0;t<j.length;t+=1)q[t]=qn(jn(n,j,t));let _=n[6],S=[];for(let t=0;t<_.length;t+=1)S[t]=_n(En(n,_,t));return{c(){e=b("main"),r=b("div"),i=w("svg"),o=w("g"),a=w("g"),u=w("circle");for(let t=0;t<q.length;t+=1)q[t].c();h=v("");for(let t=0;t<S.length;t+=1)S[t].c();f=w("line"),M(u,"cx",l=0),M(u,"cy",s=0),M(u,"r",c=3*n[2]/4),M(u,"class","svelte-1cdwx9u"),M(a,"class","grid svelte-1cdwx9u"),M(f,"x1",d=n[3](180)),M(f,"y1",n[4]),M(f,"x2",$=n[3](179.9)),M(f,"y2",n[4]),M(f,"stroke","red"),M(f,"stroke-width",k=3),M(o,"transform",N=`translate(${n[0]/2},${n[1]/2})`),M(i,"width",n[0]),M(i,"height",n[1]),P((()=>n[14].call(r)))},m(t,l){p(t,e,l),g(e,r),g(r,i),g(i,o),g(o,a),g(a,u);for(let t=0;t<q.length;t+=1)q[t].m(a,null);g(a,h);for(let t=0;t<S.length;t+=1)S[t].m(a,null);g(o,f),E=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[14].bind(r))},p(t,[n]){if(4&n&&c!==(c=3*t[2]/4)&&M(u,"r",c),32&n){let e;for(j=t[5],e=0;e<j.length;e+=1){const r=jn(t,j,e);q[e]?q[e].p(r,n):(q[e]=qn(r),q[e].c(),q[e].m(a,h))}for(;e<q.length;e+=1)q[e].d(1);q.length=j.length}if(64&n){let e;for(_=t[6],e=0;e<_.length;e+=1){const r=En(t,_,e);S[e]?S[e].p(r,n):(S[e]=_n(r),S[e].c(),S[e].m(a,null))}for(;e<S.length;e+=1)S[e].d(1);S.length=_.length}8&n&&d!==(d=t[3](180))&&M(f,"x1",d),16&n&&M(f,"y1",t[4]),8&n&&$!==($=t[3](179.9))&&M(f,"x2",$),16&n&&M(f,"y2",t[4]),3&n&&N!==(N=`translate(${t[0]/2},${t[1]/2})`)&&M(o,"transform",N),1&n&&M(i,"width",t[0]),2&n&&M(i,"height",t[1])},i:t,o:t,d(t){t&&m(e),y(q,t),y(S,t),E()}}}bn=$n({thousands:",",grouping:[3],currency:["$",""]}),wn=bn.format,vn=bn.formatPrefix;function zn(t,n,e){let r,i,o,a,u,s,c,h,f,d,g,p,{fullWidth:m=500}=n;const y=Q(0,{duration:4e3,easing:Z});l(t,y,(t=>e(12,p=t)));const b=setInterval((()=>{y.set(1===p?0:1)}),5e3);return q((()=>clearInterval(b))),t.$$set=t=>{"fullWidth"in t&&e(0,m=t.fullWidth)},t.$$.update=()=>{1&t.$$.dirty&&e(8,r=Math.min(500,m)),256&t.$$.dirty&&e(1,i=r),256&t.$$.dirty&&e(9,o=r-60),2&t.$$.dirty&&e(10,a=i-60),512&t.$$.dirty&&e(2,u=o/2),1024&t.$$.dirty&&e(11,s=a/2),4100&t.$$.dirty&&e(3,c=An().domain([0,180,180,360]).range([0,p*u,-p*u,0])),6144&t.$$.dirty&&e(4,h=p*s),2076&t.$$.dirty&&e(13,f=[{angle:180,label:"180°",x1:0,y1:s},{angle:225,label:"",x1:-u/Math.sqrt(2),y1:-s/Math.sqrt(2)},{angle:270,label:"270°",x1:-u,y1:0},{angle:315,label:"",x1:-u/Math.sqrt(2),y1:s/Math.sqrt(2)},{angle:0,label:"0° (360°)",x1:0,y1:-s},{angle:45,label:"",x1:u/Math.sqrt(2),y1:-s/Math.sqrt(2)},{angle:90,label:"90°",x1:u,y1:0},{angle:135,label:"",x1:u/Math.sqrt(2),y1:s/Math.sqrt(2)},{angle:179.999,label:"",x1:0,y1:s}].map((t=>Object.assign(Object.assign({},t),{x2:c(t.angle),y2:h})))),8192&t.$$.dirty&&e(5,d=f.map((t=>({x1:t.x1,y1:t.y1,x2:t.x2,y2:t.y2})))),8192&t.$$.dirty&&e(6,g=f.map((t=>({attr:{x:t.x1,y:t.y1},label:t.label}))))},[m,i,u,c,h,d,g,y,r,o,a,s,p,f,function(){m=this.clientWidth,e(0,m)}]}class On extends U{constructor(t){super(),G(this,t,zn,Sn,u,{fullWidth:0})}}function Rn(n){let e,r,i;return r=new On({}),{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,Rn,u,{})}}({target:document.body})}();
//# sourceMappingURL=bundle.js.map

              
            
!
999px

Console