UNPKG

mandelbrot-set

Version:

Web components and a web worker for painting Julia and Mandelbrot sets on a web page.

github.com/prantlf/mandelbrot-set

prantlf/mandelbrot-set

3 lines (2 loc) • 47.9 kB
1
2
3
function t(t,e,i){let n,o,s;if(0===e)n=o=s=i;else{const l=i<.5?i*(1+e):i+e-i*e,a=2*i-l;n=r(a,l,t+1/3),o=r(a,l,t),s=r(a,l,t-1/3)}return[255*n,255*o,255*s];function r(t,e,i){return i<0?i+=1:i>1&&(i-=1),i<1/6?t+6*(e-t)*i:i<.5?e:i<2/3?t+(e-t)*(2/3-i)*6:t}}function e(t,e,i){i>1&&(i=1);const n=t/60,o=i*e,s=o*(1-Math.abs(n%2-1));let r,l,a;n<0?r=a=l=0:n<1?(r=o,l=s,a=0):n<2?(r=s,l=o,a=0):n<3?(r=0,l=o,a=s):n<4?(r=0,l=s,a=o):n<5?(r=s,l=0,a=o):n<6?(r=o,l=0,a=s):(r=0,l=0,a=0);const h=i-o;return[r=255*(r+h),l=255*(l+h),a=255*(a+h)]}const i="https://unpkg.com/mandelbrot-set@2.2.0/public/scripts/computer.js";let n=i;function o(){return n}function s(t,e,i){const n=1/e;let o=1;for(let e=0,s=t.length;e<s;e+=3){o-=n;const[s,r,l]=i(o);t[e]=Math.floor(s),t[e+1]=Math.floor(r),t[e+2]=Math.floor(l)}}function r(t,e,i){const n=1/e;let o=1;for(let e=0,s=t.length;e<s;e+=3){o-=n;const[s,r,l]=i(o);t[e]=Math.floor(s),t[e+1]=Math.floor(r),t[e+2]=Math.floor(l)}}customElements.define("mandelbrot-set-computer",class extends HTMLElement{constructor(){super(),n=this.getAttribute("src")||i}});const l={grayscale(t,e){const i=256/e;let n=256;for(let e=0,o=t.length;e<o;e+=3)n-=i,t[e]=t[e+1]=t[e+2]=Math.floor(n)},jewels(t,e){const i=256/e;let n=256;for(let o=0,s=t.length;o<s;o+=3){const s=65535*(n-=i)/e*255;t[o]=255&s,t[o+1]=s>>8&255,t[o+2]=s>>16&255}},fiery(e,i){s(e,i,(function(e){return t(0,1,e)}))},rainbow(e,i){s(e,i,(function(e){return t(e,.5,.5)}))},sharp(t,i){r(t,i,(function(t){return e(360*t,1,1)}))},onion(t,i){r(t,i,(function(t){const[i,n,o]=e(360*t,1,1);return[i,o,n]}))},ocean(t,i){r(t,i,(function(t){const[i,n,o]=e(360*t,1,1);return[o,n,i]}))},poison(t,i){r(t,i,(function(t){const[i,n,o]=e(360*t,1,1);return[o,i,n]}))},garden(t,i){r(t,i,(function(t){const[i,n,o]=e(360*t,1,1);return[n,i,o]}))},sky(t,i){r(t,i,(function(t){const[i,n,o]=e(360*t,1,1);return[n,o,i]}))}};function a({paletteType:t,colorCount:e}){const i=`Generating palette of ${e} colours`;console.time(i);const n=new Array(3*e);return l[t](n,e),console.timeEnd(i),n}function h(t,e){const i=t.getAttribute("stylesheet");return i&&function(t,e){const i=document.createElement("link");i.setAttribute("rel","stylesheet"),i.setAttribute("href",e),t.appendChild(i)}(t=t.attachShadow({mode:"open"}),i),t.appendChild(e.content.cloneNode(!0)),t}let c=0;function d(t,e){return e.reduce((function(e,i){const n=`mandelbrot-set-${++c}`;return e[i]=function(t,e,i){const n=t.querySelector(`[data-id="${e}"]`);let o=n.previousElementSibling;return("LABEL"!==o.tagName||o.hasAttribute("for"))&&(o=n.nextElementSibling),n.setAttribute("id",i),o.setAttribute("for",i),n}(t,i,n),e}),{})}const w=document.createElement("template");function g(t){t.preventDefault(),this.graph?(this.saveParameters(),t=new CustomEvent("submitted")):t=new CustomEvent("submit"),this.dispatchEvent(t)}function p(t){const e=g.bind(t);t.applyThisSettings=e,t.form.addEventListener("submit",e)}function u(t){const e=new MutationObserver((function(){t.loadParameters()}));e.observe(t.graph,{attributes:!0}),t.observer=e}function v(t){t.observer.disconnect()}function $(t,e){e=document.getElementById(e),t.bindGraph(e)}w.innerHTML='<style>\n[data-id=palette] > label {\n min-width: 5em;\n display: inline-block;\n}\n</style>\n<form>\n <fieldset data-id="palette">\n <legend>Colour palette</legend>\n <input data-id="palette-grayscale" type="radio" name="palette" checked>\n <label>Grayscale</label>\n <input data-id="palette-jewels" type="radio" name="palette">\n <label>Jewels</label>\n <input data-id="palette-fiery" type="radio" name="palette">\n <label>Fiery</label>\n <input data-id="palette-rainbow" type="radio" name="palette">\n <label>Rainbow</label>\n <input data-id="palette-sharp" type="radio" name="palette">\n <label>Sharp</label>\n <br>\n <input data-id="palette-onion" type="radio" name="palette">\n <label>Onion</label>\n <input data-id="palette-ocean" type="radio" name="palette">\n <label>Ocean</label>\n <input data-id="palette-poison" type="radio" name="palette">\n <label>Poison</label>\n <input data-id="palette-garden" type="radio" name="palette">\n <label>Garden</label>\n <input data-id="palette-sky" type="radio" name="palette">\n <label>Sky</label>\n </fieldset>\n <fieldset>\n <legend>Resolution</legend>\n <label>Maximum iterations:</label>\n <input data-id="iteration-threshold" type="number" value="20">\n <label>Scale:</label>\n <input data-id="scale" type="number" value="1" step="any">\n </fieldset>\n <fieldset>\n <legend>Canvas size [px]</legend>\n <label>Width:</label>\n <input data-id="width" type="number" value="400">\n <label>Height:</label>\n <input data-id="height" type="number" value="400">\n </fieldset>\n <fieldset>\n <legend>Offset from the top-left corner [px]</legend>\n <label>X:</label>\n <input data-id="offset-x" type="number" value="0" step="any">\n <label>Y:</label>\n <input data-id="offset-y" type="number" value="0" step="any">\n </fieldset>\n <button type="submit" class="button">Apply</button>\n</form>';const k=["iteration-threshold","scale","width","height","offset-x","offset-y","palette-grayscale","palette-jewels","palette-fiery","palette-rainbow","palette-sharp","palette-onion","palette-ocean","palette-poison","palette-garden","palette-sky"];class f extends HTMLElement{constructor(){super();const t=h(this,w);this.parent=t;const e=t.lastElementChild;this.form=e,this.fields=d(e,k);const i=this.getAttribute("for");i&&$(this,i)}connectedCallback(){p(this),this.graph&&u(this)}disconnectedCallback(){var t;(t=this).form.removeEventListener("submit",t.applyThisSettings),this.graph&&v(this)}attributeChangedCallback(t,e,i){"for"===t&&$(this,i)}bindGraph(t){this.graph=t,this.applyThisSettings&&(this.observer&&v(this),u(this))}loadParameters(){const t=this.graph.getParameters();this.setParameters(t)}saveParameters(){const t=this.getParameters(),e=this.graph;e.suppressUpdates(),e.setParameters(t),e.resumeUpdates()}getParameters(){const t=this.form,e=this.fields;return{palette:t.querySelector('input[name="palette"]:checked').getAttribute("data-id").substr(8),iterationThreshold:+e["iteration-threshold"].value,scale:+e.scale.value,width:+e.width.value,height:+e.height.value,offsetX:+e["offset-x"].value,offsetY:+e["offset-y"].value}}setParameters({palette:t,iterationThreshold:e,scale:i,width:n,height:o,offsetX:s,offsetY:r}){const l=this.form,a=this.fields;l.querySelector(`[data-id=palette-${t}]`).checked=!0,a["iteration-threshold"].value=e,a.scale.value=i,a.width.value=n,a.height.value=o,a["offset-x"].value=s,a["offset-y"].value=r}}customElements.define("mandelbrot-set-form",class extends f{});const m=o(),b=new Worker(m);let x=0;function M(){const{iterationThreshold:t,palette:e}=this.parameters;this.palette=a({paletteType:e,colorCount:t})}function L(t){const{context:e,palette:i}=this,{width:n,height:o}=this.parameters,s=`Rendering ${n*o} pixels`;console.time(s);const r=e.createImageData(n,o),l=r.data;let a=0;for(let e=0;e<o;++e){for(let e=0;e<n;++e){const n=4*(a+e),o=3*(t[a+e]-1);l[n]=i[o],l[n+1]=i[o+1],l[n+2]=i[o+2],l[n+3]=255}a+=n}e.putImageData(r,0,0),console.timeEnd(s)}function y({data:t}){const{number:e,buffer:i}=t;if(e===this.number){const t=new Uint8Array(i);L.call(this,t)}}function j(){b.postMessage(this.parameters)}function B(){const t=this.getParameters();t.number=this.number,t.type=this.type,this.parameters=t}function C(){const t=document.createElement("canvas"),e=this.getAttribute("width")||400,i=this.getAttribute("height")||400;t.setAttribute("width",e),t.setAttribute("height",i),this.canvas=t,this.context=t.getContext("2d",{alpha:!1})}function A(){const{width:t,height:e}=this.parameters;this.context.clearRect(0,0,t,e)}const Z={palette:"palette","iteration-threshold":"iterationThreshold",scale:"scale",width:"width",height:"height","offset-x":"offsetX","offset-y":"offsetY"};class E extends HTMLElement{constructor(t){super(),this.type=t,this.number=++x,C.call(this),this.attachShadow({mode:"open"}).appendChild(this.canvas),this.updatesEnabled=!0}connectedCallback(){this.receiveThisGraph=y.bind(this),b.addEventListener("message",this.receiveThisGraph),B.call(this),A.call(this),"false"!==this.getAttribute("auto-render")&&(M.call(this),j.call(this))}disconnectedCallback(){b.removeEventListener("message",this.receiveThisGraph)}attributeChangedCallback(t,e,i){const n=this.parameters;if(n){const e=Z[t];e&&n[e].toString()!==i.toString()&&("width"!==t&&"height"!==t||this.canvas.setAttribute(t,i),this.updatesEnabled?this.render():this.updatesPending=!0)}}getParameters(){return{palette:this.getAttribute("palette")||"grayscale",iterationThreshold:+(this.getAttribute("iteration-threshold")||20),scale:+(this.getAttribute("scale")||1),width:+(this.getAttribute("width")||400),height:+(this.getAttribute("height")||400),offsetX:+(this.getAttribute("offset-x")||0),offsetY:+(this.getAttribute("offset-y")||0)}}setParameters({palette:t,iterationThreshold:e,scale:i,width:n,height:o,offsetX:s,offsetY:r}){this.setAttribute("palette",t),this.setAttribute("width",n),this.setAttribute("height",o),this.setAttribute("iteration-threshold",e),this.setAttribute("offset-x",s),this.setAttribute("offset-y",r),this.setAttribute("scale",i)}render(){B.call(this),M.call(this),j.call(this)}suppressUpdates(){this.updatesEnabled=!1}resumeUpdates(){this.updatesPending&&(this.render(),this.updatesPending=!1),this.updatesEnabled=!0}}const z=["palette","iteration-threshold","scale","width","height","offset-x","offset-y"];customElements.define("mandelbrot-set-graph",class extends E{constructor(){super("mandelbrot")}static get observedAttributes(){return z}});const P=document.createElement("template");P.innerHTML='<fieldset>\n <legend>Constant for the Julia set [X + Yi]</legend>\n <label>X:</label>\n <input data-id="k-r" type="number" value="0.4" step="any">\n <label>Y:</label>\n <input data-id="k-i" type="number" value="0.4" step="any">\n</fieldset>';const T=["k-r","k-i"];customElements.define("julia-set-form",class extends f{constructor(){super();const t=this.form;t.insertBefore(P.content.cloneNode(!0),t.firstElementChild);const e=d(t,T);Object.assign(this.fields,e)}getParameters(){const t=super.getParameters(),e=this.fields;return t.kr=+e["k-r"].value,t.ki=+e["k-i"].value,t}setParameters(t){super.setParameters(t);const e=this.fields;e["k-r"].value=t.kr,e["k-i"].value=t.ki}}),function(){const t={"ultra-light":"1.5625%",thin:"3.125%",light:"4.6875%",regular:"6.25%",medium:"7.8125%",bold:"9.375%",heavy:"10.9375%"},e={round:{linejoin:"round",linecap:"round"},bevel:{linejoin:"bevel",linecap:"butt"},miter:{linejoin:"miter",linecap:"butt"}},i={size:"32",weight:"regular",style:"round"};class n extends HTMLElement{constructor(){var t;super(),t={size:this.getAttribute("size")||i.size,weight:this.getAttribute("weight")||i.weight,style:this.getAttribute("style")||i.style},Object.assign(i,t)}}customElements.define("bytesize-icon-defaults",n);class o extends HTMLElement{constructor(){super();const n=this.getAttribute("size")||i.size,o=t[this.getAttribute("weight")]||t[i.weight],s=e[this.getAttribute("style")]||e[i.style],{linecap:r,linejoin:l}=s,a={activity:`<svg id="i-activity" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M4 16 L11 16 14 29 18 3 21 16 28 16" />\n</svg>`,alert:`<svg id="i-alert" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M16 3 L30 29 2 29 Z M16 11 L16 19 M16 23 L16 25" />\n</svg>`,archive:`<svg id="i-archive" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M4 10 L4 28 28 28 28 10 M2 4 L2 10 30 10 30 4 Z M12 15 L20 15" />\n</svg>`,"arrow-bottom":`<svg id="i-arrow-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M6 22 L16 30 26 22 M16 30 L16 2" />\n</svg>`,"arrow-left":`<svg id="i-arrow-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M10 6 L2 16 10 26 M2 16 L30 16" />\n</svg>`,"arrow-right":`<svg id="i-arrow-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M22 6 L30 16 22 26 M30 16 L2 16" />\n</svg>`,"arrow-top":`<svg id="i-arrow-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M6 10 L16 2 26 10 M16 2 L16 30" />\n</svg>`,backwards:`<svg id="i-backwards" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M16 2 L2 16 16 30 16 16 30 30 30 2 16 16 Z" />\n</svg>`,bag:`<svg id="i-bag" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M5 9 L5 29 27 29 27 9 Z M10 9 C10 9 10 3 16 3 22 3 22 9 22 9" />\n</svg>`,ban:`<svg id="i-ban" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <circle cx="16" cy="16" r="14" />\n <path d="M6 6 L26 26" />\n</svg>`,bell:`<svg id="i-bell" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M8 17 C8 12 9 6 16 6 23 6 24 12 24 17 24 22 27 25 27 25 L5 25 C5 25 8 22 8 17 Z M20 25 C20 25 20 29 16 29 12 29 12 25 12 25 M16 3 L16 6" />\n</svg>`,book:`<svg id="i-book" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M16 7 C16 7 9 1 2 6 L2 28 C9 23 16 28 16 28 16 28 23 23 30 28 L30 6 C23 1 16 7 16 7 Z M16 7 L16 28" />\n</svg>`,bookmark:`<svg id="i-bookmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M6 2 L26 2 26 30 16 20 6 30 Z" />\n</svg>`,calendar:`<svg id="i-calendar" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M2 6 L2 30 30 30 30 6 Z M2 15 L30 15 M7 3 L7 9 M13 3 L13 9 M19 3 L19 9 M25 3 L25 9" />\n</svg>`,camera:`<svg id="i-camera" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M2 8 L 9 8 12 4 20 4 23 8 30 8 30 26 2 26 Z" />\n <circle cx="16" cy="16" r="5" />\n</svg>`,"caret-bottom":`<svg id="i-caret-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M30 10 L16 26 2 10 Z" />\n</svg>`,"caret-left":`<svg id="i-caret-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M22 30 L6 16 22 2 Z" />\n</svg>`,"caret-right":`<svg id="i-caret-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M10 30 L26 16 10 2 Z" />\n</svg>`,"caret-top":`<svg id="i-caret-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M30 22 L16 6 2 22 Z" />\n</svg>`,cart:`<svg id="i-cart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M6 6 L30 6 27 19 9 19 M27 23 L10 23 5 2 2 2" />\n <circle cx="25" cy="27" r="2" />\n <circle cx="12" cy="27" r="2" />\n</svg>`,checkmark:`<svg id="i-checkmark" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M2 20 L12 28 30 4" />\n</svg>`,"chevron-bottom":`<svg id="i-chevron-bottom" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M30 12 L16 24 2 12" />\n</svg>`,"chevron-left":`<svg id="i-chevron-left" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M20 30 L8 16 20 2" />\n</svg>`,"chevron-right":`<svg id="i-chevron-right" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M12 30 L24 16 12 2" />\n</svg>`,"chevron-top":`<svg id="i-chevron-top" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M30 20 L16 8 2 20" />\n</svg>`,clipboard:`<svg id="i-clipboard" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M12 2 L12 6 20 6 20 2 12 2 Z M11 4 L6 4 6 30 26 30 26 4 21 4" />\n</svg>`,clock:`<svg id="i-clock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <circle cx="16" cy="16" r="14" />\n <path d="M16 8 L16 16 20 20" />\n</svg>`,close:`<svg id="i-close" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M2 30 L30 2 M30 30 L2 2" />\n</svg>`,code:`<svg id="i-code" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M10 9 L3 17 10 25 M22 9 L29 17 22 25 M18 7 L14 27" />\n</svg>`,compose:`<svg id="i-compose" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M27 15 L27 30 2 30 2 5 17 5 M30 6 L26 2 9 19 7 25 13 23 Z M22 6 L26 10 Z M9 19 L13 23 Z" />\n</svg>`,creditcard:`<svg id="i-creditcard" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M2 7 L2 25 30 25 30 7 Z M5 18 L9 18 M5 21 L11 21" />\n <path d="M2 11 L2 13 30 13 30 11 Z" fill="currentColor" />\n</svg>`,desktop:`<svg id="i-desktop" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M10 29 C10 29 10 24 16 24 22 24 22 29 22 29 L10 29 Z M2 6 L2 23 30 23 30 6 2 6 Z" />\n</svg>\n`,download:`<svg id="i-download" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 26 L16 30 21 26 M16 16 L16 30" />\n</svg>`,edit:`<svg id="i-edit" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M30 7 L25 2 5 22 3 29 10 27 Z M21 6 L26 11 Z M5 22 L10 27 Z" />\n</svg>`,eject:`<svg id="i-eject" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M30 18 L16 5 2 18Z M2 25 L30 25" />\n</svg>`,"ellipsis-horizontal":`<svg id="i-ellipsis-horizontal" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <circle cx="7" cy="16" r="2" />\n <circle cx="16" cy="16" r="2" />\n <circle cx="25" cy="16" r="2" />\n</svg>`,"ellipsis-vertical":`<svg id="i-ellipsis-vertical" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <circle cx="16" cy="7" r="2" />\n <circle cx="16" cy="16" r="2" />\n <circle cx="16" cy="25" r="2" />\n</svg>`,end:`<svg id="i-end" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M24 2 L24 16 10 2 10 30 24 16 24 30" />\n</svg>`,export:`<svg id="i-export" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M28 22 L28 30 4 30 4 22 M16 4 L16 24 M8 12 L16 4 24 12" />\n</svg>`,external:`<svg id="i-external" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M14 9 L3 9 3 29 23 29 23 18 M18 4 L28 4 28 14 M28 4 L14 18" />\n</svg>`,eye:`<svg id="i-eye" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <circle cx="17" cy="15" r="1" />\n <circle cx="16" cy="16" r="6" />\n <path d="M2 16 C2 16 7 6 16 6 25 6 30 16 30 16 30 16 25 26 16 26 7 26 2 16 2 16 Z" />\n</svg>`,file:`<svg id="i-file" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M6 2 L6 30 26 30 26 10 18 2 Z M18 2 L18 10 26 10" />\n</svg>`,fire:`<svg id="i-fire" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M15 30 C0 30 15 13 12 3 28 13 32 30 15 30 Z M17 30 C10 30 17 20 17 20 17 20 24 30 17 30 Z" />\n</svg>`,flag:`<svg id="i-flag" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M6 2 L6 30 M6 6 L26 6 20 12 26 18 6 18" />\n</svg>`,"folder-open":`<svg id="i-folder-open" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M4 28 L28 28 30 12 14 12 10 8 2 8 Z M28 12 L28 4 4 4 4 8" />\n</svg>`,folder:`<svg id="i-folder" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M2 26 L30 26 30 7 14 7 10 4 2 4 Z M30 12 L2 12" />\n</svg>`,forwards:`<svg id="i-forwards" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M16 2 L30 16 16 30 16 16 2 30 2 2 16 16 Z" /> \n</svg>`,gift:`<svg id="i-gift" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M4 14 L4 30 28 30 28 14 M2 9 L2 14 30 14 30 9 Z M16 9 C 16 9 14 0 8 3 2 6 16 9 16 9 16 9 18 0 24 3 30 6 16 9 16 9 M16 9 L16 30" />\n</svg>`,github:`<svg id="i-github" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="${n}" height="${n}">\n <path stroke-width="0" fill="currentColor" d="M32 0 C14 0 0 14 0 32 0 53 19 62 22 62 24 62 24 61 24 60 L24 55 C17 57 14 53 13 50 13 50 13 49 11 47 10 46 6 44 10 44 13 44 15 48 15 48 18 52 22 51 24 50 24 48 26 46 26 46 18 45 12 42 12 31 12 27 13 24 15 22 15 22 13 18 15 13 15 13 20 13 24 17 27 15 37 15 40 17 44 13 49 13 49 13 51 20 49 22 49 22 51 24 52 27 52 31 52 42 45 45 38 46 39 47 40 49 40 52 L40 60 C40 61 40 62 42 62 45 62 64 53 64 32 64 14 50 0 32 0 Z" />\n</svg>`,heart:`<svg id="i-heart" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M4 16 C1 12 2 6 7 4 12 2 15 6 16 8 17 6 21 2 26 4 31 6 31 12 28 16 25 20 16 28 16 28 16 28 7 20 4 16 Z" />\n</svg>`,home:`<svg id="i-home" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M12 20 L12 30 4 30 4 12 16 2 28 12 28 30 20 30 20 20 Z" />\n</svg>`,import:`<svg id="i-import" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M28 22 L28 30 4 30 4 22 M16 4 L16 24 M8 16 L16 24 24 16" />\n</svg>`,inbox:`<svg id="i-inbox" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M2 15 L2 25 30 25 30 15 26 7 6 7 Z M2 15 L10 15 C10 15 11 20 16 20 21 20 22 15 22 15 L30 15" />\n</svg>`,info:`<svg id="i-info" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M16 14 L16 23 M16 8 L16 10" />\n <circle cx="16" cy="16" r="14" />\n</svg>`,lightning:`<svg id="i-lightning" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M18 13 L26 2 8 13 14 19 6 30 24 19 Z" />\n</svg>`,link:`<svg id="i-link" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M18 8 C18 8 24 2 27 5 30 8 29 12 24 16 19 20 16 21 14 17 M14 24 C14 24 8 30 5 27 2 24 3 20 8 16 13 12 16 11 18 15" />\n</svg>`,location:`<svg id="i-location" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <circle cx="16" cy="11" r="4" />\n <path d="M24 15 C21 22 16 30 16 30 16 30 11 22 8 15 5 8 10 2 16 2 22 2 27 8 24 15 Z" />\n</svg>`,lock:`<svg id="i-lock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M5 15 L5 30 27 30 27 15 Z M9 15 C9 9 9 5 16 5 23 5 23 9 23 15 M16 20 L16 23" />\n <circle cx="16" cy="24" r="1" />\n</svg>`,mail:`<svg id="i-mail" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M2 26 L30 26 30 6 2 6 Z M2 6 L16 16 30 6" />\n</svg>`,menu:`<svg id="i-menu" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M4 8 L28 8 M4 16 L28 16 M4 24 L28 24" />\n</svg>`,message:`<svg id="i-msg" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M2 4 L30 4 30 22 16 22 8 29 8 22 2 22 Z" />\n</svg>`,microphone:`<svg id="i-microphone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M16 2 C12 2 12 6 12 6 L12 16 C12 16 12 20 16 20 20 20 20 16 20 16 L20 6 C20 6 20 2 16 2 Z M8 17 C8 17 8 24 16 24 24 24 24 17 24 17 M13 29 L19 29 M16 24 L16 29" />\n</svg>`,minus:`<svg id="i-minus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M2 16 L30 16" />\n</svg>`,mobile:`<svg id="i-mobile" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M21 2 L11 2 C10 2 9 3 9 4 L9 28 C9 29 10 30 11 30 L21 30 C22 30 23 29 23 28 L23 4 C23 3 22 2 21 2 Z M9 5 L23 5 M9 27 L23 27" />\n</svg>`,move:`<svg id="i-move" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M3 16 L29 16 M16 3 L16 29 M12 7 L16 3 20 7 M12 25 L16 29 20 25 M25 12 L29 16 25 20 M7 12 L3 16 7 20" />\n</svg>`,music:`<svg id="i-music" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M11 25 L11 6 24 3 24 23 M11 13 L24 10" />\n <ellipse cx="7" cy="25" rx="4" ry="5" />\n <ellipse cx="20" cy="23" rx="4" ry="5" />\n</svg>`,mute:`<svg id="i-mute" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M20 16 C20 8 15 2 15 2 L8 10 2 10 2 22 8 22 15 30 C15 30 20 24 20 16 Z" />\n</svg>`,options:`<svg id="i-options" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M28 6 L4 6 M28 16 L4 16 M28 26 L4 26 M24 3 L24 9 M8 13 L8 19 M20 23 L20 29" />\n</svg>`,paperclip:`<svg id="i-paperclip" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M10 9 L10 24 C10 28 13 30 16 30 19 30 22 28 22 24 L22 6 C22 3 20 2 18 2 16 2 14 3 14 6 L14 23 C14 24 15 25 16 25 17 25 18 24 18 23 L18 9" />\n</svg>`,pause:`<svg id="i-pause" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M23 2 L23 30 M9 2 L9 30" />\n</svg>`,photo:`<svg id="i-photo" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M20 24 L12 16 2 26 2 2 30 2 30 24 M16 20 L22 14 30 22 30 30 2 30 2 24" />\n <circle cx="10" cy="9" r="3" />\n</svg>`,play:`<svg id="i-play" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M10 2 L10 30 24 16 Z" />\n</svg>`,plus:`<svg id="i-plus" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M16 2 L16 30 M2 16 L30 16" />\n</svg>`,portfolio:`<svg id="i-portfolio" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M29 17 L29 28 3 28 3 17 M2 8 L30 8 30 16 C30 16 24 20 16 20 8 20 2 16 2 16 L2 8 Z M16 22 L16 18 M20 8 C20 8 20 4 16 4 12 4 12 8 12 8" />\n</svg>`,print:`<svg id="i-print" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M7 25 L2 25 2 9 30 9 30 25 25 25 M7 19 L7 30 25 30 25 19 Z M25 9 L25 2 7 2 7 9 M22 14 L25 14" />\n</svg>`,reload:`<svg id="i-reload" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M29 16 C29 22 24 29 16 29 8 29 3 22 3 16 3 10 8 3 16 3 21 3 25 6 27 9 M20 10 L27 9 28 2" />\n</svg>`,reply:`<svg id="i-reply" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M10 6 L3 14 10 22 M3 14 L18 14 C26 14 30 18 30 26" />\n</svg>`,search:`<svg id="i-search" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <circle cx="14" cy="14" r="12" />\n <path d="M23 23 L30 30" />\n</svg>`,send:`<svg id="i-send" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M2 16 L30 2 16 30 12 20 Z M30 2 L12 20" />\n</svg>`,settings:`<svg id="i-settings" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M13 2 L13 6 11 7 8 4 4 8 7 11 6 13 2 13 2 19 6 19 7 21 4 24 8 28 11 25 13 26 13 30 19 30 19 26 21 25 24 28 28 24 25 21 26 19 30 19 30 13 26 13 25 11 28 8 24 4 21 7 19 6 19 2 Z" />\n <circle cx="16" cy="16" r="4" />\n</svg>`,"sign-in":`<svg id="i-signin" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M3 16 L23 16 M15 8 L23 16 15 24 M21 4 L29 4 29 28 21 28" />\n</svg>\n`,"sign-out":`<svg id="i-signout" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M28 16 L8 16 M20 8 L28 16 20 24 M11 28 L3 28 3 4 11 4" />\n</svg>`,star:`<svg id="i-star" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M16 2 L20 12 30 12 22 19 25 30 16 23 7 30 10 19 2 12 12 12 Z" />\n</svg>`,start:`<svg id="i-start" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M8 2 L8 16 22 2 22 30 8 16 8 30" />\n</svg>`,tag:`<svg id="i-tag" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <circle cx="24" cy="8" r="2" />\n <path d="M2 18 L18 2 30 2 30 14 14 30 Z" />\n</svg>`,telephone:`<svg id="i-telephone" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M3 12 C3 5 10 5 16 5 22 5 29 5 29 12 29 20 22 11 22 11 L10 11 C10 11 3 20 3 12 Z M11 14 C11 14 6 19 6 28 L26 28 C26 19 21 14 21 14 L11 14 Z" />\n <circle cx="16" cy="21" r="4" />\n</svg>`,trash:`<svg id="i-trash" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M28 6 L6 6 8 30 24 30 26 6 4 6 M16 12 L16 24 M21 12 L20 24 M11 12 L12 24 M12 6 L13 2 19 2 20 6" />\n</svg>`,twitter:`<svg id="i-twitter" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="${n}" height="${n}">\n <path stroke-width="0" fill="currentColor" d="M60 16 L54 17 L58 12 L51 14 C42 4 28 15 32 24 C16 24 8 12 8 12 C8 12 2 21 12 28 L6 26 C6 32 10 36 17 38 L10 38 C14 46 21 46 21 46 C21 46 15 51 4 51 C37 67 57 37 54 21 Z" />\n</svg>`,unlock:`<svg id="i-unlock" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M5 15 L5 30 27 30 27 15 Z M9 15 C9 7 9 3 16 3 23 3 23 8 23 9 M16 20 L16 23" />\n <circle cx="16" cy="24" r="1" />\n</svg>`,upload:`<svg id="i-upload" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M9 22 C0 23 1 12 9 13 6 2 23 2 22 10 32 7 32 23 23 22 M11 18 L16 14 21 18 M16 14 L16 29" />\n</svg>`,user:`<svg id="i-user" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M22 11 C22 16 19 20 16 20 13 20 10 16 10 11 10 6 12 3 16 3 20 3 22 6 22 11 Z M4 30 L28 30 C28 21 22 20 16 20 10 20 4 21 4 30 Z" />\n</svg>`,video:`<svg id="i-video" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M22 13 L30 8 30 24 22 19 Z M2 8 L2 24 22 24 22 8 Z" />\n</svg>`,volume:`<svg id="i-volume" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M20 16 C20 8 15 2 15 2 L8 10 2 10 2 22 8 22 15 30 C15 30 20 24 20 16 Z M21 2 C21 2 25 6 25 16 25 26 21 30 21 30 M27 4 C27 4 30 8 30 16 30 24 27 28 27 28" />\n</svg>`,work:`<svg id="i-work" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="${n}" height="${n}" fill="none" stroke="currentcolor" stroke-linecap="${r}" stroke-linejoin="${l}" stroke-width="${o}">\n <path d="M30 8 L2 8 2 26 30 26 Z M20 8 C20 8 20 4 16 4 12 4 12 8 12 8 M8 26 L8 8 M24 26 L24 8" />\n</svg>`}[this.getAttribute("name")];this.innerHTML=a}}customElements.define("bytesize-icon",o),o.setDefaultAttributes=function(t){Object.assign(i,t)},window.BytesizeIconDefaults=n,window.BytesizeIcon=o,o.names=["activity","alert","archive","arrow-bottom","arrow-left","arrow-right","arrow-top","backwards","bag","ban","bell","book","bookmark","calendar","camera","caret-bottom","caret-left","caret-right","caret-top","cart","checkmark","chevron-bottom","chevron-left","chevron-right","chevron-top","clipboard","clock","close","code","compose","creditcard","desktop","download","edit","eject","ellipsis-horizontal","ellipsis-vertical","end","export","external","eye","file","fire","flag","folder-open","folder","forwards","gift","github","heart","home","import","inbox","info","lightning","link","location","lock","mail","menu","message","microphone","minus","mobile","move","music","mute","options","paperclip","pause","photo","play","plus","portfolio","print","reload","reply","search","send","settings","sign-in","sign-out","star","start","tag","telephone","trash","twitter","unlock","upload","user","video","volume","work"]}();const S=document.createElement("template");function H(t,e){let i;i=1===e?20:e<50?20+8*e/5:2*e,t.setAttribute("iteration-threshold",i)}S.innerHTML='<bytesize-icon-defaults size="16" weight="bold"></bytesize-icon-defaults>\n<div style="display: flex">\n <div data-name="panning" class="button-group">\n <button data-name="pan-up" type="button" title="Pan Up">\n <bytesize-icon name="arrow-top"></bytesize-icon>\n </button>\n <button data-name="pan-down" type="button" title="Pan Down">\n <bytesize-icon name="arrow-bottom"></bytesize-icon>\n </button>\n <button data-name="pan-left" type="button" title="Pan Left">\n <bytesize-icon name="arrow-left"></bytesize-icon>\n </button>\n <button data-name="pan-right" type="button" title="Pan Right">\n <bytesize-icon name="arrow-right"></bytesize-icon>\n </button>\n </div>\n <div data-name="zooming" class="button-group">\n <button data-name="zoom-in" type="button" title="Zoom In">\n <bytesize-icon name="plus"></bytesize-icon>\n </button>\n <button data-name="zoom-out" type="button" title="Zoom Out">\n <bytesize-icon name="minus"></bytesize-icon>\n </button>\n <button data-name="reset-zoom" type="button" title="Reset Zoom">\n <bytesize-icon name="move"></bytesize-icon>\n </button>\n </div>\n</div>\n<div data-name="settings" class="button-group" style="margin-left: auto">\n <button data-name="open-settings" type="button" title="Open Settings">\n <bytesize-icon name="settings"></bytesize-icon>\n </button>\n</div>';const U={"pan-up":function(){const t=this.graph,e=+(t.getAttribute("offset-y")||0);if(e>0){const i=+(t.getAttribute("scale")||1);t.setAttribute("offset-y",e-.5/i)}},"pan-down":function(){const t=this.graph,e=+(t.getAttribute("offset-y")||0);if(e<2){const i=+(t.getAttribute("scale")||1);t.setAttribute("offset-y",e+.5/i)}},"pan-left":function(){const t=this.graph,e=+(t.getAttribute("offset-x")||0);if(e>0){const i=+(t.getAttribute("scale")||1);t.setAttribute("offset-x",e-.5/i)}},"pan-right":function(){const t=this.graph,e=+(t.getAttribute("offset-x")||0);if(e<2){const i=+(t.getAttribute("scale")||1);t.setAttribute("offset-x",e+.5/i)}},"zoom-in":function(){const t=this.graph;let e=+(t.getAttribute("scale")||1);if(e<100){t.suppressUpdates();const i=+(t.getAttribute("offset-x")||0);t.setAttribute("offset-x",i+1/e);const n=+(t.getAttribute("offset-y")||0);t.setAttribute("offset-y",n+1/e),e+=1===e?4:5,t.setAttribute("scale",e),H(t,e),t.resumeUpdates()}},"zoom-out":function(){const t=this.graph;let e=+(t.getAttribute("scale")||1);if(e>1){e-=5===e?4:5,t.suppressUpdates();const i=+(t.getAttribute("offset-x")||0);t.setAttribute("offset-x",i-1/e);const n=+(t.getAttribute("offset-y")||0);t.setAttribute("offset-y",n-1/e),t.setAttribute("scale",e),H(t,e),t.resumeUpdates()}},"reset-zoom":function(){const t=this.graph;t.suppressUpdates(),t.setAttribute("scale",1),t.setAttribute("offset-x",0),t.setAttribute("offset-y",0),H(t,1),t.resumeUpdates()},"open-settings":function(){const t=new CustomEvent("open-settings");this.dispatchEvent(t)}},q=Object.keys(U),G=["panning","zooming","settings"];function O(t,e){e=document.getElementById(e),t.bindGraph(e)}customElements.define("mandelbrot-set-toolbar",class extends HTMLElement{constructor(){super(),this.style.display="flex";const t=h(this,S);this.parent=t;const e=this.getAttribute("for");e&&O(this,e)}connectedCallback(){var t;t=this,q.forEach((function(e){const i=this.querySelector(`[data-name=${e}]`);!function(t,e,i){const n=i.bind(t);e.clickHandler=n,e.addEventListener("click",n)}(t,i,U[e])}),t.parent)}disconnectedCallback(){var t;t=this,q.forEach((function(t){!function(t){t.removeEventListener("click",t.clickHandler)}(this.querySelector(`[data-name=${t}]`))}),t.parent)}attributeChangedCallback(t,e,i){"for"===t?O(this,i):G.includes(t)&&function(t,e,i){if("false"===i){const i=`[data-name=${e}]`;t.parent.querySelector(i).style.display="none"}}(this,t,i)}bindGraph(t){this.graph=t}static get observedAttributes(){return G}});const X=z.concat("kr","ki");function Y(t){const e=document.createElement("template");return e.innerHTML=`<style>\nmandelbrot-set-toolbar {\n position: absolute;\n bottom: .5em;\n left: 0;\n width: 100%;\n}\n</style>\n<dialog>\n <${t}-set-form></${t}-set-form>\n</dialog>\n<div style="position: relative; width: fit-content;">\n <${t}-set-graph></${t}-set-graph>\n <mandelbrot-set-toolbar></mandelbrot-set-toolbar>\n</div>`,e}customElements.define("julia-set-graph",class extends E{constructor(){super("julia")}getParameters(){const t=super.getParameters();return t.kr=+(this.getAttribute("kr")||.4),t.ki=+(this.getAttribute("ki")||.4),t}setParameters(t){super.setParameters(t);const{kr:e,ki:i}=t;this.setAttribute("kr",e),this.setAttribute("ki",i)}static get observedAttributes(){return X}});const I={julia:Y("julia"),mandelbrot:Y("mandelbrot")};function D(t,e,i){t.eventHandler=i,t.addEventListener(e,i)}function R(t,e){t.removeEventListener(e,t.eventHandler)}const N=["palette","iteration-threshold","scale","width","height","offset-x","offset-y","kr","ki"],J=["panning","zooming","settings"];function W(t,e){const i=this.getAttribute(e);null!=i&&t.setAttribute(e,i)}customElements.define("mandelbrot-set",class extends HTMLElement{constructor(){super();const t=this.getAttribute("type")||"mandelbrot";this.type=t,function(t,e){const i=e.querySelector(`${t.type}-set-graph`);i.suppressUpdates(),N.forEach(W.bind(t,i)),i.resumeUpdates(),e.querySelector(`${t.type}-set-form`).bindGraph(i);const n=e.querySelector("mandelbrot-set-toolbar");n.bindGraph(i),J.forEach(W.bind(t,n))}(this,h(this,I[t]))}connectedCallback(){!function(t){const e=t.querySelector("mandelbrot-set-toolbar"),i=t.querySelector("dialog"),n=t.querySelector(`${t.type}-set-form`);i.showModal&&(t.toolbar=e,t.form=n,D(e,"open-settings",(function(){i.showModal()})),D(n,"submitted",(function(){i.close()})))}(this)}disconnectedCallback(){!function(t){const e=t.toolbar;e&&(R(e,"open-settings"),R(t.form,"submitted"))}(this)}});export{f as SetFormElement,E as SetGraphElement,d as ensureUniqueFieldIds,a as generatePalette,o as getComputerUrl,t as hsl2rgb,e as hsv2rgb,h as initializeElement,z as observedAttributes}; //# sourceMappingURL=mandelbrot-all.min.js.map