<!-- Repo: https://github.com/harryli0088/svelte-polar-animation-tutorial -->
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}
//This code was generated 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(){}function n(t,n){for(const e in n)t[e]=n[e];return t}function e(t){return t()}function o(){return Object.create(null)}function r(t){t.forEach(e)}function l(t){return"function"==typeof t}function i(t,n){return t!=t?n==n:t!==n||t&&"object"==typeof t||"function"==typeof t}function c(t,n){t.appendChild(n)}function s(t,n,e){t.insertBefore(n,e||null)}function a(t){t.parentNode.removeChild(t)}function u(t,n){for(let e=0;e<t.length;e+=1)t[e]&&t[e].d(n)}function f(t){return document.createElement(t)}function d(t){return document.createElementNS("http://www.w3.org/2000/svg",t)}function h(t){return document.createTextNode(t)}function g(t,n,e,o){return t.addEventListener(n,e,o),()=>t.removeEventListener(n,e,o)}function $(t,n,e){null==e?t.removeAttribute(n):t.getAttribute(n)!==e&&t.setAttribute(n,e)}function p(t,n){for(const e in n)$(t,e,n[e])}let y,m;function x(){if(void 0===y){y=!1;try{"undefined"!=typeof window&&window.parent&&window.parent.document}catch(t){y=!0}}return y}function b(t,n,e){t.classList[e?"add":"remove"](n)}function w(t){m=t}const v=[],_=[],M=[],k=[],q=Promise.resolve();let E=!1;function W(t){M.push(t)}let A=!1;const N=new Set;function S(){if(!A){A=!0;do{for(let t=0;t<v.length;t+=1){const n=v[t];w(n),j(n.$$)}for(w(null),v.length=0;_.length;)_.pop()();for(let t=0;t<M.length;t+=1){const n=M[t];N.has(n)||(N.add(n),n())}M.length=0}while(v.length);for(;k.length;)k.pop()();E=!1,A=!1,N.clear()}}function j(t){if(null!==t.fragment){t.update(),r(t.before_update);const n=t.dirty;t.dirty=[-1],t.fragment&&t.fragment.p(t.ctx,n),t.after_update.forEach(W)}}const z=new Set;function C(t,n){t&&t.i&&(z.delete(t),t.i(n))}function L(t,n){const e={},o={},r={$$scope:1};let l=t.length;for(;l--;){const i=t[l],c=n[l];if(c){for(const t in i)t in c||(o[t]=1);for(const t in c)r[t]||(e[t]=c[t],r[t]=1);t[l]=c}else for(const t in i)r[t]=1}for(const t in o)t in e||(e[t]=void 0);return e}function O(t,n,o){const{fragment:i,on_mount:c,on_destroy:s,after_update:a}=t.$$;i&&i.m(n,o),W((()=>{const n=c.map(e).filter(l);s?s.push(...n):r(n),t.$$.on_mount=[]})),a.forEach(W)}function T(t,n){const e=t.$$;null!==e.fragment&&(r(e.on_destroy),e.fragment&&e.fragment.d(n),e.on_destroy=e.fragment=null,e.ctx=[])}function B(t,n){-1===t.$$.dirty[0]&&(v.push(t),E||(E=!0,q.then(S)),t.$$.dirty.fill(0)),t.$$.dirty[n/31|0]|=1<<n%31}function I(n,e,l,i,c,s,u=[-1]){const f=m;w(n);const d=e.props||{},h=n.$$={fragment:null,ctx:null,props:s,update:t,not_equal:c,bound:o(),on_mount:[],on_destroy:[],before_update:[],after_update:[],context:new Map(f?f.$$.context:[]),callbacks:o(),dirty:u,skip_bound:!1};let g=!1;if(h.ctx=l?l(n,d,((t,e,...o)=>{const r=o.length?o[0]:e;return h.ctx&&c(h.ctx[t],h.ctx[t]=r)&&(!h.skip_bound&&h.bound[t]&&h.bound[t](r),g&&B(n,t)),e})):[],h.update(),g=!0,r(h.before_update),h.fragment=!!i&&i(h.ctx),e.target){if(e.hydrate){const t=function(t){return Array.from(t.childNodes)}(e.target);h.fragment&&h.fragment.l(t),t.forEach(a)}else h.fragment&&h.fragment.c();e.intro&&C(n.$$.fragment),O(n,e.target,e.anchor),S()}w(f)}class P{$destroy(){T(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)}}function D(t,n,e){const o=t.slice();return o[11]=n[e],o}function F(t,n,e){const o=t.slice();return o[14]=n[e],o}function G(t){let e,o=[t[14]],r={};for(let t=0;t<o.length;t+=1)r=n(r,o[t]);return{c(){e=d("line"),p(e,r),b(e,"svelte-1cdwx9u",!0)},m(t,n){s(t,e,n)},p(t,n){p(e,r=L(o,[8&n&&t[14]])),b(e,"svelte-1cdwx9u",!0)},d(t){t&&a(e)}}}function H(t){let e,o,r=t[11].label+"",l=[t[11].attr],i={};for(let t=0;t<l.length;t+=1)i=n(i,l[t]);return{c(){e=d("text"),o=h(r),p(e,i),b(e,"svelte-1cdwx9u",!0)},m(t,n){s(t,e,n),c(e,o)},p(t,n){16&n&&r!==(r=t[11].label+"")&&function(t,n){n=""+n,t.wholeText!==n&&(t.data=n)}(o,r),p(e,i=L(l,[16&n&&t[11].attr])),b(e,"svelte-1cdwx9u",!0)},d(t){t&&a(e)}}}function J(n){let e,o,r,l,i,p,y,m,b,w,v,_,M=n[3],k=[];for(let t=0;t<M.length;t+=1)k[t]=G(F(n,M,t));let q=n[4],E=[];for(let t=0;t<q.length;t+=1)E[t]=H(D(n,q,t));return{c(){e=f("main"),o=f("div"),r=d("svg"),l=d("g"),i=d("g"),p=d("circle");for(let t=0;t<k.length;t+=1)k[t].c();w=h("");for(let t=0;t<E.length;t+=1)E[t].c();$(p,"cx",y=0),$(p,"cy",m=0),$(p,"r",b=3*n[2]/4),$(p,"class","svelte-1cdwx9u"),$(i,"class","grid svelte-1cdwx9u"),$(l,"transform",v=`translate(${n[0]/2},${n[1]/2})`),$(r,"width",n[0]),$(r,"height",n[1]),W((()=>n[10].call(o)))},m(t,u){s(t,e,u),c(e,o),c(o,r),c(r,l),c(l,i),c(i,p);for(let t=0;t<k.length;t+=1)k[t].m(i,null);c(i,w);for(let t=0;t<E.length;t+=1)E[t].m(i,null);_=function(t,n){"static"===getComputedStyle(t).position&&(t.style.position="relative");const e=f("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 o=x();let r;return o?(e.src="data:text/html,<script>onresize=function(){parent.postMessage(0,'*')}<\/script>",r=g(window,"message",(t=>{t.source===e.contentWindow&&n()}))):(e.src="about:blank",e.onload=()=>{r=g(e.contentWindow,"resize",n)}),c(t,e),()=>{(o||r&&e.contentWindow)&&r(),a(e)}}(o,n[10].bind(o))},p(t,[n]){if(4&n&&b!==(b=3*t[2]/4)&&$(p,"r",b),8&n){let e;for(M=t[3],e=0;e<M.length;e+=1){const o=F(t,M,e);k[e]?k[e].p(o,n):(k[e]=G(o),k[e].c(),k[e].m(i,w))}for(;e<k.length;e+=1)k[e].d(1);k.length=M.length}if(16&n){let e;for(q=t[4],e=0;e<q.length;e+=1){const o=D(t,q,e);E[e]?E[e].p(o,n):(E[e]=H(o),E[e].c(),E[e].m(i,null))}for(;e<E.length;e+=1)E[e].d(1);E.length=q.length}3&n&&v!==(v=`translate(${t[0]/2},${t[1]/2})`)&&$(l,"transform",v),1&n&&$(r,"width",t[0]),2&n&&$(r,"height",t[1])},i:t,o:t,d(t){t&&a(e),u(k,t),u(E,t),_()}}}function K(t,n,e){let o,r,l,i,c,s,a,u,f,{fullWidth:d=500}=n;return t.$$set=t=>{"fullWidth"in t&&e(0,d=t.fullWidth)},t.$$.update=()=>{1&t.$$.dirty&&e(5,o=Math.min(500,d)),32&t.$$.dirty&&e(1,r=o),32&t.$$.dirty&&e(6,l=o-60),2&t.$$.dirty&&e(7,i=r-60),64&t.$$.dirty&&e(2,c=l/2),128&t.$$.dirty&&e(8,s=i/2),260&t.$$.dirty&&e(9,a=[{angle:180,label:"180°",x1:0,y1:s,x2:0,y2:0},{angle:225,label:"",x1:-c/Math.sqrt(2),y1:-s/Math.sqrt(2),x2:0,y2:0},{angle:270,label:"270°",x1:-c,y1:0,x2:0,y2:0},{angle:315,label:"",x1:-c/Math.sqrt(2),y1:s/Math.sqrt(2),x2:0,y2:0},{angle:0,label:"0° (360°)",x1:0,y1:-s,x2:0,y2:0},{angle:45,label:"",x1:c/Math.sqrt(2),y1:-s/Math.sqrt(2),x2:0,y2:0},{angle:90,label:"90°",x1:c,y1:0,x2:0,y2:0},{angle:135,label:"",x1:c/Math.sqrt(2),y1:s/Math.sqrt(2),x2:0,y2:0},{angle:179.999,label:"",x1:0,y1:s,x2:0,y2:0}]),512&t.$$.dirty&&e(3,u=a.map((t=>({x1:t.x1,y1:t.y1,x2:t.x2,y2:t.y2})))),512&t.$$.dirty&&e(4,f=a.map((t=>({attr:{x:t.x1,y:t.y1},label:t.label}))))},[d,r,c,u,f,o,l,i,s,a,function(){d=this.clientWidth,e(0,d)}]}class Q extends P{constructor(t){super(),I(this,t,K,J,i,{fullWidth:0})}}function R(n){let e,o,r;return o=new Q({}),{c(){var t;e=f("main"),(t=o.$$.fragment)&&t.c()},m(t,n){s(t,e,n),O(o,e,null),r=!0},p:t,i(t){r||(C(o.$$.fragment,t),r=!0)},o(t){!function(t,n,e,o){if(t&&t.o){if(z.has(t))return;z.add(t),(void 0).c.push((()=>{z.delete(t),o&&(e&&t.d(1),o())})),t.o(n)}}(o.$$.fragment,t),r=!1},d(t){t&&a(e),T(o)}}}return new class extends P{constructor(t){super(),I(this,t,null,R,i,{})}}({target:document.body})}();
//# sourceMappingURL=bundle.js.map
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.