diff --git a/css/main.css b/css/main.css
index 845e4f8..602b559 100644
--- a/css/main.css
+++ b/css/main.css
@@ -9,7 +9,6 @@
html {
- background-color: var(--bg-color);
color: var(--text-color);
font-size: 1em;
line-height: 1.4;
@@ -62,11 +61,23 @@ html {
}
#bg {
- z-index: -1;
+ z-index: -2;
overflow: hidden;
position: fixed;
+ min-width: 100%;
+ min-height: 100%;
+ background: rgb(34,34,51);
+ background: linear-gradient(180deg, rgba(34,34,51,1) 0%, rgba(34,34,51,1) 70%, rgba(171, 92, 102,1) 120%);
+}
+
+#bg img {
+ z-index: -1;
+ position: fixed;
+ /* max-width: 100%;
+ max-height: 100%; */
}
+
#desk {
/* display: none; */
display: flex;
@@ -285,6 +296,15 @@ input[type=range]#crossfader::-ms-thumb {
/*Needed to keep the Edge thumb centred*/
}
+
+.footer a, .footer a:visited {
+ color: var(--text-color);
+ text-decoration: none;
+}
+
+.footer span {
+ cursor: pointer;
+}
/* ==========================================================================
Helper classes
========================================================================== */
diff --git a/img/stars_1920x1080.svg b/img/stars_1920x1080.svg
new file mode 100644
index 0000000..659cd24
--- /dev/null
+++ b/img/stars_1920x1080.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/img/stars_2560x1440.svg b/img/stars_2560x1440.svg
new file mode 100644
index 0000000..50c075c
--- /dev/null
+++ b/img/stars_2560x1440.svg
@@ -0,0 +1 @@
+
\ No newline at end of file
diff --git a/index.html b/index.html
index 5d2f141..458af08 100644
--- a/index.html
+++ b/index.html
@@ -24,7 +24,9 @@
-
+
+
+
-->
- YTDJ!
+ Mix like a pro youtube DJ!
+
-
+
-
+
diff --git a/js/main.js b/js/main.js
index ba25657..e3c1d11 100644
--- a/js/main.js
+++ b/js/main.js
@@ -201,3 +201,20 @@ function componentToHex(c) {
}
// Thumbnails: https://i1.ytimg.com/vi/{trackID}/mqdefault.jpg
+if (typeof variable !== 'undefined') {
+ let separatorSpan = document.createElement('span');
+ separatorSpan.innerHTML = ' - ';
+ document.getElementById('shooting-stars-enable').after(separatorSpan);
+ document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
+}
+document.getElementById('shooting-stars-enable').addEventListener('click', () => {
+ if (processingIsOn) {
+ processingSketch.frameRate(0);
+ document.getElementById('shooting-stars-enable').innerHTML = 'Enable shooting stars⭐️';
+ processingIsOn = false;
+ } else {
+ processingSketch.frameRate(24);
+ document.getElementById('shooting-stars-enable').innerHTML = 'Disable shooting stars⭐️';
+ processingIsOn = true;
+ }
+});
diff --git a/js/sketch.js b/js/sketch.js
index e80df6e..70a26dd 100644
--- a/js/sketch.js
+++ b/js/sketch.js
@@ -1,3 +1,5 @@
+// Another possible inspiration: https://www.khanacademy.org/computer-programming/twinkle-twinkle/6280832014565376
+
let sketch = function(p) {
let bgCol = hexToRgb('#222233');
let starCol = [hexToRgb('#ffcdff'), hexToRgb('#804442'), hexToRgb('#ffff7d')]
@@ -16,22 +18,25 @@ let sketch = function(p) {
let time = 0;
+ let sketchLoop = 0;
+
p.setup = function(){
p.frameRate(24);
currentWidth = p.windowWidth;
currentHeight = p.windowHeight;
- p.createCanvas(currentWidth, currentHeight);
+ // p.createCanvas(currentWidth, currentHeight);
+ p.createCanvas(1920, 1080, p.SVG) // To export the result to SVG
+ p.noLoop(); // To export the result to SVG
bgInit();
mover = new Mover();
-
- // p.noLoop();
}
p.draw = function(){
- p.background(bgCol);
+ // p.background(bgCol);
+ p.clear();
p.image(bg, 0, 0);
@@ -52,6 +57,8 @@ let sketch = function(p) {
time += 1;
+ p.save(); // To export the result to SVG
+
} //End of draw()
class Stars {
@@ -118,15 +125,10 @@ let sketch = function(p) {
this.acc.set(0, 0);
this.vel.set(0, 0);
this.pos.x = p.random(p.round(0.05 * p.width), p.round(0.95 * p.width));
- this.pos.y = p.random(0, p.round(p.height*0.3));
+ this.pos.y = p.random(0, p.round(p.height*0.45));
let gravity = p.createVector(0, 0.02);
this.applyForce(gravity);
-
- // this.pos = p.createVector(200, 200);
-
- // this.acc.x = p.random(7, 15) * (1 + p.random(0, 1) * -2);
- // this.acc.y = p.random(0, 3) - 6;
}
@@ -167,11 +169,6 @@ let sketch = function(p) {
}
show() {
- // p.stroke(255);
- // p.strokeWeight(2);
- // p.fill(255, 100);
- // p.ellipse(this.pos.x, this.pos.y, this.r * 2);
-
p.strokeWeight(this.size);
// p.stroke(this.color);
p.stroke(255, p.constrain(305-this.lifespan, 0, 255), 0, 255-0.7*this.lifespan);
@@ -181,10 +178,11 @@ let sketch = function(p) {
}
p.windowResized = function() {
- //Redraw only if new size if bigger than previously
let newWidth = p.windowWidth;
let newHeight = p.windowHeight;
- if (newWidth > currentWidth || newHeight > currentHeight) {
+ //Redraw only if new size if bigger than previously
+ // if (newWidth > currentWidth || newHeight > currentHeight) {
+ if (true) {
currentWidth = newWidth;
currentHeight = newHeight;
@@ -197,8 +195,9 @@ let sketch = function(p) {
function bgInit() {
nbStars = calcNumberOfStars();
bg = p.createGraphics(p.width, p.height);
- bg.background(bgCol);
- setGradient(0, 0, p.width, p.height, bgCol, starCol[1]);
+ // bg.background(bgCol);
+ // setGradient(0, 0, p.width, p.height, bgCol, starCol[1]);
+ // bg.background(0, 0, 0, 0);
stars = new Stars(nbStars);
stars.make();
@@ -240,4 +239,6 @@ let sketch = function(p) {
}
};
-new p5(sketch, 'bg');
+let processingSketch = new p5(sketch, 'bg');
+
+let processingIsOn = true;
diff --git a/js/vendor/p5.svg.cjs.min.js b/js/vendor/p5.svg.cjs.min.js
new file mode 100644
index 0000000..f872516
--- /dev/null
+++ b/js/vendor/p5.svg.cjs.min.js
@@ -0,0 +1,22 @@
+/**
+ * Minified by jsDelivr using Terser v5.10.0.
+ * Original file: /npm/p5.js-svg@1.3.3/dist/p5.svg.cjs.js
+ *
+ * Do NOT use SRI with dynamically generated files! More information: https://www.jsdelivr.com/using-sri-with-dynamic-files
+ */
+"use strict";function toString(t){return t?"string"==typeof t?t:t+"":t}class ImageUtils{async svg2canvas(t,e,r){const i=await new Promise((e=>{var r=new Image;r.onload=function(){e(r)},r.src=t}));var n=document.createElement("canvas");n.width=e,n.height=r;return n.getContext("2d").drawImage(i,0,0),n}toDataURL(t,e,r,i,n,a){var s=(new XMLSerializer).serializeToString(t);if(document.documentMode){/xmlns="http:\/\/www\.w3\.org\/2000\/svg".+xmlns="http:\/\/www\.w3\.org\/2000\/svg/gi.test(s)&&(s=s.replace('xmlns="http://www.w3.org/2000/svg','xmlns:xlink="http://www.w3.org/1999/xlink'))}a||(a={});var o="data:image/svg+xml;charset=utf-8,"+encodeURIComponent(s);if("image/svg+xml"===i||!i)return a.async?Promise.resolve(o):o;if("image/jpeg"===i||"image/png"===i){if(!a.async)throw new Error("svgcanvas: options.async must be set to true if type is image/jpeg | image/png");return(async()=>{const t=await this.svg2canvas(o,e,r),a=t.toDataURL(i,n);return t.remove(),a})()}throw new Error("svgcanvas: Unknown type for toDataURL, please use image/jpeg | image/png | image/svg+xml.")}getImageData(t,e,r,i,n,a,s,o){if(o||(o={}),!o.async)throw new Error("svgcanvas: options.async must be set to true for getImageData");const l=this.toDataURL(t,e,r,"image/svg+xml");return(async()=>{const t=await this.svg2canvas(l,e,r),o=t.getContext("2d").getImageData(i,n,a,s);return t.remove(),o})()}}const utils=new ImageUtils;
+/*!!
+ * SVGCanvas v2.0.3
+ * Draw on SVG using Canvas's 2D Context API.
+ *
+ * Licensed under the MIT license:
+ * http://www.opensource.org/licenses/mit-license.php
+ *
+ * Author:
+ * Kerry Liu
+ * Zeno Zeng
+ *
+ * Copyright (c) 2014 Gliffy Inc.
+ * Copyright (c) 2021 Zeno Zeng
+ */var Context=function(){var t,e,r,i,n;function a(t,e){var r,i=Object.keys(e);for(r=0;r1?((r=i).width=arguments[0],r.height=arguments[1]):r=t||i,!(this instanceof e))return new e(r);this.width=r.width||i.width,this.height=r.height||i.height,this.enableMirroring=void 0!==r.enableMirroring?r.enableMirroring:i.enableMirroring,this.canvas=this,this.__document=r.document||document,r.ctx?this.__ctx=r.ctx:(this.__canvas=this.__document.createElement("canvas"),this.__ctx=this.__canvas.getContext("2d")),this.__setDefaultStyles(),this.__styleStack=[this.__getStyleState()],this.__groupStack=[],this.__root=this.__document.createElementNS("http://www.w3.org/2000/svg","svg"),this.__root.setAttribute("version",1.1),this.__root.setAttribute("xmlns","http://www.w3.org/2000/svg"),this.__root.setAttributeNS("http://www.w3.org/2000/xmlns/","xmlns:xlink","http://www.w3.org/1999/xlink"),this.__root.setAttribute("width",this.width),this.__root.setAttribute("height",this.height),this.__ids={},this.__defs=this.__document.createElementNS("http://www.w3.org/2000/svg","defs"),this.__root.appendChild(this.__defs),this.__currentElement=this.__document.createElementNS("http://www.w3.org/2000/svg","g"),this.__root.appendChild(this.__currentElement),this.resetTransform(),this.__options=r,this.__id=Math.random().toString(16).substring(2,8),this.__debug("new",t)},e.prototype.__debug=function(...t){this.__options.debug&&console.debug(`svgcanvas#${this.__id}:`,...t)},e.prototype.__createElement=function(t,e,r){void 0===e&&(e={});var i,n,a=this.__document.createElementNS("http://www.w3.org/2000/svg",t),s=Object.keys(e);for(r&&(a.setAttribute("fill","none"),a.setAttribute("stroke","none")),i=0;i0&&this.setTransform(this.__transformMatrixStack.pop())},e.prototype.beginPath=function(){var t;this.__currentDefaultPath="",this.__currentPosition={},t=this.__createElement("path",{},!0),this.__closestGroupOrSvg().appendChild(t),this.__currentElement=t},e.prototype.__applyCurrentDefaultPath=function(){var t=this.__currentElement;"path"===t.nodeName?t.setAttribute("d",this.__currentDefaultPath):console.error("Attempted to apply path command to node",t.nodeName)},e.prototype.__addPathCommand=function(t){this.__currentDefaultPath+=" ",this.__currentDefaultPath+=t},e.prototype.moveTo=function(t,e){"path"!==this.__currentElement.nodeName&&this.beginPath(),this.__currentPosition={x:t,y:e},this.__addPathCommand(a("M {x} {y}",{x:this.__matrixTransform(t,e).x,y:this.__matrixTransform(t,e).y}))},e.prototype.closePath=function(){this.__currentDefaultPath&&this.__addPathCommand("Z")},e.prototype.lineTo=function(t,e){this.__currentPosition={x:t,y:e},this.__currentDefaultPath.indexOf("M")>-1?this.__addPathCommand(a("L {x} {y}",{x:this.__matrixTransform(t,e).x,y:this.__matrixTransform(t,e).y})):this.__addPathCommand(a("M {x} {y}",{x:this.__matrixTransform(t,e).x,y:this.__matrixTransform(t,e).y}))},e.prototype.bezierCurveTo=function(t,e,r,i,n,s){this.__currentPosition={x:n,y:s},this.__addPathCommand(a("C {cp1x} {cp1y} {cp2x} {cp2y} {x} {y}",{cp1x:this.__matrixTransform(t,e).x,cp1y:this.__matrixTransform(t,e).y,cp2x:this.__matrixTransform(r,i).x,cp2y:this.__matrixTransform(r,i).y,x:this.__matrixTransform(n,s).x,y:this.__matrixTransform(n,s).y}))},e.prototype.quadraticCurveTo=function(t,e,r,i){this.__currentPosition={x:r,y:i},this.__addPathCommand(a("Q {cpx} {cpy} {x} {y}",{cpx:this.__matrixTransform(t,e).x,cpy:this.__matrixTransform(t,e).y,x:this.__matrixTransform(r,i).x,y:this.__matrixTransform(r,i).y}))};var l=function(t){var e=Math.sqrt(t[0]*t[0]+t[1]*t[1]);return[t[0]/e,t[1]/e]};return e.prototype.arcTo=function(t,e,r,i,n){var a=this.__currentPosition&&this.__currentPosition.x,s=this.__currentPosition&&this.__currentPosition.y;if(void 0!==a&&void 0!==s){if(n<0)throw new Error("IndexSizeError: The radius provided ("+n+") is negative.");if(a===t&&s===e||t===r&&e===i||0===n)this.lineTo(t,e);else{var o=l([a-t,s-e]),h=l([r-t,i-e]);if(o[0]*h[1]!=o[1]*h[0]){var p=o[0]*h[0]+o[1]*h[1],c=Math.acos(Math.abs(p)),u=l([o[0]+h[0],o[1]+h[1]]),d=n/Math.sin(c/2),_=t+d*u[0],f=e+d*u[1],g=[-o[1],o[0]],m=[h[1],-h[0]],v=function(t){var e=t[0];return t[1]>=0?Math.acos(e):-Math.acos(e)},y=v(g),x=v(m);this.lineTo(_+g[0]*n,f+g[1]*n),this.arc(_,f,n,y,x)}else this.lineTo(t,e)}}},e.prototype.stroke=function(){"path"===this.__currentElement.nodeName&&this.__currentElement.setAttribute("paint-order","fill stroke markers"),this.__applyCurrentDefaultPath(),this.__applyStyleToCurrentElement("stroke")},e.prototype.fill=function(){"path"===this.__currentElement.nodeName&&this.__currentElement.setAttribute("paint-order","stroke fill markers"),this.__applyCurrentDefaultPath(),this.__applyStyleToCurrentElement("fill")},e.prototype.rect=function(t,e,r,i){"path"!==this.__currentElement.nodeName&&this.beginPath(),this.moveTo(t,e),this.lineTo(t+r,e),this.lineTo(t+r,e+i),this.lineTo(t,e+i),this.lineTo(t,e),this.closePath()},e.prototype.fillRect=function(t,e,r,i){let{a:n,b:a,c:s,d:o,e:l,f:h}=this.getTransform();var p;JSON.stringify([n,a,s,o,l,h])===JSON.stringify([1,0,0,1,0,0])&&0===t&&0===e&&r===this.width&&i===this.height&&this.__clearCanvas(),p=this.__createElement("rect",{x:t,y:e,width:r,height:i},!0),this.__closestGroupOrSvg().appendChild(p),this.__currentElement=p,this.__applyTransformation(p),this.__applyStyleToCurrentElement("fill")},e.prototype.strokeRect=function(t,e,r,i){var n;n=this.__createElement("rect",{x:t,y:e,width:r,height:i},!0),this.__closestGroupOrSvg().appendChild(n),this.__currentElement=n,this.__applyTransformation(n),this.__applyStyleToCurrentElement("stroke")},e.prototype.__clearCanvas=function(){var t=this.__root.childNodes[1];this.__root.removeChild(t),this.__currentElement=this.__document.createElementNS("http://www.w3.org/2000/svg","g"),this.__root.appendChild(this.__currentElement),this.__groupStack=[]},e.prototype.clearRect=function(t,e,r,i){let{a:n,b:a,c:s,d:o,e:l,f:h}=this.getTransform();if(JSON.stringify([n,a,s,o,l,h])!==JSON.stringify([1,0,0,1,0,0])||0!==t||0!==e||r!==this.width||i!==this.height){var p,c=this.__closestGroupOrSvg();p=this.__createElement("rect",{x:t,y:e,width:r,height:i,fill:"#FFFFFF"},!0),this.__applyTransformation(p),c.appendChild(p)}else this.__clearCanvas()},e.prototype.createLinearGradient=function(t,e,i,n){var a=this.__createElement("linearGradient",{id:s(this.__ids),x1:t+"px",x2:i+"px",y1:e+"px",y2:n+"px",gradientUnits:"userSpaceOnUse"},!1);return this.__defs.appendChild(a),new r(a,this)},e.prototype.createRadialGradient=function(t,e,i,n,a,o){var l=this.__createElement("radialGradient",{id:s(this.__ids),cx:n+"px",cy:a+"px",r:o+"px",fx:t+"px",fy:e+"px",gradientUnits:"userSpaceOnUse"},!1);return this.__defs.appendChild(l),new r(l,this)},e.prototype.__parseFont=function(){var t=/^\s*(?=(?:(?:[-a-z]+\s*){0,2}(italic|oblique))?)(?=(?:(?:[-a-z]+\s*){0,2}(small-caps))?)(?=(?:(?:[-a-z]+\s*){0,2}(bold(?:er)?|lighter|[1-9]00))?)(?:(?:normal|\1|\2|\3)\s*){0,3}((?:xx?-)?(?:small|large)|medium|smaller|larger|[.\d]+(?:\%|in|[cem]m|ex|p[ctx]))(?:\s*\/\s*(normal|[.\d]+(?:\%|in|[cem]m|ex|p[ctx])))?\s*([-,\'\"\sa-z0-9]+?)\s*$/i.exec(this.font),e={style:t[1]||"normal",size:t[4]||"10px",family:t[6]||"sans-serif",weight:t[3]||"normal",decoration:t[2]||"normal",href:null};return"underline"===this.__fontUnderline&&(e.decoration="underline"),this.__fontHref&&(e.href=this.__fontHref),e},e.prototype.__wrapTextLink=function(t,e){if(t.href){var r=this.__createElement("a");return r.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href",t.href),r.appendChild(e),r}return e},e.prototype.__applyText=function(t,e,r,i){var n,a,s=this.__parseFont(),l=this.__closestGroupOrSvg(),h=this.__createElement("text",{"font-family":s.family,"font-size":s.size,"font-style":s.style,"font-weight":s.weight,"text-decoration":s.decoration,x:e,y:r,"text-anchor":(n=this.textAlign,a={left:"start",right:"end",center:"middle",start:"start",end:"end"},a[n]||a.start),"dominant-baseline":o(this.textBaseline)},!0);h.appendChild(this.__document.createTextNode(t)),this.__currentElement=h,this.__applyTransformation(h),this.__applyStyleToCurrentElement(i),l.appendChild(this.__wrapTextLink(s,h))},e.prototype.fillText=function(t,e,r){this.__applyText(t,e,r,"fill")},e.prototype.strokeText=function(t,e,r){this.__applyText(t,e,r,"stroke")},e.prototype.measureText=function(t){return this.__ctx.font=this.font,this.__ctx.measureText(t)},e.prototype.arc=function(t,e,r,i,n,s){if(i!==n){(i%=2*Math.PI)===(n%=2*Math.PI)&&(n=(n+2*Math.PI-.001*(s?-1:1))%(2*Math.PI));var o=t+r*Math.cos(n),l=e+r*Math.sin(n),h=t+r*Math.cos(i),p=e+r*Math.sin(i),c=s?0:1,u=0,d=n-i;d<0&&(d+=2*Math.PI),u=s?d>Math.PI?0:1:d>Math.PI?1:0,this.lineTo(h,p),this.__addPathCommand(a("A {rx} {ry} {xAxisRotation} {largeArcFlag} {sweepFlag} {endX} {endY}",{rx:r,ry:r,xAxisRotation:0,largeArcFlag:u,sweepFlag:c,endX:this.__matrixTransform(o,l).x,endY:this.__matrixTransform(o,l).y})),this.__currentPosition={x:o,y:l}}},e.prototype.clip=function(){var t=this.__closestGroupOrSvg(),e=this.__createElement("clipPath"),r=s(this.__ids),i=this.__createElement("g");this.__applyCurrentDefaultPath(),t.removeChild(this.__currentElement),e.setAttribute("id",r),e.appendChild(this.__currentElement),this.__defs.appendChild(e),t.setAttribute("clip-path",a("url(#{id})",{id:r})),t.appendChild(i),this.__currentElement=i},e.prototype.drawImage=function(){var t,r,i,n,a,s,o,l,h,p,c,u,d,_=Array.prototype.slice.call(arguments),f=_[0],g=0,m=0;if(3===_.length)t=_[1],r=_[2],i=a=f.width,n=s=f.height;else if(5===_.length)t=_[1],r=_[2],i=_[3],n=_[4],a=f.width,s=f.height;else{if(9!==_.length)throw new Error("Invalid number of arguments passed to drawImage: "+arguments.length);g=_[1],m=_[2],a=_[3],s=_[4],t=_[5],r=_[6],i=_[7],n=_[8]}o=this.__closestGroupOrSvg();const v=this.getTransform().translate(t,r);if(f instanceof e){if((l=f.getSvg().cloneNode(!0)).childNodes&&l.childNodes.length>1){for(h=l.childNodes[0];h.childNodes.length;)d=h.childNodes[0].getAttribute("id"),this.__ids[d]=d,this.__defs.appendChild(h.childNodes[0]);(p=l.childNodes[1])&&(this.__applyTransformation(p,v),o.appendChild(p))}}else"CANVAS"!==f.nodeName&&"IMG"!==f.nodeName||((c=this.__createElement("image")).setAttribute("width",i),c.setAttribute("height",n),c.setAttribute("preserveAspectRatio","none"),(g||m||a!==f.width||s!==f.height)&&((u=this.__document.createElement("canvas")).width=i,u.height=n,u.getContext("2d").drawImage(f,g,m,a,s,0,0,i,n),f=u),this.__applyTransformation(c,v),c.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","CANVAS"===f.nodeName?f.toDataURL():f.getAttribute("src")),o.appendChild(c))},e.prototype.createPattern=function(t,r){var n,a=this.__document.createElementNS("http://www.w3.org/2000/svg","pattern"),o=s(this.__ids);return a.setAttribute("id",o),a.setAttribute("width",t.width),a.setAttribute("height",t.height),a.setAttribute("patternUnits","userSpaceOnUse"),"CANVAS"===t.nodeName||"IMG"===t.nodeName?((n=this.__document.createElementNS("http://www.w3.org/2000/svg","image")).setAttribute("width",t.width),n.setAttribute("height",t.height),n.setAttributeNS("http://www.w3.org/1999/xlink","xlink:href","CANVAS"===t.nodeName?t.toDataURL():t.getAttribute("src")),a.appendChild(n),this.__defs.appendChild(a)):t instanceof e&&(a.appendChild(t.__root.childNodes[1]),this.__defs.appendChild(a)),new i(a,this)},e.prototype.setLineDash=function(t){t&&t.length>0?this.lineDash=t.join(","):this.lineDash=null},e.prototype.setTransform=function(t,e,r,i,n,a){t instanceof DOMMatrix?this.__transformMatrix=new DOMMatrix([t.a,t.b,t.c,t.d,t.e,t.f]):this.__transformMatrix=new DOMMatrix([t,e,r,i,n,a])},e.prototype.getTransform=function(){let{a:t,b:e,c:r,d:i,e:n,f:a}=this.__transformMatrix;return new DOMMatrix([t,e,r,i,n,a])},e.prototype.resetTransform=function(){this.setTransform(1,0,0,1,0,0)},e.prototype.scale=function(t,e){if(void 0===e&&(e=t),isNaN(t)||isNaN(e)||!isFinite(t)||!isFinite(e))return;let r=this.getTransform().scale(t,e);this.setTransform(r)},e.prototype.rotate=function(t){let e=this.getTransform().multiply(new DOMMatrix([Math.cos(t),Math.sin(t),-Math.sin(t),Math.cos(t),0,0]));this.setTransform(e)},e.prototype.translate=function(t,e){const r=this.getTransform().translate(t,e);this.setTransform(r)},e.prototype.transform=function(t,e,r,i,n,a){const s=this.getTransform().multiply(new DOMMatrix([t,e,r,i,n,a]));this.setTransform(s)},e.prototype.__matrixTransform=function(t,e){return new DOMPoint(t,e).matrixTransform(this.__transformMatrix)},e.prototype.getImageData=function(t,e,r,i,n){return utils.getImageData(this.getSvg(),this.width,this.height,t,e,r,i,n)},e.prototype.drawFocusRing=function(){},e.prototype.createImageData=function(){},e.prototype.putImageData=function(){},e.prototype.globalCompositeOperation=function(){},e}();function SVGCanvasElement(t){this.ctx=new Context(t),this.svg=this.ctx.__root;var e=this.svg,r=this,i=document.createElement("div");i.style.display="inline-block",i.appendChild(e),this.wrapper=i,Object.defineProperty(this,"className",{get:function(){return i.getAttribute("class")||""},set:function(t){return i.setAttribute("class",t)}}),["width","height"].forEach((function(t){Object.defineProperty(r,t,{get:function(){return 0|e.getAttribute(t)},set:function(n){if(!isNaN(n)&&void 0!==n)return r.ctx[t]=n,e.setAttribute(t,n),i[t]=n}})})),["style","id"].forEach((function(t){Object.defineProperty(r,t,{get:function(){return i[t]},set:function(e){if(void 0!==e)return i[t]=e}})})),["getBoundingClientRect"].forEach((function(t){r[t]=function(){return e[t]()}}))}SVGCanvasElement.prototype.getContext=function(t){if("2d"!==t)throw new Error("Unsupported type of context for SVGCanvas");return this.ctx},SVGCanvasElement.prototype.toObjectURL=function(){var t=(new XMLSerializer).serializeToString(this.svg),e=new Blob([t],{type:"image/svg+xml;charset=utf-8"});return URL.createObjectURL(e)},SVGCanvasElement.prototype.toDataURL=function(t,e,r){return utils.toDataURL(this.svg,this.width,this.height,t,e,r)},SVGCanvasElement.prototype.addEventListener=function(){return this.svg.addEventListener.apply(this.svg,arguments)},SVGCanvasElement.prototype.getElement=function(){return this.wrapper};var Element$1=SVGCanvasElement;const DEBUG=!1;function RendererSVG(t){function e(e,r,i){var n=new Element$1({debug:false}),a=n.svg,s=e.parentNode,o=e.id,l=e.className;s.replaceChild(n.getElement(),e),n.id=o,n.className=l,(e=n).parentNode={removeChild:function(t){if(t===e){var r=n.getElement();r.parentNode.removeChild(r)}}};const h=new Proxy(r,{get:function(t,e){return"_pixelDensity"===e?1:t[e]}});return t.Renderer2D.call(this,e,h,i),this.isSVG=!0,this.svg=a,this}e.prototype=Object.create(t.Renderer2D.prototype),e.prototype._applyDefaults=function(){t.Renderer2D.prototype._applyDefaults.call(this),this.drawingContext.lineWidth=1},e.prototype.resize=function(e,r){e&&r&&(this.width===e&&this.height===r||this.drawingContext.__clearCanvas(),t.Renderer2D.prototype.resize.call(this,e,r),this.svg.setAttribute("viewBox",[0,0,e,r].join(" ")))},e.prototype.appendChild=function(t){t&&t.elt&&(t=t.elt),this.drawingContext.__closestGroupOrSvg().appendChild(t)},e.prototype.image=function(e,r,i,n,a,s,o,l,h){if(!e)throw new Error("Invalid image: "+e);var p=e._renderer&&e._renderer.svg;(p=(p=p||e.elt&&e.elt.nodeName&&"svg"===e.elt.nodeName.toLowerCase()&&e.elt)||e.nodeName&&"svg"==e.nodeName.toLowerCase()&&e)?((p=p.cloneNode(!0)).setAttribute("width",l),p.setAttribute("height",h),p.setAttribute("x",s),p.setAttribute("y",o),(r||i||n||a)&&(n/=this._pInst._pixelDensity,a/=this._pInst._pixelDensity,p.setAttribute("viewBox",[r,i,n,a].join(", "))),this.appendChild(p)):t.Renderer2D.prototype.image.apply(this,arguments)},e.prototype.parent=function(){const e={elt:this.elt.getElement()};return t.Element.prototype.parent.apply(e,arguments)},e.prototype.loadPixels=async function(){const t=this._pixelsState,e=t._pixelDensity,r=this.width*e,i=this.height*e,n=await this.drawingContext.getImageData(0,0,r,i,{async:!0});t._setProperty("imageData",n),t._setProperty("pixels",n.data)},t.RendererSVG=e}var constants={SVG:"svg"};function Rendering(t){var e=t.Graphics;t.Graphics=function(r,i,n,a){const s=n===constants.SVG;if(e.apply(this,[r,i,s?t.P2D:n,a]),s){var o=this._renderer.elt;this._renderer=new t.RendererSVG(o,this,!1),o=this._renderer.elt,this.elt=o,this._renderer.resize(r,i),this._renderer._applyDefaults()}return this},t.Graphics.prototype=e.prototype;var r=t.prototype.createCanvas;t.prototype.createCanvas=function(e,i,n){var a=r.apply(this,arguments);if(n===constants.SVG){var s=a.canvas;this._setProperty("_renderer",new t.RendererSVG(s,this,!0)),this._isdefaultGraphics=!0,this._renderer.resize(e,i),this._renderer._applyDefaults()}return this._renderer},t.prototype.createGraphics=function(e,r,i){return new t.Graphics(e,r,i,this)}}function IO(t){t.prototype._makeSVGFrame=function(t){var e=t.filename||"untitled",r=t.extension;r=r||this._checkFileExtension(e,r)[1];var i=new RegExp("\\."+r+"$");e=e.replace(i,""),""===r&&(r="svg");var n={png:"image/png",jpeg:"image/jpeg",jpg:"image/jpeg",svg:"image/svg+xml"}[r];if(!n)throw new Error("Fail to getFrame, invalid extension: "+r+", please use png | jpeg | jpg | svg.");!function(t,e,r){if(t=(new XMLSerializer).serializeToString(t),t="data:image/svg+xml;charset=utf-8,"+encodeURIComponent(t),"image/svg+xml"!=e){var i=new Image,n=document.createElement("canvas"),a=n.getContext("2d");i.onload=function(){n.width=i.width,n.height=i.height,a.drawImage(i,0,0);var t=n.toDataURL(e);r(null,t)},i.src=t}else r(null,t)}(t.svg||this._renderer.svg,n,(function(i,a){a=a.replace(n,"image/octet-stream"),t.callback(i,{imageData:a,filename:e,ext:r})}))},t.prototype.saveSVG=function(){var e,r=arguments;(r=[r[0],r[1],r[2]])[0]instanceof t.Graphics&&(e=r[0]._renderer.svg,r.shift()),r[0]&&r[0].elt&&(e=r[0].elt,r.shift()),"object"==typeof r[0]&&(e=r[0],r.shift());var i=r[0],n=r[1],a=this;this._makeSVGFrame({svg:e,filename:i,extension:n,callback:function(t,e){a.downloadFile(e.imageData,e.filename,e.ext)}})};var e=t.prototype.saveFrames;t.prototype.saveFrames=function(r,i,n,a,s){var o=arguments;if(this._renderer.svg){n=n||3,n=t.prototype.constrain(n,0,15),n*=1e3,a=a||15,a=t.prototype.constrain(a,0,22);var l=0,h=[],p=0,c=this,u=setInterval((function(){!function(t){p++,c._makeSVGFrame({filename:r+t,extension:i,callback:function(e,r){h[t]=r,p--}})}(l),l++}),1e3/a),d=function(){p>0?setTimeout((function(){d()}),10):s?s(h):h.forEach((function(t){c.downloadFile(t.imageData,t.filename,t.ext)}))};setTimeout((function(){clearInterval(u),d()}),n+.01)}else e.apply(this,o)};var r=t.prototype.save;t.prototype.save=function(){var e,i=arguments;if((i=[i[0],i[1]])[0]instanceof t.Graphics){var n=i[0].elt;e=n.svg,i.shift()}i[0]&&i[0].elt&&(e=i[0].elt,i.shift()),"object"==typeof i[0]&&(e=i[0],i.shift()),e=e||this._renderer&&this._renderer.svg;var a=i[0],s=["jpeg","png","jpg","svg",""],o=this._checkFileExtension(a,"")[1],l=e&&e.nodeName&&"svg"===e.nodeName.toLowerCase()&&s.indexOf(o)>-1;if(!l)return r.apply(this,arguments);this.saveSVG(e,a)},t.prototype._svg_get=function(t,e,r){if(0===t.indexOf("data:")){if(-1===t.indexOf(","))return void r(new Error("Fail to parse dataurl: "+t));var i=t.split(",").pop();return setTimeout((function(){i=t.indexOf(";base64,")>-1?atob(i):decodeURIComponent(i),e(i)}),1),i}return this.httpGet(t,e),null},t.prototype.loadSVG=function(e,r,i){var n=document.createElement("div"),a=new t.SVGElement(n);return this._incrementPreload(),new Promise(((t,r)=>{this._svg_get(e,(function(e){n.innerHTML=e,(e=n.querySelector("svg"))?(a.elt=e,t(a)):r("Fail to create