diff --git a/.github/FUNDING.yml b/.github/FUNDING.yml
new file mode 100644
index 00000000..b612d289
--- /dev/null
+++ b/.github/FUNDING.yml
@@ -0,0 +1,5 @@
+# These are supported funding model platforms
+
+github: [methodofaction]
+liberapay: methodofaction
+custom: ['https://www.paypal.com/paypalme/methodofaction']
diff --git a/gulpfile.js b/gulpfile.js
index 92d85615..e4b74ab0 100644
--- a/gulpfile.js
+++ b/gulpfile.js
@@ -17,60 +17,59 @@ gulp.task('js', function () {
     .pipe(gulp.dest('dist'));
 });
 
+gulp.task('loading', function () {
+  return gulp.src('src/js/loading.js')
+    .pipe(gulp.dest('dist'));
+});
+
 gulp.task('index', function () {
-    return gulp.src('src/*.html')
-        .pipe(useref())
-        .pipe(cachebust({type: 'timestamp'}))
-        .pipe(gulp.dest('dist'));
+  return gulp.src('src/*.html')
+    .pipe(useref())
+    .pipe(cachebust({type: 'timestamp'}))
+    .pipe(gulp.dest('dist'));
 });
 
 // no service worker implemented yet
 gulp.task('cache', function(){
-    return gulp.src(['./src/serviceworker.js'])
+  return gulp.src(['./src/serviceworker.js'])
     .pipe(replace('<timestamp>', Date.now()))
     .pipe(gulp.dest('./dist/'));
 });
 
 gulp.task('manifest', function(){
-    return gulp.src(['./src/site.webmanifest'])
+  return gulp.src(['./src/site.webmanifest'])
     .pipe(gulp.dest('./dist/'));
 });
 
 gulp.task('images', function(){
-    return gulp.src(['src/images/**/*'])
+  return gulp.src(['src/images/**/*'])
     .pipe(gulp.dest('dist/images'));
 });
 
-gulp.task('fonts', function(){
-    return gulp.src(['src/font-files/**/*'])
-    .pipe(gulp.dest('dist/font-files'));
-});
-
 gulp.task('extensions', function(){
-    return gulp.src(['src/extensions/**/*'])
+  return gulp.src(['src/extensions/**/*'])
     .pipe(gulp.dest('dist/extensions'));
 });
 
 gulp.task('shapelib', function(){
-    return gulp.src(['src/shapelib/**/*'])
+  return gulp.src(['src/shapelib/**/*'])
     .pipe(gulp.dest('dist/shapelib'));
 });
 
 gulp.task('canvg', function(){
-    return gulp.src(['src/js/lib/canvg.js', 'src/js/lib/rgbcolor.js'])
+  return gulp.src(['src/js/lib/canvg.js', 'src/js/lib/rgbcolor.js'])
     .pipe(gulp.dest('dist/js/lib'));
 });
 
-gulp.task('default', 
-    gulp.series(
-        'css', 
-        'js', 
-        'index', 
-        'manifest',
-        'images',
-        'fonts',
-        'extensions',
-        'shapelib',
-        'canvg'
-    )
+gulp.task('build', 
+  gulp.series(
+      'css', 
+      'js', 
+      'index', 
+      'manifest',
+      'images',
+      'extensions',
+      'shapelib',
+      'canvg'
+  )
 );
\ No newline at end of file
diff --git a/readme.md b/readme.md
index cdbb8cb5..35e1b074 100644
--- a/readme.md
+++ b/readme.md
@@ -2,12 +2,6 @@
 
 Method Draw is a web based vector drawing application. The purpose of Method Draw is to provide a simple and easy-to-use SVG editor experience. It purposely removes some features such as layers and line-caps/corners in exchange for a more simple and pleasant experience. If you are looking for a more complete vector editing open-source solution, please check out [SVG Edit](https://github.com/SVG-Edit/svgedit).
 
-## Online sync and sharing
-
-Cloud sync and sharing are available on Method Draw for Deta.
-
-[<img src="https://method.ac/img/install-on-deta.png" width="200">](https://deta.space/discovery/method-draw?ref=method.ac)
-
 #### [Try Method Draw](https://editor.method.ac) online.
 
 ![Method Draw](https://method.ac/img/method-draw2021.png)
@@ -36,7 +30,7 @@ Install dev dependencies:
 
 Then you can build into `dist` by running:
 
-`gulp`
+`gulp build`
 
 Deploy `dist` to your static file server of choice.
 
@@ -54,7 +48,7 @@ Deploy `dist` to your static file server of choice.
 **2015.01.01** Project frozen  
 **2013.01.01** Project forked from SVG-Edit  
 
-Sponsor development in the form of [one-time donations](https://method.ac/donate/), or by hiring me to customize Method Draw for your own needs (only simple 2-20 hour projects).
+Sponsor development by [donating to the author](https://method.ac/donate/).
 
 Method Draw is Copyright (c)
 Mark MacKay [mark@method.ac](mailto:mark@method.ac)
diff --git a/src/css/align_buttons.css b/src/css/align_buttons.css
index 229e9ace..f8c94a1d 100644
--- a/src/css/align_buttons.css
+++ b/src/css/align_buttons.css
@@ -1,25 +1,39 @@
+.align_buttons {
+  margin-bottom: var(--x2);
+}
+
+.align_button,
+.align_button * {
+  transition: var(--transition);
+}
+
+.align_button:hover,
+.align_button:hover * {
+  transition: none;
+}
+
 .align_button {
   float: left;
-  height: 26px;
-  height: 26px;
-  border: solid var(--z2) 10px;
-  outline: solid var(--z1) 1px;
-  background-color: var(--z2);
+  height: var(--x13);
+  width: var(--x13);
+  line-height: var(--x16);
+  text-align: center;
   cursor: pointer;
   position: relative;
 }
 
 .align_button:hover {
-  background-color: var(--z3);
+  background-color: var(--z0);
   border-color: var(--z3);
 }
 
 .align_button svg {
-  fill: #999;
+  fill: var(--z10);
 }
 
 .align_button:hover svg {
-  fill: #fff;
+  fill: var(--z15);
+  transition: none;
 }
 
 .align_button:nth-child(1) {border-radius: var(--x1) 0 0 0;}
diff --git a/src/css/app.css b/src/css/app.css
index 40b68394..ae463fc0 100644
--- a/src/css/app.css
+++ b/src/css/app.css
@@ -9,17 +9,11 @@
 }
 
 #svgcanvas {
-  background-color: var(--z1);
-  width: 800px;
-  height: 600px;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  position: relative;
-  background: var(--z2);
+  background-color: var(--z2);
+  display: block;
 }
 
- #workarea {
+#workarea {
   display: block;
   position:absolute;
   top: var(--x8);
@@ -32,5 +26,76 @@
   justify-content: center;
   transition: transform 500ms cubic-bezier(0.13,0.66,0.24,0.92);
   border-radius: var(--x2);
-  box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.2);
-}
\ No newline at end of file
+  box-shadow: var(--shadow-bg);
+}
+
+.inverted #svgcanvas,
+.inverted #workarea {
+  background:  var(--z1);
+}
+
+#workarea.rect, #workarea.line, #workarea.ellipse, #workarea.path, #workarea.shapelib {
+  cursor: crosshair;
+}
+
+#workarea.text {
+  cursor: text;
+}
+
+#workarea.eyedropper {
+  cursor: url(../images/eyedropper.svg) 0 16, crosshair;
+}
+
+#workarea.fhpath {
+  cursor: url(../images/pencil_cursor.png) 0 16, crosshair;
+}
+
+#workarea.rotate * {
+  cursor: url(../images/rotate.png) 12 12, auto;
+}
+
+#workarea.select text, #workarea.multiselect text {
+  cursor: default;
+}
+
+#workarea.n-resize * {cursor: n-resize !important;}
+#workarea.e-resize * {cursor: e-resize !important;}
+#workarea.w-resize * {cursor: w-resize !important;}
+#workarea.s-resize * {cursor: s-resize !important;}
+
+#workarea.ne-resize * {cursor: ne-resize !important;}
+#workarea.se-resize * {cursor: se-resize !important;}
+#workarea.nw-resize * {cursor: nw-resize !important;}
+#workarea.sw-resize * {cursor: sw-resize !important;}
+
+#workspace.dragging *,
+body.dragging * {
+  cursor: url(../images/dragging.png), move;
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+}
+
+#workspace.drag * {
+  cursor: url(../images/dragging.png), move;
+  cursor: -webkit-grabbing;
+  cursor: -moz-grabbing;
+}
+
+#workarea.copy {
+  cursor: copy;
+}
+
+#workarea.zoom {
+  cursor: crosshair;
+  cursor:-moz-zoom-in;
+  cursor:-webkit-zoom-in;
+}
+#workarea.zoom.out {
+  cursor: crosshair;
+  cursor:-moz-zoom-out;
+  cursor:-webkit-zoom-out;
+}
+
+#selectorRubberBand {
+  shape-rendering: crispEdges;
+}
diff --git a/src/css/base.css b/src/css/base.css
index f0e6049b..faf87fad 100644
--- a/src/css/base.css
+++ b/src/css/base.css
@@ -1,77 +1,112 @@
-:root {          /* red */        /* yellow */     /* green */
---z0: #111827;   --a0: #291e2a;   --b0: #292329;   --c0: #16262f; 
---z1: #1e2433;   --a1: #42242e;   --b1: #43322a;   --c1: #1b373a; 
---z2: #2b313f;   --a2: #5b2a32;   --b2: #5d412b;   --c2: #1e4944; 
---z3: #393e4c;   --a3: #753035;   --b3: #77512b;   --c3: #215c4f; 
---z4: #474c59;   --a4: #8f3539;   --b4: #926129;   --c4: #21705a; 
---z5: #565a66;   --a5: #aa3a3c;   --b5: #ad7225;   --c5: #218465; 
---z6: #656974;   --a6: #c53e3f;   --b6: #ca8320;   --c6: #1d9970; 
---z7: #747782;   --a7: #e14242;   --b7: #e69515;   --c7: #16ae7b; 
---z8: #848790;   --a8: #f2524e;   --b8: #f7a327;   --c8: #32bd88; 
---z9: #94969f;   --a9: #f76b62;   --b9: #fbae48;   --c9: #57c596; 
---z10: #a4a6ae;  --a10: #fc8277;  --b10: #feb963;  --c10: #73cea4; 
---z11: #b4b7bd;  --a11: #ff978d;  --b11: #ffc47e;  --c11: #8cd6b3; 
---z12: #c5c7cc;  --a12: #ffaca2;  --b12: #ffcf97;  --c12: #a4ddc1; 
---z13: #d6d8db;  --a13: #ffc1b9;  --b13: #ffdab1;  --c13: #bbe5d0; 
---z14: #e7e9eb;  --a14: #ffd5d0;  --b14: #ffe5cb;  --c14: #d1eddf; 
---z15: #f9fafb;  --a15: #fde9e7;  --b15: #fdf0e5;  --c15: #e7f4ee; 
+:root, .inverted-undo {          /* red */        /* yellow */     /* green */
+--z0: #111827;  --a0: #2a1c26; --b0: #2a2429;  --c0: #162730; 
+--z1: #1e2433;  --a1: #421f24; --b1: #45322a;  --c1: #1c3b3b; 
+--z2: #2b313f;  --a2: #5a2122; --b2: #60422b;  --c2: #1f4f47; 
+--z3: #393e4c;  --a3: #71231f; --b3: #7b522a;  --c3: #226452; 
+--z4: #474c59;  --a4: #89221c; --b4: #976328;  --c4: #227a5e; 
+--z5: #565a66;  --a5: #a22018; --b5: #b47424;  --c5: #20906a; 
+--z6: #656974;  --a6: #bb1b13; --b6: #d1861d;  --c6: #1ba776; 
+--z7: #747782;  --a7: #d4100b; --b7: #f0990f;  --c7: #0ebf82; 
+--z8: #848790;  --a8: #e62b18; --b8: #ffa723;  --c8: #31ce8f; 
+--z9: #94969f;  --a9: #ee5035; --b9: #ffb146;  --c9: #59d49c; 
+--z10: #a4a6ae; --a10: #f66d50;--b10: #ffbc63; --c10: #76dbaa; 
+--z11: #b4b7bd; --a11: #fb866c;--b11: #ffc67d; --c11: #8fe0b7; 
+--z12: #c5c7cc; --a12: #ff9f88;--b12: #ffd197; --c12: #a7e6c5; 
+--z13: #d6d8db; --a13: #ffb7a5;--b13: #ffdbb1; --c13: #bdecd3; 
+--z14: #e7e9eb; --a14: #ffcfc3;--b14: #ffe6cb; --c14: #d2f1e1; 
+--z15: #f9fafb; --a15: #fee6e1;--b15: #fef1e5; --c15: #e8f6ef; 
+
+--d0: #152239;  --e0: #181e39; --f0: #1f1d39;  --g0: #291d30; 
+--d1: #1a3050;  --e1: #202651; --f1: #2f2251;  --g1: #43223b; 
+--d2: #1d3d69;  --e2: #282e69; --f2: #3f2769;  --g2: #5e2647; 
+--d3: #1e4c82;  --e3: #303782; --f3: #502b82;  --g3: #7a2953; 
+--d4: #1e5a9d;  --e4: #383f9d; --f4: #622e9d;  --g4: #962a5f; 
+--d5: #1c69b8;  --e5: #4047b8; --f5: #7430b8;  --g5: #b32a6c; 
+--d6: #1779d4;  --e6: #4750d4; --f6: #8732d4;  --g6: #d12678; 
+--d7: #0b89f0;  --e7: #4e59f0; --f7: #9933f0;  --g7: #ef2085; 
+--d8: #3797ff;  --e8: #6366ff; --f8: #aa43ff;  --g8: #ff3892; 
+--d9: #62a3ff;  --e9: #7e78ff; --f9: #b85fff;  --g9: #ff5c9f; 
+--d10: #7fafff; --e10: #958aff; --f10: #c477ff;--g10: #ff78ac; 
+--d11: #98bbfe; --e11: #a99cff; --f11: #cf8fff;--g11: #ff91b9; 
+--d12: #aec8fe; --e12: #bbafff; --f12: #daa5ff;--g12: #ffa8c6; 
+--d13: #c3d4fd; --e13: #cdc2fe; --f13: #e3bbfe;--g13: #ffbed4; 
+--d14: #d7e2fd; --e14: #ddd6fd; --f14: #ebd1fd;--g14: #ffd4e1; 
+--d15: #eaeffc; --e15: #ece9fc; --f15: #f3e8fc;--g15: #fde9ef;
+-webkit-font-smoothing: antialiased;
+--shadow-bg: 0 var(--x2) var(--x4) var(--z0);
+--shadow: 0 var(--x1) var(--x8) rgba(0,0,0,0.4);
+--accent0:  var(--d0);  --comp0:  var(--g0);
+--accent1:  var(--d1);  --comp1:  var(--g1);
+--accent2:  var(--d2);  --comp2:  var(--g2);
+--accent3:  var(--d3);  --comp3:  var(--g3);
+--accent4:  var(--d4);  --comp4:  var(--g4);
+--accent5:  var(--d5);  --comp5:  var(--g5);
+--accent6:  var(--d6);  --comp6:  var(--g6);
+--accent7:  var(--d7);  --comp7:  var(--g7);
+--accent8:  var(--d8);  --comp8:  var(--g8);
+--accent9:  var(--d9);  --comp9:  var(--g9);
+--accent10: var(--d10); --comp10: var(--g10);
+--accent11: var(--d11); --comp11: var(--g11);
+--accent12: var(--d12); --comp12: var(--g12);
+--accent13: var(--d13); --comp13: var(--g13);
+--accent14: var(--d14); --comp14: var(--g14);
+--accent15: var(--d15); --comp15: var(--g15);
 
-/* blue */       /* violet */     /* purple */      /* pink */
---d0: #172139;   --e0: #191f38;   --f0: #1c1f39;   --g0: #261e31; 
---d1: #1d2d4f;   --e1: #22284e;   --f1: #29274f;   --g1: #3f253e; 
---d2: #223966;   --e2: #2c3165;   --f2: #372f66;   --g2: #572c4b; 
---d3: #28457f;   --e3: #363a7d;   --f3: #46377f;   --g3: #713258; 
---d4: #2d5298;   --e4: #3f4495;   --f4: #543f98;   --g4: #8b3866; 
---d5: #315fb2;   --e5: #494daf;   --f5: #6447b2;   --g5: #a63d74; 
---d6: #356dcd;   --e6: #5457c9;   --f6: #7350cd;   --g6: #c14283; 
---d7: #397be8;   --e7: #5e61e3;   --f7: #8358e8;   --g7: #de4692; 
---d8: #5089f7;   --e8: #706ef2;   --f8: #9466f7;   --g8: #ee569f; 
---d9: #6f96f8;   --e9: #867ff4;   --f9: #a378f8;   --g9: #f26faa; 
---d10: #88a4f9;  --e10: #9a90f5;  --f10: #b28bf9;  --g10: #f585b5; 
---d11: #9eb2f9;  --e11: #aca2f7;  --f11: #c09efa;  --g11: #f89ac1; 
---d12: #b3c0fa;  --e12: #bdb3f8;  --f12: #cdb1fa;  --g12: #faafcd; 
---d13: #c6cffa;  --e13: #cec5f9;  --f13: #d9c4fb;  --g13: #fbc3d9; 
---d14: #d8defb;  --e14: #ddd8fa;  --f14: #e5d7fb;  --g14: #fbd6e5; 
---d15: #eaedfb;  --e15: #edeafb;  --f15: #f0eafb;  --g15: #faeaf1;
-  -webkit-font-smoothing: antialiased;
 }
 
 .inverted {
---z15: #111827; --a15: #291e2a;  --b15: #292329;  --c15: #16262f; 
---z14: #1e2433; --a14: #42242e;  --b14: #43322a;  --c14: #1b373a; 
---z13: #2b313f; --a13: #5b2a32;  --b13: #5d412b;  --c13: #1e4944; 
---z12: #393e4c; --a12: #753035;  --b12: #77512b;  --c12: #215c4f; 
---z11: #474c59; --a11: #8f3539;  --b11: #926129;  --c11: #21705a; 
---z10: #565a66; --a10: #aa3a3c;  --b10: #ad7225;  --c10: #218465; 
---z9:  #656974; --a9:  #c53e3f;  --b9:  #ca8320;  --c9:  #1d9970; 
---z8:  #747782; --a8:  #e14242;  --b8:  #e69515;  --c8:  #16ae7b; 
---z7:  #848790; --a7:  #f2524e;  --b7:  #f7a327;  --c7:  #32bd88; 
---z6:  #94969f; --a6:  #f76b62;  --b6:  #fbae48;  --c6:  #57c596; 
---z5:  #a4a6ae; --a5:  #fc8277;  --b5:  #feb963;  --c5:  #73cea4; 
---z4:  #b4b7bd; --a4:  #ff978d;  --b4:  #ffc47e;  --c4:  #8cd6b3; 
---z3:  #c5c7cc; --a3:  #ffaca2;  --b3:  #ffcf97;  --c3:  #a4ddc1; 
---z2:  #d6d8db; --a2:  #ffc1b9;  --b2:  #ffdab1;  --c2:  #bbe5d0; 
---z1:  #e7e9eb; --a1:  #ffd5d0;  --b1:  #ffe5cb;  --c1:  #d1eddf; 
---z0:  #f9fafb; --a0:  #fde9e7;  --b0:  #fdf0e5;  --c0:  #e7f4ee; 
+--z0: #ffffff;  --a0: #ffebe5;  --b0: #fff5e9;  --c0: #edfaf3; 
+--z1: #ececee;  --a1: #ffd2c6;  --b1: #ffeace;  --c1: #d7f5e4; 
+--z2: #dadade;  --a2: #ffbaa7;  --b2: #ffdfb3;  --c2: #c1efd5; 
+--z3: #c8c8ce;  --a3: #ffa28a;  --b3: #ffd399;  --c3: #aae9c7; 
+--z4: #b6b6be;  --a4: #fe886d;  --b4: #ffc87f;  --c4: #92e2b9; 
+--z5: #a4a5ae;  --a5: #f76e51;  --b5: #ffbd64;  --c5: #78dcab; 
+--z6: #93949e;  --a6: #ef5135;  --b6: #ffb247;  --c6: #5ad59d; 
+--z7: #82838f;  --a7: #e62c18;  --b7: #ffa723;  --c7: #31ce8f; 
+--z8: #727380;  --a8: #d30d0a;  --b8: #ef980e;  --c8: #0dbe81; 
+--z9: #616371;  --a9: #b91612;  --b9: #cf841c;  --c9: #18a574; 
+--z10: #525463; --a10: #9e1a17; --b10: #b17122; --c10: #1d8c68; 
+--z11: #424555; --a11: #851b1a; --b11: #935e26; --c11: #1e745b; 
+--z12: #333647; --a12: #6c1b1c; --b12: #764c27; --c12: #1d5d4e; 
+--z13: #25283a; --a13: #53191e; --b13: #5a3a27; --c13: #1a4742; 
+--z14: #171b2d; --a14: #3b1620; --b14: #3e2a26; --c14: #153236; 
+--z15: #080c21; --a15: #221320; --b15: #231a23; --c15: #0f1e2a; 
 
-/* blue */       /* violet */     /* purple */      /* pink */
---d15:#172139;   --e15: #191f38;  --f15:  #1c1f39;  --g15: #261e31; 
---d14:#1d2d4f;   --e14: #22284e;  --f14:  #29274f;  --g14: #3f253e; 
---d13:#223966;   --e13: #2c3165;  --f13:  #372f66;  --g13: #572c4b; 
---d12:#28457f;   --e12: #363a7d;  --f12:  #46377f;  --g12: #713258; 
---d11:#2d5298;   --e11: #3f4495;  --f11:  #543f98;  --g11: #8b3866; 
---d10:#315fb2;   --e10: #494daf;  --f10:  #6447b2;  --g10: #a63d74; 
---d9: #356dcd;   --e9:  #5457c9;  --f9:   #7350cd;  --g9:  #c14283; 
---d8: #397be8;   --e8:  #5e61e3;  --f8:   #8358e8;  --g8:  #de4692; 
---d7: #5089f7;   --e7:  #706ef2;  --f7:   #9466f7;  --g7:  #ee569f; 
---d6: #6f96f8;   --e6:  #867ff4;  --f6:   #a378f8;  --g6:  #f26faa; 
---d5:  #88a4f9;  --e5:  #9a90f5;  --f5:   #b28bf9;  --g5:   #f585b5; 
---d4:  #9eb2f9;  --e4:  #aca2f7;  --f4:   #c09efa;  --g4:   #f89ac1; 
---d3:  #b3c0fa;  --e3:  #bdb3f8;  --f3:   #cdb1fa;  --g3:   #faafcd; 
---d2:  #c6cffa;  --e2:  #cec5f9;  --f2:   #d9c4fb;  --g2:   #fbc3d9; 
---d1:  #d8defb;  --e1:  #ddd8fa;  --f1:   #e5d7fb;  --g1:   #fbd6e5; 
---d0:  #eaedfb;  --e0:  #edeafb;  --f0:   #f0eafb;  --g0:   #faeaf1;
-  -webkit-font-smoothing: auto;
+--d0: #eff3ff;  --e0: #f2eeff;  --f0: #f9ecff;  --g0: #ffedf3; 
+--d1: #dbe5ff;  --e1: #e2d9ff;  --f1: #f0d5ff;  --g1: #ffd7e5; 
+--d2: #c7d8ff;  --e2: #d1c5ff;  --f2: #e7bfff;  --g2: #ffc1d6; 
+--d3: #b2caff;  --e3: #bfb2ff;  --f3: #dda8ff;  --g3: #ffabc8; 
+--d4: #9bbdff;  --e4: #ac9eff;  --f4: #d290ff;  --g4: #ff93bb; 
+--d5: #81b0ff;  --e5: #978bff;  --f5: #c679ff;  --g5: #ff7aad; 
+--d6: #63a3ff;  --e6: #7f78ff;  --f6: #b960ff;  --g6: #ff5da0; 
+--d7: #3897ff;  --e7: #6366ff;  --f7: #ab44ff;  --g7: #ff3992; 
+--d8: #0788f0;  --e8: #4d58f0;  --f8: #9932f0;  --g8: #ef1e85; 
+--d9: #1077d2;  --e9: #444ed2;  --f9: #842fd2;  --g9: #cf2277; 
+--d10: #1466b5; --e10: #3b44b5; --f10: #702cb5; --g10: #b02369; 
+--d11: #165599; --e11: #323a99; --f11: #5d2899; --g11: #91235c; 
+--d12: #15467e; --e12: #29317e; --f12: #4a247e; --g12: #74214f; 
+--d13: #143664; --e13: #212764; --f13: #381f64; --g13: #581e42; 
+--d14: #11284b; --e14: #181e4b; --f14: #271a4b; --g14: #3c1a36; 
+--d15: #0d1a33; --e15: #101633; --f15: #161433; --g15: #21142a; 
+-webkit-font-smoothing: auto;
+--shadow-bg: 0 var(--x2) var(--x4) var(--z3);
+--shadow: 0 var(--x1) var(--x8) rgba(0,0,0,0.1);
+--accent0:  var(--d0);  --comp0:  var(--g0);
+--accent1:  var(--d1);  --comp1:  var(--g1);
+--accent2:  var(--d2);  --comp2:  var(--g2);
+--accent3:  var(--d3);  --comp3:  var(--g3);
+--accent4:  var(--d4);  --comp4:  var(--g4);
+--accent5:  var(--d5);  --comp5:  var(--g5);
+--accent6:  var(--d6);  --comp6:  var(--g6);
+--accent7:  var(--d7);  --comp7:  var(--g7);
+--accent8:  var(--d8);  --comp8:  var(--g8);
+--accent9:  var(--d9);  --comp9:  var(--g9);
+--accent10: var(--d10); --comp10: var(--g10);
+--accent11: var(--d11); --comp11: var(--g11);
+--accent12: var(--d12); --comp12: var(--g12);
+--accent13: var(--d13); --comp13: var(--g13);
+--accent14: var(--d14); --comp14: var(--g14);
+--accent15: var(--d15); --comp15: var(--g15);
 }
 
 :root {
@@ -91,18 +126,9 @@
   --x14: 56px;
   --x15: 60px;
   --x16: 64px;
-
   --mono-font: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
   --ui-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
-  --transition-duration: 333ms;
-  --transition-fast: 200ms;
   --panel-width: calc(var(--x10)*2*2 + var(--x1));
-}
-
-a, a:link, a:active, a:visited {
-  color: var(--d6);
-}
-
-a:hover {
-  color: var(--d8);
+  --transition-duration: 200ms;
+  --transition:  all var(--transition-duration) ease;
 }
\ No newline at end of file
diff --git a/src/css/button.css b/src/css/button.css
index 37ed1494..a79f075f 100644
--- a/src/css/button.css
+++ b/src/css/button.css
@@ -12,10 +12,11 @@
   border: solid var(--z5) 2px;
   border-radius: var(--x1);
   white-space: nowrap;
-  margin: var(--x2) var(--x4) var(--x2) 0;
+  margin: var(--x2) var(--x2) var(--x2) 0;
   padding: 0 var(--x4);
   display: inline-block;
   font-weight: bold;
+  background-color: var(--z1);
 }
 
 .button:hover {
@@ -41,7 +42,7 @@
 }
 
 .button.current svg {
-  fill: var(--d15);
+  fill: var(--accent15);
 }
 
 .button.disabled svg {
diff --git a/src/css/color-tool.css b/src/css/color-tool.css
index c74aaff8..1d4b11b6 100644
--- a/src/css/color-tool.css
+++ b/src/css/color-tool.css
@@ -4,11 +4,7 @@
   left: 0;
 }
 
-.touch  #color_tools #tool_fill .color_block > div {
-  position: relative;
-}
-
- #color_tools #tool_fill .color_block #fill_bg,  #color_tools #tool_stroke .color_block #stroke_bg {
+#color_tools #tool_fill .color_block #fill_bg,  #color_tools #tool_stroke .color_block #stroke_bg {
   position: absolute;
   top: 1px;
   left: 1px;
@@ -34,7 +30,7 @@
   height: 11px;
   position: absolute;
   top: -5px;
-  right: var(--x3);
+  right: 0;
   cursor: nwse-resize
 }
 
@@ -55,15 +51,12 @@
   height: var(--x5);
   overflow: hidden;
   border: solid var(--z12) 1px;
-}
-
-.color_block:hover {
-  border-color: #fff;
+  cursor:  pointer;
 }
 
 .color_block svg {
-  width: 24px;
-  height: 24px;
+  width: 22px;
+  height: 22px;
 }
 
  #tool_stroke .color_block > div {
@@ -79,7 +72,7 @@
   margin: 12px 6px 0 6px;
 }
 
-.touch  #color_tools {
+#color_tools {
   width: auto;
   height: auto;
 }
@@ -107,8 +100,8 @@
 }
 
 #tool_canvas .color_block {
-  width: 100%;
-  height: 100%;
+  width: 58px;
+  height: 38px;
 }
 
 #tool_canvas .color_block svg {
diff --git a/src/css/context-menu.css b/src/css/context-menu.css
index 6e924702..003c5696 100644
--- a/src/css/context-menu.css
+++ b/src/css/context-menu.css
@@ -39,7 +39,7 @@
 }
 
 .contextMenu LI.hover A {
-  background-color: var(--d7);
+  background-color: var(--accent7);
   color: var(--z15);
   cursor: default;
 }
diff --git a/src/css/darkmode.css b/src/css/darkmode.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/css/draginput.css b/src/css/draginput.css
index 698c439a..d8e533e5 100644
--- a/src/css/draginput.css
+++ b/src/css/draginput.css
@@ -6,7 +6,7 @@
 }
 
 .draginput {
-  background: var(--z2);
+  background-color: var(--z2);
   border-radius: var(--x1);
   width: calc(50% - var(--x2));
   height: calc(var(--x9) * 2);
@@ -14,6 +14,58 @@
   position: relative;
   margin: 0 var(--x2) var(--x2) 0;
   overflow: hidden;
+  transition: var(--transition);
+  box-shadow:  none;
+}
+
+.dragging .draginput {
+  pointer-events:  none;
+}
+
+.dragging .draginput.active {
+  pointer-events:  all;
+  box-shadow: none;
+}
+
+.draginput:hover {
+  background-color: var(--z3);
+  transition: none;
+  box-shadow:  var(--shadow-bg);
+}
+
+.draginput:hover span,
+.draginput.active span {
+  color: var(--z15);
+}
+
+.draginput:hover input,
+.draginput.active input {
+  color: var(--accent8);
+}
+
+.draginput.active, 
+.draginput.active:hover {
+  background-color: var(--z0);
+}
+
+.draginput.active:hover {
+  transition: none;
+}
+
+/* TODO this will only work for two line buttons */
+
+.draginput-button {
+  text-align: center;
+  color: var(--z9);
+  padding-top: var(--x5);
+  box-sizing: border-box;
+  cursor: pointer;
+}
+
+.draginput-button-delete:hover {
+  background-color:  var(--a7);
+  color:  var(--a15);
+  transition: none;
 }
 
  .draginput .caret {
@@ -70,7 +122,7 @@
   background: transparent;
   font: 24px/normal sans-serif;
   text-align: center;
-  color: var(--d7);
+  color: var(--accent7);
   padding: 30px 0 16px;
   width: 100%;
   height: 24px;
@@ -78,6 +130,45 @@
   z-index: 2;
 }
 
+.draginput input::selection { background: var(--accent9); }
+
+.draginput.text-input input, 
+.draginput.text-input input:hover, 
+.draginput.text-input input:active {
+  cursor: text;
+}
+
+.draginput.text-input input {
+  text-align: left;
+  text-indent: var(--x2);
+}
+
+.draginput.textcontent.hidden {
+  position: absolute;
+  opacity: 0;
+  z-index: 0;
+  pointer-events: none;
+}
+
+.draginput.textcontent input {
+  cursor: text;
+  text-align: left;
+  text-indent:  var(--x2);
+}
+
+.draginput.textcontent input,
+.draginput.textcontent input:hover,
+.draginput.textcontent input:active {
+  cursor: text;
+}
+
+.text-path .draginput.textcontent {
+  opacity:  1;
+  position: relative;
+  cursor: text;
+  pointer-events: auto;
+}
+
 .draginput.twocol {
   width: 100%;
 }
@@ -137,15 +228,19 @@
   margin: 0;
   z-index: 1;
   top: 0;
-  left: 0;  
+  left: 0;
+  cursor:  pointer;
+}
+
+.draginput:hover .draginput_cursor {
+  border-color: var(--accent6);
 }
 
 .draginput_cursor{
   position: absolute;
   top: 50%;
   width: 100%;
-  border-top: solid var(--d2) 3px;
-  margin-top: -2px;
+  border-top: solid var(--accent4) 1px;
   z-index: 0;
 }
 
@@ -160,10 +255,10 @@
 }
 
 .draginput input:focus {
-  background: var(--d7);
-  color: var(--d15);
+  background: var(--accent7);
+  color: var(--accent15);
   outline: none;
-  box-shadow: 0 0 5px 2px var(--d7);
+  box-shadow: 0 0 5px 2px var(--accent7);
 }
 
  .draginput input:focus+span {
@@ -174,4 +269,97 @@
 .draginput .push_bottom {
   bottom: 0;
   position: absolute;
+}
+
+.draginput .angle {
+  width: var(--x12);
+  height: var(--x12);
+  border-radius: var(--x12);
+  background-color: var(--z3);
+  position: absolute;
+  bottom: var(--x1);
+  left: 14px;
+}
+
+body.dragging .draginput .angle {
+  background-color: var(--z1);
+}
+
+.draginput:hover .angle {
+  background: var(--z4);
+}
+
+.draginput .angle-cursor {
+  width:         4px;
+  height:        25px;
+  border-top: solid var(--accent7) 3px;
+  position: absolute;
+  margin: 0 0 0 23px;
+  transform-origin: 50% 0;
+}
+
+.draginput.font_style:hover {
+  background-color: var(--z2);
+}
+
+.draginput.loading:before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background-color:  var(--z2);
+  opacity:  0.8;
+  z-index: 10;
+}
+
+.draginput.loading:after {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  width: var(--x4);
+  height: var(--x4);
+  border-radius: var(--x4);
+  z-index: 10;
+  border: solid var(--accent7) 2px;
+  border-top-color: transparent;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  0%   { transform: translate(-50%, -50%) rotate(0);      }
+  100% { transform: translate(-50%, -50%) rotate(360deg); }
+}
+
+
+
+
+/* inverted */
+
+.inverted .draginput {
+  background-color: var(--z1);
+}
+
+.inverted .draginput {
+  background-color: var(--z1);
+}
+
+
+.inverted .draginput:hover {
+  background-color: var(--z0);
+}
+
+.inverted .draginput .angle {
+  background-color: var(--z2);
+}
+
+.inverted .draginput span {
+  color: var(--z9);
+}
+
+body.inverted.dragging .draginput .angle {
+  background-color: var(--z1);
 }
\ No newline at end of file
diff --git a/src/css/jgraduate.css b/src/css/jgraduate.css
index 2283c007..51292794 100644
--- a/src/css/jgraduate.css
+++ b/src/css/jgraduate.css
@@ -10,25 +10,66 @@
  * Licensed under the Apache License Version 2
  */
 
+ #color_picker {
+  position: absolute;
+  display: none;
+  background: var(--z1);
+  width: calc(9 * var(--x15));
+  height: calc(6 * var(--x15));
+  border-radius: var(--x3);
+  z-index: 5;
+  box-shadow: var(--shadow);
+  padding: var(--x4);
+  color:  var(--z8);
+}
+
+
+/* Remove editing options for radial gradients with userspaceonuse which will do nothing */
+ #color_picker.radialUserSpace div.grad_coord,
+ #color_picker.radialUserSpace .jGraduate_Form {
+ 	display: none !important;
+ }
+
+ #color_picker.radialUserSpace .jGraduate_gradPick:after {
+	content: 'Click on the color drops to change the color of the gradient';
+  position: absolute;
+  right: var(--x8);
+  width: 250px;
+  color: var(--z12);
+  bottom: 50%;
+  font-size: 1.2em;
+  line-height: 1.5em;
+ }
+
+ #color_picker input {
+ 	color:  var(--z14);
+ }
+
 h2.jGraduate_Title {
   display: none;
 }
 
-.jGraduate_Picker {
-	position: absolute;
-	padding: 20px;
+.jGraduate_tabs {
+	padding:  var(--x4);
+	--neg:  calc(var(--x4) *-1);
+	margin: var(--neg) var(--neg) 0 var(--neg);
 }
 
 .jGraduate_tabs li {
 	display: inline-block;
-	padding: 5px 10px;
-	margin-right: 5px;
+	padding: var(--x4) var(--x4) var(--x4) var(--x4);
 	cursor: pointer;
+	color:  var(--z9);
+}
+
+.jGraduate_tabs li:hover {
+	color:  var(--z12);
 }
 
-li.jGraduate_tab_current {
-  background: #fff;
-  border-radius: 3px 3px 0 0;
+li.jGraduate_tab_current,
+li.jGraduate_tab_current:hover {
+  color:  var(--accent7);
+  -webkit-text-stroke: 0.5px var(--accent8);
 }
 
 .jGraduate_colPick {
@@ -43,44 +84,41 @@ li.jGraduate_tab_current {
 
 .jGraduate_tabs {
 	position: relative;
-	background-color: #ddd;
-	padding: 10px 10px 0 10px;
-	margin: -20px -20px 20px -20px;
-	border-radius: 3px 3px 0 0;
+	padding: 0;
 }
 
 div.jGraduate_Swatch {
 	float: left;
-	margin: 0 15px 0 0;
+	margin: 0 var(--x4) 0 0;
 }
+
 div.jGraduate_GradContainer {
 	border: solid #000 1px;
 	background-image: url(../images/map-opacity.png); 
 	background-position: 0px 0px;
-	height: 256px;
-	width: 256px;
+	height: calc(var(--x16) * 4);
+	width: calc(var(--x16) * 4);
 	position: relative;
 }
 
 div.jGraduate_GradContainer div.grad_coord {
-  background: rgba(0,0,0,0.8);
-  border: 2px solid white;
-  border-radius: 15px;
-  -moz-border-radius: 5px;
-  width: 14px;
-  height: 14px;
+  background: var(--z0);
+  color: var(--z12);
+  box-shadow:  0 2px 4px rgba(0,0,0,0.3);
+  border-radius: var(--x4);
+  width: var(--x4);
+  height: var(--x4);
   position: absolute;
-  margin: -7px -7px;
+  margin: calc(var(--x2) * -1);
   top: 0;
   left: 0;
   text-align: center;
-  font-size: 8px;
+  font-size: 10px;
   line-height: 14px;
-  color: white;
   text-decoration: none;
-  cursor: pointer;
-  -moz-user-select: none;
-  -webkit-user-select: none;
+  cursor: move;
+  user-select: none;
+  font-weight: bold;
 }
 
 .jGraduate_AlphaArrows {
@@ -90,7 +128,7 @@ div.jGraduate_GradContainer div.grad_coord {
 }
 
 div.jGraduate_Opacity {
-	border: 2px inset #eee;
+	border: solid var(--z13) 1px;
 	margin-top: 14px;
 	background-color: black;
 	background-image: url(../images/Maps.png);
@@ -103,9 +141,12 @@ div.jGraduate_StopSlider {
 	margin: -10px 0 0 -10px;
 	width: 276px;
 	overflow: visible;
-	background: white;
-	height: 45px;
-	cursor: pointer;
+	height: var(--x11);
+	cursor: copy;
+}
+
+div.jGraduate_StopSlider svg path {
+	cursor:  ew-resize;
 }
 
 div.jGraduate_StopSection {
@@ -121,6 +162,14 @@ input.jGraduate_Ok, input.jGraduate_Cancel {
 	display: block;
 	width: 100px;
 }
+
+.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel, .jGraduate_Picker input.Cancel {
+	background-color:  var(--z5);
+}
+.jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel:hover, .jGraduate_Picker input.Cancel:hover {
+	background-color:  var(--z6);
+}
+
 input.jGraduate_Ok {
 	margin: 0 0 5px 0;
 }
@@ -140,33 +189,30 @@ input.jGraduate_Ok {
 }
 
 label.jGraduate_Form_Heading {
-
-  color: #333;
-	padding: 2px;
-	font-weight: bold;
-	font-size: 13px;
+  color: var(--z15);
+	font-size: 14px;
 }
 
 div.jGraduate_Form_Section {
-	-moz-border-radius: 5px;
-	-webkit-border-radius: 5px;
-	padding: 15px 5px 5px 5px;
-	margin: 5px 2px;
+	padding: var(--x4) var(--x1) var(--x1) var(--x1);
 	width: 100px;
 	text-align: center;
-	overflow: auto;
-	background: #eee;
+	overflow: hidden;
+	background: var(--z2);
+	border-radius: var(--x1);
+	position: relative;
 }
 
 div.jGraduate_Form label {
-	padding: 0 2px;
-	color: #333;
+	color: var(--x12);
+	position: relative;
+	top: -6px;
+	padding:  0 var(--x2);
 }
 
 div.jGraduate_StopSection input[type=text],
 div.jGraduate_Slider input[type=text] {
 	width: 33px;
-	color: #333;
 }
 
 div.jGraduate_LightBox {
@@ -183,14 +229,12 @@ div.jGraduate_LightBox {
 div.jGraduate_stopPicker {
   position: absolute;
   display: none;
-  background: 
-  white;
+  background: white;
   padding: 20px;
   border-radius: 3px;
   width: 530px;
   height: 300px;
-  box-shadow: 0 5px 25px 
-  black;
+  box-shadow: 0 5px 25px black;
 }
 
 
@@ -206,13 +250,11 @@ div.jGraduate_stopPicker {
 	position: absolute;
 	right: 10px;
 	top: 0;
-	color: #999;
 	font-weight: bold;
 }
 
 .jGraduate_gradPick div.jGraduate_Slider label:last-child input {
   margin: 0 3px 0 0;
-  color: #333;
 }
 
 .jGraduate_gradPick .jGraduate_Form {
@@ -233,12 +275,6 @@ div.jGraduate_stopPicker {
   float: left;
 }
 
-.jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field label, .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field input {
-width: auto;
-float: left;
-font-size: 11px;
-}
-
 .jGraduate_gradPick .jGraduate_Form.jGraduate_rg_field #color_picker_jGraduate_match_ctr {
   float: none;
 }
@@ -247,6 +283,11 @@ font-size: 11px;
   clear: left;
 }
 
+.jGraduate_gradPick .jGraduate_Form label.match-center {
+  white-space: nowrap;
+  font-size:  11px;
+}
+
 .jGraduate_gradPick .jGraduate_Points {
 	position: static;
 	float: left;
@@ -280,7 +321,6 @@ font-size: 11px;
 	float: left;
 	width: 100%;
   position: relative;
-  margin: 5px 0;
 }
 
 .jGraduate_Slider .jGraduate_Form_Section {
@@ -292,16 +332,17 @@ font-size: 11px;
 
 
 .jGraduate_Slider label.prelabel {
-	width: 40px;
+	width: var(--x10);
 	text-align: left;
+	line-height: var(--x8);
 }
 
 .jGraduate_SliderBar {
-	width: 140px;
+	width: 120px;
 	float: left;
-	margin: 0 5px;
-	border:1px solid #BBB;
-	height:20px;
+	margin: 0 var(--x2);
+	border: 1px solid var(--z6);
+	height: var(--x4);
 	position: relative;
 }
 
@@ -310,7 +351,7 @@ div.jGraduate_Slider input {
 }
 
 div.jGraduate_Slider img {
-	top: 0;
+	top: -2px;
 	left: 0;
 	position: absolute;
 	cursor:ew-resize;
@@ -320,13 +361,13 @@ div.jGraduate_Slider img {
   -webkit-appearance: none;
 	margin: 0;
   position: absolute;
-  bottom: 5px;
-  right: 5px;
+  bottom: var(--x2);
+  right: var(--x2);
 }
 
 .jPicker .Button .Cancel, .jGraduate_Picker .jGraduate_OkCancel .jGraduate_Cancel {
   margin: 0;
   position: absolute;
-	bottom: 5px;
-	left: 5px;
+	bottom: var(--x2);
+	left: var(--x2);
 }
diff --git a/src/css/jpicker.css b/src/css/jpicker.css
index 8fca5601..d7301173 100644
--- a/src/css/jpicker.css
+++ b/src/css/jpicker.css
@@ -1,9 +1,18 @@
+table.jPicker {
+    border-collapse: collapse;
+    margin-top: var(--x4);
+}
+
+table.jPicker td {
+    padding:  var(--x1);
+}
+
 .jPicker .Icon {
     display: inline-block;
-    height: 24px;
+    height: var(--x6);
     position: relative;
     text-align: left;
-    width: 25px;
+    width: var(--x6);
 }
 .jPicker .Icon span.Color, .jPicker .Icon span.Alpha {
     background-position: 2px 2px;
@@ -26,14 +35,9 @@
     z-index: 10;
 }
 
-table.jPicker {
-    width: 545px;
-     z-index: 20;
-}
-
 .jPicker .Move {
-    background-color: #ddd;
-    border-color: #fff #666 #666 #fff;
+    background-color: var(--z12);
+    border-color: var(--z15) var(--z6) var(--z6) var(--z15);
     border-style: solid;
     border-width: 1px;
     cursor: move;
@@ -45,7 +49,7 @@ table.jPicker {
 }
 
 .jPicker .Map {
-  border:  solid #000 1px;
+  border:  solid var(--z1) 1px;
   height: 256px;
   width: 256px;
   cursor: crosshair;
@@ -55,12 +59,11 @@ table.jPicker {
   position: relative;
 }
 
-
 .jPicker .Bar {
-    border:  solid #000 1px;
+    border:  solid var(--z1) 1px;
     cursor: n-resize;
     height: 260px;
-    margin: 0 15px;
+    margin: 0;
     overflow: hidden;
     padding: 0;
     position: relative;
@@ -69,7 +72,6 @@ table.jPicker {
     width: 20px;
 }
 
-
 .jPicker .Map .Map1, 
 .jPicker .Map .Map2, 
 .jPicker .Map .Map3, 
@@ -130,9 +132,8 @@ table.jPicker {
     width: 62px;
 }
 
-
 .jPicker .Preview div span {
-    border: 1px solid #000;
+    border: 1px solid var(--z0);
     display: block;
     height: 30px;
     margin: 0 auto;
@@ -157,8 +158,9 @@ table.jPicker {
 
 .jPicker td.Radio {
     margin: 0;
-    padding: 0;
+    padding: 0 0 0 var(--x2);
     width: var(--x8);
+    white-space: nowrap;
 }
 .jPicker td.Radio input {
     margin: 0 var(--x1) 0 0;
@@ -172,33 +174,51 @@ table.jPicker {
     padding: 0;
     text-align: left;
     width: 70px;
+    white-space: nowrap;
 }
 .jPicker tr.Hex td.Text {
     width: 100px;
-    color: #666;
+}
+
+.jPicker tr.Hex td.Text label {
+    margin-left: var(--x4);
 }
 
 .jPicker tr.Hex td.Text span {
     width: 100px;
     color: #333;
 }
+
 .jPicker td.Text input {
-    background-color: #fff;
-    height: 15px;
-    margin: 0 0 0 5px;
+    background-color: var(--z15);
+    height: var(--x4);
+    margin: 0 0 0 var(--x1);;
     text-align: left;
-    width: 30px;
-    color: #333;
+    width: var(--x8);
+    color: var(--z15);
+}
+
+#color_picker input[type=text], #color_picker  input[type=number] {
+  -webkit-appearance:  none;
+  width: 30px;
+  background: var(--z0);
+  border: none;
+  border-radius:  var(--x1);
+}
+
+#color_picker input[type=radio] {
+    position: relative;
+    top:  2px;
 }
 
 #color_picker .jPicker tr.Hex td.Text input.Hex {
-    width: 50px;
+    width: var(--x12);
     display: inline-block;
     float: none;
 }
 
 .jPicker tr.Hex td.Text input.AHex {
-    width: 20px;
+    width: var(--x5);
     display: none;
 }
 .jPicker .Grid {
@@ -207,14 +227,22 @@ table.jPicker {
     width: 108px;
 }
 .jPicker .Grid span.QuickColor {
-    cursor: pointer;
+    cursor: url(../images/eyedropper.svg) 0 23, crosshair;
+    background-repeat:  no-repeat;
     display: inline-block;
-    height: 15px;
-    line-height: 15px;
+    height: var(--x4);
+    line-height: var(--x4);
     margin: 0;
     padding: 0;
-    width: 18px;
+    width: var(--x4);
 }
+
+.jPicker .Grid span.QuickColor:hover {
+    position: relative;
+    z-index: 10;
+    outline:  solid var(--z0) 1px;
+}
+
 .jPicker td  {
   vertical-align:  top;
 }
diff --git a/src/css/loading.css b/src/css/loading.css
new file mode 100644
index 00000000..9cfeb020
--- /dev/null
+++ b/src/css/loading.css
@@ -0,0 +1,47 @@
+#workarea > svg {
+  display: none;
+}
+
+.loading #svgcanvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+#svgcanvas:after {
+  transition:  opacity var(--transition-duration) 300ms;
+  opacity: 0;
+}
+
+.loading #svgcanvas:after {
+  position: absolute;
+  content: attr(title);
+  font-size:  13px;
+  font-weight: 600;
+  line-height: var(--x6);
+  padding:  0 var(--x2);
+  background:  var(--z2);
+  color:  var(--z10);
+  z-index: 100;
+  opacity: 1;
+  border-radius: var(--x1);
+}
+
+.loading #workarea > svg {
+  display: block;
+  position: absolute;
+  background:  white;
+  top:  50%;
+  left:  50%;
+  transform:  translate(-50%, -50%);
+  opacity: 0.7;
+}
+
+
+
+
diff --git a/src/css/menu.css b/src/css/menu.css
index ffd9c355..1b022779 100644
--- a/src/css/menu.css
+++ b/src/css/menu.css
@@ -38,7 +38,6 @@
 }
 
 .menu_list {
-  display: none;
   position: absolute;
   left: 0;
   top: var(--x8);
@@ -46,14 +45,20 @@
   background: var(--z15);
   padding: var(--x2) 0;
   border-radius: 0 var(--x2) var(--x2) var(--x2);
-  box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.4);
+  box-shadow:  var(--shadow);
 }
 
+
 #menu_bar.active .menu.open .menu_title {
   background: var(--z15);
   color: var(--z1);
 }
 
+.inverted #menu_bar.active .menu.open .menu_title {
+  background: var(--z0);
+  color: var(--z15);
+}
+
 .menu .menu_list {
   display: none;
   position: absolute;
@@ -64,10 +69,25 @@
   overflow: hidden;
   line-height: var(--x6);
   padding: var(--x1) var(--x16) var(--x1) var(--x6);
-  cursor: default;
+  cursor: pointer;
   color: var(--z3);
 }
 
+.menu_list input[type=file] {
+  -webkit-appearance: none;
+  position: absolute;
+  opacity: 0;
+  cursor: pointer;
+  left: 0;
+  right: 0;
+  top: 0;
+  bottom: 0;
+  display: block;
+  background: red;
+  z-index: 100;
+}
+
+
 .menu_list .menu_item.tool_button {
   background: transparent;
   border: none;
@@ -87,7 +107,7 @@
 
 .menu_list .menu_item:hover,
 .menu_list .menu_item.push_button_pressed:hover {
-  background: var(--d15);
+  background: var(--accent15);
   color: #000;
 }
 
@@ -121,9 +141,58 @@
 }
 
 .menu_list .menu_item:not(.disabled):hover span {
-  background: var(--d13);
+  background: var(--accent13);
 }
 
 #modal_donate {
   display: none;
 }
+
+.menu-right {
+  margin-left: auto;
+}
+
+.menu-right button {
+  background: transparent;
+  line-height: var(--x5);
+}
+
+.menu-right button:hover {
+  background: transparent;
+}
+
+.menu-right button:active {
+  box-shadow: none;
+  outline: none;
+}
+
+.menu-right button:hover svg {
+  fill:  var(--z12);
+}
+
+.menu-right svg {
+  fill:  var(--z5);
+}
+
+.inverted .menu-right svg {
+  fill:  var(--z10);
+}
+
+#logo svg {
+  pointer-events: none;
+  margin-top: var(--x2);
+  fill: var(--z7);
+}
+
+#logo svg path:last-child {
+  fill:  var(--z13);
+}
+
+#logo:hover svg {
+  fill:  var(--z9);
+}
+
+#logo svg path:last-child {
+  fill:  var(--z15);
+}
+
diff --git a/src/css/method-draw.css b/src/css/method-draw.css
index 6a26c22b..1addd619 100644
--- a/src/css/method-draw.css
+++ b/src/css/method-draw.css
@@ -13,6 +13,10 @@ body {
   padding: 0;
 }
 
+body.inverted {
+  background: var(--z2);
+}
+
 ::selection {background: #000; color: #fff; /* Safari */}
 ::-moz-selection {background: #000; color: #fff; /* Firefox */}
 
@@ -32,7 +36,7 @@ html, body {
 
 ::-webkit-scrollbar-track {
     border-radius: 10px;
-    background: var(--z2);
+    background: transparent;
 }
 
 ::-webkit-scrollbar-thumb {
@@ -41,7 +45,11 @@ html, body {
 }
 
 ::-webkit-scrollbar-corner {
-  background: var(--z1);
+  background: transparent;
+}
+
+.inverted ::-webkit-scrollbar-thumb {
+    background: var(--z3);
 }
 
 
@@ -76,12 +84,6 @@ div#font-selector .font-item:hover {
   background-color: #eee;
 }
 
-#color_picker input[type=text], #color_picker  input[type=number] {
-  width: 30px;
-  background: #fff;
-  border: solid rgba(0,0,0,0.3) 1px;
-}
-
  .dropdown_set input[type=text],  .dropdown_set input[type=number] {
   width: 50px;
 }
@@ -90,7 +92,7 @@ div#font-selector .font-item:hover {
  input[type=text].tuco,  input[type=number].tuco {width: 150px;}
 
  input[type=submit],  input[type=button], button {
-  background: var(--d7);
+  background: var(--accent7);
   color: var(--z15);
   border-radius: var(--x1);
   padding: var(--x2) var(--x4);
@@ -104,13 +106,13 @@ div#font-selector .font-item:hover {
 input[type=submit]:hover,
 input[type=button]:hover,  
 button:hover {
-  background: var(--d9);
+  background: var(--accent9);
 }
 
 input[type=submit]:active,  
 input[type=button]:active,
 button:active { 
-  box-shadow: 0 0 0 var(--x1) var(--d14);
+  box-shadow: 0 0 0 var(--x1) var(--accent14);
   outline: none;
 }
 
@@ -207,18 +209,7 @@ button:focus {
   overflow: hidden;
 }
 
-input[type=file] {
-  -webkit-appearance: none;
-  position: absolute;
-  opacity: 0;
-  background: red;
-  z-index: 10;
-  height: 30px;
-  width: 100%;
-  transform: translate(-100%, 0);
-}
-
- .disabled {
+.disabled {
   opacity: 0.5;
   cursor: default;
 }
@@ -227,10 +218,6 @@ input[type=file] {
   padding-right: 5px;
 }
 
-#text {
-  position: absolute;
-}
-
  #tool_bold span,  #tool_italic span { 
   position: absolute;
   width: 100%;
@@ -240,17 +227,6 @@ input[type=file] {
   opacity: 0;
 }
 
- #color_picker {
-  position: absolute;
-  display: none;
-  background: #fff;
-  height: 350px;
-  border-radius: 3px;
-  z-index: 5;
-  box-shadow: 0 5px 10px #000;
-  width: 530px;
-}
-
  #tools_bottom {
   position: absolute;
   left: var(--x12);
@@ -260,23 +236,6 @@ input[type=file] {
   overflow: visible;
 }
 
-.draginput.text-input input, 
-.draginput.text-input input:hover, 
-.draginput.text-input input:active {
-  cursor: text;
-}
-
-.draginput.text-input input {
-  text-align: left;
-  text-indent: 8px;
-}
-
-.draginput.textcontent {
-  position: absolute;
-  opacity: 0;
-  z-index: 0;
-}
-
  ul li.current {
   background-color: #F4E284;
 }
@@ -289,63 +248,6 @@ input[type=file] {
   visibility: none;
 }
 
-.touch .shortcut {
-  display: none;
-}
-
-#workarea.rect, #workarea.line, #workarea.ellipse, #workarea.path, #workarea.shapelib {
-  cursor: crosshair;
-}
-
-#workarea.text {
-  cursor: text;
-}
-
-#workarea.eyedropper {
-  cursor: url(../images/eyedropper.png) 0 16, crosshair;
-}
-
-#workarea.fhpath {
-  cursor: url(../images/pencil_cursor.png) 0 16, crosshair;
-}
-
-#workarea.rotate * {
-  cursor: url(../images/rotate.png) 12 12, auto;
-}
-
-#workarea.select text, #workarea.multiselect text {
-  cursor: default;
-}
-
-#workarea.n-resize * {cursor: n-resize !important;}
-#workarea.e-resize * {cursor: e-resize !important;}
-#workarea.w-resize * {cursor: w-resize !important;}
-#workarea.s-resize * {cursor: s-resize !important;}
-
-#workarea.ne-resize * {cursor: ne-resize !important;}
-#workarea.se-resize * {cursor: se-resize !important;}
-#workarea.nw-resize * {cursor: nw-resize !important;}
-#workarea.sw-resize * {cursor: sw-resize !important;}
-
-#workarea.copy {
-  cursor: copy;
-}
-
-#workarea.zoom {
-  cursor: crosshair;
-  cursor:-moz-zoom-in;
-  cursor:-webkit-zoom-in;
-}
-#workarea.zoom.out {
-  cursor: crosshair;
-  cursor:-moz-zoom-out;
-  cursor:-webkit-zoom-out;
-}
-
-#selectorRubberBand {
-  shape-rendering: crispEdges;
-}
-
 /* For modern browsers */
 .clearfix:before,
 .clearfix:after {
@@ -357,73 +259,6 @@ input[type=file] {
     clear:both;
 }
 
-
-#zoom_label {
-  height: 20px;
-  background: transparent;
-  cursor: default !important;
-  width: auto;
-  padding: 0 20px;
-  margin: 0;
-}
-
-#zoom_panel {
-  padding: 9px 0;
-  right: 175px;
-  position: absolute;
-}
-
-#zoom_panel .caret {
-  margin-top: -5px;
-}
-
-#zoom_label img, #zoom_label svg {
-  width: 16px;
-  height: 16px;
-}
-
-#logo svg {
-  pointer-events: none;
-  margin-top: var(--x2);
-}
-
-#zoomLabel {
-  width: 16px;
-  height: 16px;
-  cursor: pointer;
-}
-
-#zoomLabel svg {
-  fill: var(--z10);
-}
-
-#zoom_label input {
-  color: var(--z10);
-  font-size: 13px;
-  height: auto;
-  width: 50px;
-  padding: 0;
-  cursor: default;
-  position: static;
-}
-
-#zoom_label span {
-  top: 0;
-  left: 0;
-}
-
-body.dragging * {
-  cursor: url(../images/dragging.png), move;
-  cursor: -webkit-grabbing;
-  cursor: -moz-grabbing;
-}
-
-body.drag * {
-  cursor: url(../images/dragging.png), move;
-  cursor: -webkit-grabbing;
-  cursor: -moz-grabbing;
-}
-
 input[readonly=readonly]:focus {
   box-shadow: none;
 }
@@ -444,25 +279,6 @@ input[readonly=readonly]:focus {
   display: block;
 }
 
-#tool_angle_indicator {
-  width:         var(--x12);
-  height:        var(--x12);
-  border-radius: var(--x12);
-  background: var(--z3);
-  position: absolute;
-  bottom: var(--x1);
-  left: 12px;
-}
-
-#tool_angle_indicator_cursor {
-  width:         4px;
-  height:        25px;
-  border-top: solid var(--d7) 3px;
-  position: absolute;
-  margin: 0 0 0 23px;
-  transform-origin: 50% 0;
-}
-
 #stroke_style_label {
   font-size: 30px;
   margin-top: 33px;
diff --git a/src/css/netlify.toml b/src/css/netlify.toml
deleted file mode 100644
index 65242d27..00000000
--- a/src/css/netlify.toml
+++ /dev/null
@@ -1,5 +0,0 @@
-[build]
-  command = "gulp"
-  publish = "dist/"
-[dev]
-   publish="src/"
\ No newline at end of file
diff --git a/src/css/palette.css b/src/css/palette.css
index 70187af3..d6476508 100644
--- a/src/css/palette.css
+++ b/src/css/palette.css
@@ -14,7 +14,7 @@
   height: 20%;
   width: 5.2%;
   float: left;
-  cursor: url(../images/eyedropper.png) 0 16, crosshair;
+  cursor: url(../images/eyedropper.svg) 0 16, crosshair;
 }
 
 .palette_item.transparent, .palette_item.white, .palette_item.black {
diff --git a/src/css/panel.css b/src/css/panel.css
index 66d4227a..dc262b4b 100644
--- a/src/css/panel.css
+++ b/src/css/panel.css
@@ -4,8 +4,9 @@
   width: var(--panel-width);
   right: var(--x1);
   top: var(--x5);
+  bottom: 0;
   border-bottom: none;
-  overflow: visible;
+  overflow: auto;
   padding: 0;
 }
 
@@ -37,3 +38,7 @@
 #panels.multiselected #multiselected_panel .hidable {
   display: none;
 }
+
+#tool_text_on_path {
+  display: none !important;
+}
\ No newline at end of file
diff --git a/src/css/rulers.css b/src/css/rulers.css
index d697337c..1a6ea04e 100644
--- a/src/css/rulers.css
+++ b/src/css/rulers.css
@@ -6,6 +6,10 @@
   -webkit-font-smoothing: none;
 }
 
+.inverted #rulers > div {
+  background: var(--z1);
+}
+
 #rulers #ruler_corner {
   top: var(--x8);
   left: var(--x12);
diff --git a/src/css/select.css b/src/css/select.css
index 53ba5b34..e672f207 100644
--- a/src/css/select.css
+++ b/src/css/select.css
@@ -19,7 +19,7 @@
   color: var(--z14);
   height: var(--x8);
   display: block;
-  width: calc(100% - var(--x4));
+  width: calc(100% - var(--x2));
   padding: 0 var(--x4);
   border: none;
   border-radius: var(--x1);
@@ -27,6 +27,6 @@
 
 .select-input select:focus {
   outline: none;
-  box-shadow: 0 0 0 1px var(--d7);
+  box-shadow: 0 0 0 1px var(--accent7);
 
 }
\ No newline at end of file
diff --git a/src/css/shapelib.css b/src/css/shapelib.css
index 1ef9eac1..89758225 100644
--- a/src/css/shapelib.css
+++ b/src/css/shapelib.css
@@ -2,7 +2,7 @@
   overflow: auto;
   top: 0;
   bottom: 0;
-  left: 110px;
+  left: 136px;
   right: 0;
   position: absolute;
   vertical-align: top;
@@ -14,69 +14,58 @@
   position: absolute;
   left: 0;
   top: 0;
-  height: 300px;
+  height: 320px;
   background: var(--z14);
-  border-radius: 3px 0 0 3px;
+  border-radius: var(--x1) 0 0 var(--x1);
   z-index: 2;
 }
+
 #shape_cats > div {
-  line-height: 1em;
-  padding: 0 .5em;
-  border-bottom: 1px solid var(--z13);
+  padding: 0 var(--x4);
   background: var(--z14);
-  color: var(--z3);
-  height: 26px;
-  line-height: 26px;
+  color: var(--z6);
+  height: var(--x7);
+  line-height: var(--x7);
+  transition:  background-color 100ms ease;
 }
 
 #shape_cats > div:first-child {
-  border-radius: 3px 0 0 0;
+  border-radius: var(--x1) 0 0 0;
 }
 
 #shape_cats > div:last-child {
-  border-radius: 0 0 0 3px;
+  border-radius: 0 0 0 var(--x1);
 }
 
 #shape_cats div:hover {
-  background: var(--z15);
   color: var(--z0);
 }
+
 #shape_cats div.current {
   font-weight: bold;
-  background: var(--z3);
+  background: var(--accent7);
   color: var(--z15);
-  position: relative;
-}
-
-#shape_cats div.current:after {
-  content: '';
-  position: absolute;
-  right: -26px;
-  top: 0;
-  border: solid transparent 13px;
-  border-left-color: var(--z3);
 }
 
-
- .tools_flyout {
+.tools_flyout {
   position: absolute;
   display: none;
   cursor: pointer;
-  width: 385px;
+  width: 410px;
   z-index: 10;
-  left: 47px;
+  left: var(--x12);
   top: 230px;
-  height: 324px;
+  height: 336px;
   background: var(--z15);
-  border-radius: 5px;
-  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.5);
+  border-radius: var(--x1);
+  box-shadow: var(--shadow);
 }
 
  .tools_flyout .tool_button {
   float: left;
   background-color: var(--z15);
-  height: 24px;
-  width: 24px;
+  height: var(--x6);
+  width: var(--x6);
 }
 
 /* Necessary to keep the flyouts sized properly */
@@ -85,16 +74,13 @@
 .tools_flyout .tool_button,
 .tools_flyout .tool_flyout {
   background: var(--z15);
-  width: 40px;
-  height: 40px;
-  margin: 5px;
-  border-radius: 0px;
-  -moz-border-radius: 0px;
-  -webkit-border-radius: 0px; 
-  border-width: 0;
+  width: var(--x10);
+  height: var(--x10);
+  margin: var(--x1);
 }
 
-.tools_flyout .tool_button svg {
+.tools_flyout .tool_button svg,
+.inverted .tools_flyout .tool_button svg {
   fill: var(--z4);
 }
 
diff --git a/src/css/sponsors.css b/src/css/sponsors.css
index 16de94a4..6deb7781 100644
--- a/src/css/sponsors.css
+++ b/src/css/sponsors.css
@@ -1,7 +1,7 @@
 #sponsors {
   display: none;
-  margin-left: auto;
-  margin-right: calc(var(--panel-width) + var(--x4));
+  position: absolute;
+  right: calc(var(--panel-width) + var(--x4));
 }
 
 .sponsor a {
@@ -22,7 +22,7 @@
 
 .sponsor a:hover {
   color: var(--z15);
-  background: var(--d7);
+  background: var(--accent7);
 }
 
 .sponsor .deta {
@@ -77,8 +77,8 @@
 }
 
 .sponsor a:hover {
-  color: var(--z15);
-  background: var(--d7);
+  color: var(--z0);
+  background: var(--accent7);
 }
 
 .sponsor a:hover + .sponsor-description {
@@ -90,7 +90,7 @@
 .sponsor-description {
   transition: all var(--transition-duration) ease;
   position: absolute;
-  right: calc(var(--panel-width) + var(--x4));
+  right: 0;
   top: var(--x10);
   width: calc(var(--x16)*4);
   z-index: 100;
@@ -98,7 +98,7 @@
   padding: var(--x6);
   border-radius: var(--x1);
   line-height: 150%;
-  box-shadow: var(--x1) var(--x1) var(--x8) rgba(0,0,0,0.2);
+  box-shadow: var(--shadow);
   margin-left: 0;
   opacity: 0;
   pointer-events: none;
diff --git a/src/css/text.css b/src/css/text.css
index 53d4268d..b4b252ce 100644
--- a/src/css/text.css
+++ b/src/css/text.css
@@ -14,6 +14,7 @@
   line-height: var(--x10);
   bottom: 0;
   border-top: solid var(--z1) 2px;
+  cursor:  pointer;
 }
 
 #tool_bold {
@@ -29,15 +30,16 @@
   font-size: 24px;
 }
 
-
 #tool_bold:hover,   #tool_italic:hover {
   color: var(--z15);
+  background-color:  var(--z3);
 }
 
 #tool_bold.disabled,
 #tool_italic.disabled {
   opacity: 1;
   color: var(--z4);
+  pointer-events: none;
 }
 
 #tool_bold.active,   #tool_italic.active {
@@ -49,12 +51,18 @@
   font-size: 2em;
   line-height: 80px;
   padding: 0 var(--x2);
+  white-space: nowrap;
 }
 
 #preview_font + .caret {
   right: var(--x2);
 }
 
+.draginput:hover #preview_font:after {
+  border-right-color: var(--z3);
+  background: linear-gradient(to right, rgba(0,0,0,0), var(--z3));
+}
+
 #preview_font:after {
   content: '';
   position: absolute;
@@ -65,3 +73,7 @@
   border-right: solid var(--z2) 10px;
   background: linear-gradient(to right, rgba(0,0,0,0), var(--z2));
 }
+
+#textpath-panel {
+  display: none;
+}
\ No newline at end of file
diff --git a/src/css/tools.css b/src/css/tools.css
index cc747c9d..3bf1ff7a 100644
--- a/src/css/tools.css
+++ b/src/css/tools.css
@@ -1,4 +1,4 @@
- #tools_left {
+#tools_left {
   position: absolute;
   border-right: none;
   width: var(--x12);
@@ -14,28 +14,54 @@
   cursor: pointer;
   line-height: 60px;
   text-align: center;
+  transform: scale(0.8);
 }
 
-.tool_button svg {
-  vertical-align: center;
-  fill: var(--z5);
+.inverted .tool_button svg {
+  fill: var(--z13);
+}
+
+.tool_button:hover {
+  transform: scale(1);
 }
 
 .tool_button:hover svg {
-  fill: var(--z10);
+  fill: var(--z13);
 }
 
 .tool_button.current {
-  background-color: var(--z0);
+  transform: scale(1.4);
+}
+
+.tool_button svg {
+  vertical-align: center;
+  fill: var(--z5);
 }
 
 .tool_button.current svg {
-  fill: var(--d15);
+  fill: var(--accent8);
 }
 
+.tool_button.current svg {
+  fill: var(--accent7);
+}
+
+
 .tool_button.disabled svg {
   background-color: #aaa;
   cursor: not-allowed;
   fill: var(--z3);
   pointer-events: none;
+}
+
+#tool_rect svg {
+  position: relative;
+  top: -1px;
+  left:  1px;
+}
+
+#tool_ellipse svg {
+  position: relative;
+  top: 2px;
+  left: 1px;
 }
\ No newline at end of file
diff --git a/src/css/zoom-dropdown.css b/src/css/zoom-dropdown.css
new file mode 100644
index 00000000..60883d79
--- /dev/null
+++ b/src/css/zoom-dropdown.css
@@ -0,0 +1,79 @@
+#zoom_panel,
+#zoom_select {
+  padding: var(--x2) 0;
+  right: calc(var(--panel-width) + var(--x2));
+  position: absolute;
+  cursor:  pointer;
+  width:  100px;
+}
+
+#zoom_label:after {
+  content: '';
+}
+
+#zoom_select {
+  opacity: 0;
+  z-index: 100;
+}
+
+#zoom_select:hover + div {
+  opacity:  1;
+}
+
+#zoom_label {
+  position: absolute;
+  background: transparent;
+  width: 100%;
+  margin: 0;
+}
+
+#zoom_panel .caret {
+  margin-top: -5px;
+}
+
+#zoom_label img, #zoom_label svg {
+  width: var(--x4);
+  height: var(--x4);
+}
+
+#zoomLabel {
+  width: var(--x4);
+  height: var(--x4);
+  cursor: pointer;
+}
+
+#zoomLabel svg {
+  fill: var(--z10);
+  position: relative;
+  top: 2px;
+}
+
+#zoom_label input {
+  -webkit-appearance: none;
+  color: var(--z10);
+  font-size: 13px;
+  height: auto;
+  width: var(--x12);
+  padding: 0;
+  cursor: default;
+  position: absolute;
+  background:  transparent;
+  border:  none;
+  top:  2px;
+  left:  var(--x6);
+  pointer-events: none;
+}
+
+#zoom_label select {
+  -webkit-appearance: none;
+  position: absolute;
+  top:  0;
+  left:  0;
+  bottom:  0;
+  right:  0;
+}
+
+#zoom_label span {
+  top: 0;
+  left: 0;
+}
\ No newline at end of file
diff --git a/src/font-files/Anton-Regular.ttf b/src/font-files/Anton-Regular.ttf
deleted file mode 100755
index 8c2caa68..00000000
Binary files a/src/font-files/Anton-Regular.ttf and /dev/null differ
diff --git a/src/font-files/Asset-Regular.ttf b/src/font-files/Asset-Regular.ttf
deleted file mode 100755
index 2aee1268..00000000
Binary files a/src/font-files/Asset-Regular.ttf and /dev/null differ
diff --git a/src/font-files/BAIR.TTF b/src/font-files/BAIR.TTF
deleted file mode 100755
index 4012f0e1..00000000
Binary files a/src/font-files/BAIR.TTF and /dev/null differ
diff --git a/src/font-files/BAUHS93_0.TTF b/src/font-files/BAUHS93_0.TTF
deleted file mode 100755
index c4c6db7e..00000000
Binary files a/src/font-files/BAUHS93_0.TTF and /dev/null differ
diff --git a/src/font-files/Beastmachine.otf b/src/font-files/Beastmachine.otf
deleted file mode 100755
index 491f2170..00000000
Binary files a/src/font-files/Beastmachine.otf and /dev/null differ
diff --git a/src/font-files/Calistoga-Regular.ttf b/src/font-files/Calistoga-Regular.ttf
deleted file mode 100755
index 819e7837..00000000
Binary files a/src/font-files/Calistoga-Regular.ttf and /dev/null differ
diff --git a/src/font-files/CooperBlackStd-Italic.otf b/src/font-files/CooperBlackStd-Italic.otf
deleted file mode 100755
index e61f444f..00000000
Binary files a/src/font-files/CooperBlackStd-Italic.otf and /dev/null differ
diff --git a/src/font-files/CooperBlackStd.otf b/src/font-files/CooperBlackStd.otf
deleted file mode 100755
index 96f32bc9..00000000
Binary files a/src/font-files/CooperBlackStd.otf and /dev/null differ
diff --git a/src/font-files/EmilysCandy-Regular.ttf b/src/font-files/EmilysCandy-Regular.ttf
deleted file mode 100755
index accf44b5..00000000
Binary files a/src/font-files/EmilysCandy-Regular.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-Bold.ttf b/src/font-files/GenJyuuGothic-Bold.ttf
deleted file mode 100755
index b776d4ab..00000000
Binary files a/src/font-files/GenJyuuGothic-Bold.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-ExtraLight.ttf b/src/font-files/GenJyuuGothic-ExtraLight.ttf
deleted file mode 100755
index c4567d24..00000000
Binary files a/src/font-files/GenJyuuGothic-ExtraLight.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-Heavy.ttf b/src/font-files/GenJyuuGothic-Heavy.ttf
deleted file mode 100755
index c7df944d..00000000
Binary files a/src/font-files/GenJyuuGothic-Heavy.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-Light.ttf b/src/font-files/GenJyuuGothic-Light.ttf
deleted file mode 100755
index 3df37ac8..00000000
Binary files a/src/font-files/GenJyuuGothic-Light.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-Medium.ttf b/src/font-files/GenJyuuGothic-Medium.ttf
deleted file mode 100755
index 45598f69..00000000
Binary files a/src/font-files/GenJyuuGothic-Medium.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-Monospace-Bold.ttf b/src/font-files/GenJyuuGothic-Monospace-Bold.ttf
deleted file mode 100755
index d3c41c65..00000000
Binary files a/src/font-files/GenJyuuGothic-Monospace-Bold.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-Monospace-ExtraLight.ttf b/src/font-files/GenJyuuGothic-Monospace-ExtraLight.ttf
deleted file mode 100755
index e2081013..00000000
Binary files a/src/font-files/GenJyuuGothic-Monospace-ExtraLight.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-Monospace-Heavy.ttf b/src/font-files/GenJyuuGothic-Monospace-Heavy.ttf
deleted file mode 100755
index 988a74a5..00000000
Binary files a/src/font-files/GenJyuuGothic-Monospace-Heavy.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-Monospace-Light.ttf b/src/font-files/GenJyuuGothic-Monospace-Light.ttf
deleted file mode 100755
index 28dcd82c..00000000
Binary files a/src/font-files/GenJyuuGothic-Monospace-Light.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-Monospace-Medium.ttf b/src/font-files/GenJyuuGothic-Monospace-Medium.ttf
deleted file mode 100755
index 136739b6..00000000
Binary files a/src/font-files/GenJyuuGothic-Monospace-Medium.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-Monospace-Normal.ttf b/src/font-files/GenJyuuGothic-Monospace-Normal.ttf
deleted file mode 100755
index bbaf7124..00000000
Binary files a/src/font-files/GenJyuuGothic-Monospace-Normal.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-Monospace-Regular.ttf b/src/font-files/GenJyuuGothic-Monospace-Regular.ttf
deleted file mode 100755
index cc842c76..00000000
Binary files a/src/font-files/GenJyuuGothic-Monospace-Regular.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-Normal.ttf b/src/font-files/GenJyuuGothic-Normal.ttf
deleted file mode 100755
index 8990e9dd..00000000
Binary files a/src/font-files/GenJyuuGothic-Normal.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-P-Bold.ttf b/src/font-files/GenJyuuGothic-P-Bold.ttf
deleted file mode 100755
index 7e6dd8ea..00000000
Binary files a/src/font-files/GenJyuuGothic-P-Bold.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-P-ExtraLight.ttf b/src/font-files/GenJyuuGothic-P-ExtraLight.ttf
deleted file mode 100755
index 78627f35..00000000
Binary files a/src/font-files/GenJyuuGothic-P-ExtraLight.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-P-Heavy.ttf b/src/font-files/GenJyuuGothic-P-Heavy.ttf
deleted file mode 100755
index c8e16bfe..00000000
Binary files a/src/font-files/GenJyuuGothic-P-Heavy.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-P-Light.ttf b/src/font-files/GenJyuuGothic-P-Light.ttf
deleted file mode 100755
index 6063340c..00000000
Binary files a/src/font-files/GenJyuuGothic-P-Light.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-P-Medium.ttf b/src/font-files/GenJyuuGothic-P-Medium.ttf
deleted file mode 100755
index b8d2f087..00000000
Binary files a/src/font-files/GenJyuuGothic-P-Medium.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-P-Normal.ttf b/src/font-files/GenJyuuGothic-P-Normal.ttf
deleted file mode 100755
index e8ea37d0..00000000
Binary files a/src/font-files/GenJyuuGothic-P-Normal.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-P-Regular.ttf b/src/font-files/GenJyuuGothic-P-Regular.ttf
deleted file mode 100755
index 8e333dbe..00000000
Binary files a/src/font-files/GenJyuuGothic-P-Regular.ttf and /dev/null differ
diff --git a/src/font-files/GenJyuuGothic-Regular.ttf b/src/font-files/GenJyuuGothic-Regular.ttf
deleted file mode 100755
index 838c7d68..00000000
Binary files a/src/font-files/GenJyuuGothic-Regular.ttf and /dev/null differ
diff --git a/src/font-files/GreatVibes-Regular.ttf b/src/font-files/GreatVibes-Regular.ttf
deleted file mode 100755
index 2e01be35..00000000
Binary files a/src/font-files/GreatVibes-Regular.ttf and /dev/null differ
diff --git a/src/font-files/HARLOWSI_0.TTF b/src/font-files/HARLOWSI_0.TTF
deleted file mode 100755
index 3c59ef94..00000000
Binary files a/src/font-files/HARLOWSI_0.TTF and /dev/null differ
diff --git a/src/font-files/HanaMinA.ttf b/src/font-files/HanaMinA.ttf
deleted file mode 100755
index 8a777254..00000000
Binary files a/src/font-files/HanaMinA.ttf and /dev/null differ
diff --git a/src/font-files/HanaMinB.ttf b/src/font-files/HanaMinB.ttf
deleted file mode 100755
index 81c4df21..00000000
Binary files a/src/font-files/HanaMinB.ttf and /dev/null differ
diff --git a/src/font-files/KouzanGyoushoOTF.otf b/src/font-files/KouzanGyoushoOTF.otf
deleted file mode 100755
index 8ebce5af..00000000
Binary files a/src/font-files/KouzanGyoushoOTF.otf and /dev/null differ
diff --git a/src/font-files/KouzanMouhituFontOTF.otf b/src/font-files/KouzanMouhituFontOTF.otf
deleted file mode 100755
index ea6a4fb6..00000000
Binary files a/src/font-files/KouzanMouhituFontOTF.otf and /dev/null differ
diff --git a/src/font-files/KouzanSoushoOTF.otf b/src/font-files/KouzanSoushoOTF.otf
deleted file mode 100755
index d472f28d..00000000
Binary files a/src/font-files/KouzanSoushoOTF.otf and /dev/null differ
diff --git a/src/font-files/MPLUSRounded1c-Black.ttf b/src/font-files/MPLUSRounded1c-Black.ttf
deleted file mode 100644
index d60bb4e7..00000000
Binary files a/src/font-files/MPLUSRounded1c-Black.ttf and /dev/null differ
diff --git a/src/font-files/MPLUSRounded1c-Bold.ttf b/src/font-files/MPLUSRounded1c-Bold.ttf
deleted file mode 100644
index 24164121..00000000
Binary files a/src/font-files/MPLUSRounded1c-Bold.ttf and /dev/null differ
diff --git a/src/font-files/MPLUSRounded1c-ExtraBold.ttf b/src/font-files/MPLUSRounded1c-ExtraBold.ttf
deleted file mode 100644
index 66517f47..00000000
Binary files a/src/font-files/MPLUSRounded1c-ExtraBold.ttf and /dev/null differ
diff --git a/src/font-files/MPLUSRounded1c-Light.ttf b/src/font-files/MPLUSRounded1c-Light.ttf
deleted file mode 100644
index 4ca201c9..00000000
Binary files a/src/font-files/MPLUSRounded1c-Light.ttf and /dev/null differ
diff --git a/src/font-files/MPLUSRounded1c-Medium.ttf b/src/font-files/MPLUSRounded1c-Medium.ttf
deleted file mode 100644
index d774ba00..00000000
Binary files a/src/font-files/MPLUSRounded1c-Medium.ttf and /dev/null differ
diff --git a/src/font-files/MPLUSRounded1c-Regular.ttf b/src/font-files/MPLUSRounded1c-Regular.ttf
deleted file mode 100644
index ce5c82b0..00000000
Binary files a/src/font-files/MPLUSRounded1c-Regular.ttf and /dev/null differ
diff --git a/src/font-files/MPLUSRounded1c-Thin.ttf b/src/font-files/MPLUSRounded1c-Thin.ttf
deleted file mode 100644
index 824e1a30..00000000
Binary files a/src/font-files/MPLUSRounded1c-Thin.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-Black.ttf b/src/font-files/Montserrat-Black.ttf
deleted file mode 100755
index 437b1157..00000000
Binary files a/src/font-files/Montserrat-Black.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-BlackItalic.ttf b/src/font-files/Montserrat-BlackItalic.ttf
deleted file mode 100755
index 52348354..00000000
Binary files a/src/font-files/Montserrat-BlackItalic.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-Bold.ttf b/src/font-files/Montserrat-Bold.ttf
deleted file mode 100755
index 221819bc..00000000
Binary files a/src/font-files/Montserrat-Bold.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-BoldItalic.ttf b/src/font-files/Montserrat-BoldItalic.ttf
deleted file mode 100755
index 9ae2bd24..00000000
Binary files a/src/font-files/Montserrat-BoldItalic.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-ExtraBold.ttf b/src/font-files/Montserrat-ExtraBold.ttf
deleted file mode 100755
index 80ea8061..00000000
Binary files a/src/font-files/Montserrat-ExtraBold.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-ExtraBoldItalic.ttf b/src/font-files/Montserrat-ExtraBoldItalic.ttf
deleted file mode 100755
index 6c961e1c..00000000
Binary files a/src/font-files/Montserrat-ExtraBoldItalic.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-ExtraLight.ttf b/src/font-files/Montserrat-ExtraLight.ttf
deleted file mode 100755
index ca0bbb65..00000000
Binary files a/src/font-files/Montserrat-ExtraLight.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-ExtraLightItalic.ttf b/src/font-files/Montserrat-ExtraLightItalic.ttf
deleted file mode 100755
index f3c1559e..00000000
Binary files a/src/font-files/Montserrat-ExtraLightItalic.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-Italic.ttf b/src/font-files/Montserrat-Italic.ttf
deleted file mode 100755
index eb4232a0..00000000
Binary files a/src/font-files/Montserrat-Italic.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-Light.ttf b/src/font-files/Montserrat-Light.ttf
deleted file mode 100755
index 990857de..00000000
Binary files a/src/font-files/Montserrat-Light.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-LightItalic.ttf b/src/font-files/Montserrat-LightItalic.ttf
deleted file mode 100755
index 20960404..00000000
Binary files a/src/font-files/Montserrat-LightItalic.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-Medium.ttf b/src/font-files/Montserrat-Medium.ttf
deleted file mode 100755
index 6e079f69..00000000
Binary files a/src/font-files/Montserrat-Medium.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-MediumItalic.ttf b/src/font-files/Montserrat-MediumItalic.ttf
deleted file mode 100755
index 0dc3ac9c..00000000
Binary files a/src/font-files/Montserrat-MediumItalic.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-Regular.ttf b/src/font-files/Montserrat-Regular.ttf
deleted file mode 100755
index 8d443d5d..00000000
Binary files a/src/font-files/Montserrat-Regular.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-SemiBold.ttf b/src/font-files/Montserrat-SemiBold.ttf
deleted file mode 100755
index f8a43f2b..00000000
Binary files a/src/font-files/Montserrat-SemiBold.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-SemiBoldItalic.ttf b/src/font-files/Montserrat-SemiBoldItalic.ttf
deleted file mode 100755
index 336c56ec..00000000
Binary files a/src/font-files/Montserrat-SemiBoldItalic.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-Thin.ttf b/src/font-files/Montserrat-Thin.ttf
deleted file mode 100755
index b9858757..00000000
Binary files a/src/font-files/Montserrat-Thin.ttf and /dev/null differ
diff --git a/src/font-files/Montserrat-ThinItalic.ttf b/src/font-files/Montserrat-ThinItalic.ttf
deleted file mode 100755
index e488998e..00000000
Binary files a/src/font-files/Montserrat-ThinItalic.ttf and /dev/null differ
diff --git a/src/font-files/NotoSansJP-Black.otf b/src/font-files/NotoSansJP-Black.otf
deleted file mode 100755
index b587499e..00000000
Binary files a/src/font-files/NotoSansJP-Black.otf and /dev/null differ
diff --git a/src/font-files/NotoSansJP-Bold.otf b/src/font-files/NotoSansJP-Bold.otf
deleted file mode 100755
index f35a28e3..00000000
Binary files a/src/font-files/NotoSansJP-Bold.otf and /dev/null differ
diff --git a/src/font-files/NotoSansJP-Light.otf b/src/font-files/NotoSansJP-Light.otf
deleted file mode 100755
index 88ac9893..00000000
Binary files a/src/font-files/NotoSansJP-Light.otf and /dev/null differ
diff --git a/src/font-files/NotoSansJP-Medium.otf b/src/font-files/NotoSansJP-Medium.otf
deleted file mode 100755
index da1f89ec..00000000
Binary files a/src/font-files/NotoSansJP-Medium.otf and /dev/null differ
diff --git a/src/font-files/NotoSansJP-Regular.otf b/src/font-files/NotoSansJP-Regular.otf
deleted file mode 100755
index 57912987..00000000
Binary files a/src/font-files/NotoSansJP-Regular.otf and /dev/null differ
diff --git a/src/font-files/NotoSansJP-Thin.otf b/src/font-files/NotoSansJP-Thin.otf
deleted file mode 100755
index 7528e2d2..00000000
Binary files a/src/font-files/NotoSansJP-Thin.otf and /dev/null differ
diff --git a/src/font-files/NotoSerifJP-Black.otf b/src/font-files/NotoSerifJP-Black.otf
deleted file mode 100755
index 822e2f00..00000000
Binary files a/src/font-files/NotoSerifJP-Black.otf and /dev/null differ
diff --git a/src/font-files/NotoSerifJP-Bold.otf b/src/font-files/NotoSerifJP-Bold.otf
deleted file mode 100755
index 7448ff62..00000000
Binary files a/src/font-files/NotoSerifJP-Bold.otf and /dev/null differ
diff --git a/src/font-files/NotoSerifJP-ExtraLight.otf b/src/font-files/NotoSerifJP-ExtraLight.otf
deleted file mode 100755
index 2c51c890..00000000
Binary files a/src/font-files/NotoSerifJP-ExtraLight.otf and /dev/null differ
diff --git a/src/font-files/NotoSerifJP-Light.otf b/src/font-files/NotoSerifJP-Light.otf
deleted file mode 100755
index ed50564b..00000000
Binary files a/src/font-files/NotoSerifJP-Light.otf and /dev/null differ
diff --git a/src/font-files/NotoSerifJP-Medium.otf b/src/font-files/NotoSerifJP-Medium.otf
deleted file mode 100755
index f70b7f59..00000000
Binary files a/src/font-files/NotoSerifJP-Medium.otf and /dev/null differ
diff --git a/src/font-files/NotoSerifJP-Regular.otf b/src/font-files/NotoSerifJP-Regular.otf
deleted file mode 100755
index 3da1c044..00000000
Binary files a/src/font-files/NotoSerifJP-Regular.otf and /dev/null differ
diff --git a/src/font-files/NotoSerifJP-SemiBold.otf b/src/font-files/NotoSerifJP-SemiBold.otf
deleted file mode 100755
index 5a48f447..00000000
Binary files a/src/font-files/NotoSerifJP-SemiBold.otf and /dev/null differ
diff --git a/src/font-files/Nunito-Black.ttf b/src/font-files/Nunito-Black.ttf
deleted file mode 100755
index e4fe5d0b..00000000
Binary files a/src/font-files/Nunito-Black.ttf and /dev/null differ
diff --git a/src/font-files/Nunito-BlackItalic.ttf b/src/font-files/Nunito-BlackItalic.ttf
deleted file mode 100755
index e8845a28..00000000
Binary files a/src/font-files/Nunito-BlackItalic.ttf and /dev/null differ
diff --git a/src/font-files/Nunito-Bold.ttf b/src/font-files/Nunito-Bold.ttf
deleted file mode 100755
index 368468ce..00000000
Binary files a/src/font-files/Nunito-Bold.ttf and /dev/null differ
diff --git a/src/font-files/Nunito-BoldItalic.ttf b/src/font-files/Nunito-BoldItalic.ttf
deleted file mode 100755
index dfd2b5ec..00000000
Binary files a/src/font-files/Nunito-BoldItalic.ttf and /dev/null differ
diff --git a/src/font-files/Nunito-ExtraBold.ttf b/src/font-files/Nunito-ExtraBold.ttf
deleted file mode 100755
index 8f5e1f62..00000000
Binary files a/src/font-files/Nunito-ExtraBold.ttf and /dev/null differ
diff --git a/src/font-files/Nunito-ExtraBoldItalic.ttf b/src/font-files/Nunito-ExtraBoldItalic.ttf
deleted file mode 100755
index 51f1f11c..00000000
Binary files a/src/font-files/Nunito-ExtraBoldItalic.ttf and /dev/null differ
diff --git a/src/font-files/Nunito-ExtraLight.ttf b/src/font-files/Nunito-ExtraLight.ttf
deleted file mode 100755
index 251c4711..00000000
Binary files a/src/font-files/Nunito-ExtraLight.ttf and /dev/null differ
diff --git a/src/font-files/Nunito-ExtraLightItalic.ttf b/src/font-files/Nunito-ExtraLightItalic.ttf
deleted file mode 100755
index 10e5df76..00000000
Binary files a/src/font-files/Nunito-ExtraLightItalic.ttf and /dev/null differ
diff --git a/src/font-files/Nunito-Italic.ttf b/src/font-files/Nunito-Italic.ttf
deleted file mode 100755
index 871a9dd2..00000000
Binary files a/src/font-files/Nunito-Italic.ttf and /dev/null differ
diff --git a/src/font-files/Nunito-Light.ttf b/src/font-files/Nunito-Light.ttf
deleted file mode 100755
index ad56724f..00000000
Binary files a/src/font-files/Nunito-Light.ttf and /dev/null differ
diff --git a/src/font-files/Nunito-LightItalic.ttf b/src/font-files/Nunito-LightItalic.ttf
deleted file mode 100755
index f1664ed1..00000000
Binary files a/src/font-files/Nunito-LightItalic.ttf and /dev/null differ
diff --git a/src/font-files/Nunito-Regular.ttf b/src/font-files/Nunito-Regular.ttf
deleted file mode 100755
index c8c90b7c..00000000
Binary files a/src/font-files/Nunito-Regular.ttf and /dev/null differ
diff --git a/src/font-files/Nunito-SemiBold.ttf b/src/font-files/Nunito-SemiBold.ttf
deleted file mode 100755
index 3a30359d..00000000
Binary files a/src/font-files/Nunito-SemiBold.ttf and /dev/null differ
diff --git a/src/font-files/Nunito-SemiBoldItalic.ttf b/src/font-files/Nunito-SemiBoldItalic.ttf
deleted file mode 100755
index 76fa99d7..00000000
Binary files a/src/font-files/Nunito-SemiBoldItalic.ttf and /dev/null differ
diff --git a/src/font-files/OpenSans-Bold.ttf b/src/font-files/OpenSans-Bold.ttf
deleted file mode 100755
index efdd5e84..00000000
Binary files a/src/font-files/OpenSans-Bold.ttf and /dev/null differ
diff --git a/src/font-files/OpenSans-BoldItalic.ttf b/src/font-files/OpenSans-BoldItalic.ttf
deleted file mode 100755
index 9bf9b4e9..00000000
Binary files a/src/font-files/OpenSans-BoldItalic.ttf and /dev/null differ
diff --git a/src/font-files/OpenSans-ExtraBold.ttf b/src/font-files/OpenSans-ExtraBold.ttf
deleted file mode 100755
index 67fcf0fb..00000000
Binary files a/src/font-files/OpenSans-ExtraBold.ttf and /dev/null differ
diff --git a/src/font-files/OpenSans-ExtraBoldItalic.ttf b/src/font-files/OpenSans-ExtraBoldItalic.ttf
deleted file mode 100755
index 08672280..00000000
Binary files a/src/font-files/OpenSans-ExtraBoldItalic.ttf and /dev/null differ
diff --git a/src/font-files/OpenSans-Italic.ttf b/src/font-files/OpenSans-Italic.ttf
deleted file mode 100755
index 11785670..00000000
Binary files a/src/font-files/OpenSans-Italic.ttf and /dev/null differ
diff --git a/src/font-files/OpenSans-Light.ttf b/src/font-files/OpenSans-Light.ttf
deleted file mode 100755
index 6580d3a1..00000000
Binary files a/src/font-files/OpenSans-Light.ttf and /dev/null differ
diff --git a/src/font-files/OpenSans-LightItalic.ttf b/src/font-files/OpenSans-LightItalic.ttf
deleted file mode 100755
index 1e0c3319..00000000
Binary files a/src/font-files/OpenSans-LightItalic.ttf and /dev/null differ
diff --git a/src/font-files/OpenSans-Regular.ttf b/src/font-files/OpenSans-Regular.ttf
deleted file mode 100755
index 29bfd35a..00000000
Binary files a/src/font-files/OpenSans-Regular.ttf and /dev/null differ
diff --git a/src/font-files/OpenSans-SemiBold.ttf b/src/font-files/OpenSans-SemiBold.ttf
deleted file mode 100755
index 54e7059c..00000000
Binary files a/src/font-files/OpenSans-SemiBold.ttf and /dev/null differ
diff --git a/src/font-files/OpenSans-SemiBoldItalic.ttf b/src/font-files/OpenSans-SemiBoldItalic.ttf
deleted file mode 100755
index aebcf142..00000000
Binary files a/src/font-files/OpenSans-SemiBoldItalic.ttf and /dev/null differ
diff --git a/src/font-files/Plaster-Regular.ttf b/src/font-files/Plaster-Regular.ttf
deleted file mode 100755
index 43eaf8b6..00000000
Binary files a/src/font-files/Plaster-Regular.ttf and /dev/null differ
diff --git a/src/font-files/Playball-Regular.ttf b/src/font-files/Playball-Regular.ttf
deleted file mode 100755
index 08fd2686..00000000
Binary files a/src/font-files/Playball-Regular.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-Black.ttf b/src/font-files/Poppins-Black.ttf
deleted file mode 100755
index a9520b78..00000000
Binary files a/src/font-files/Poppins-Black.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-BlackItalic.ttf b/src/font-files/Poppins-BlackItalic.ttf
deleted file mode 100755
index ebfdd707..00000000
Binary files a/src/font-files/Poppins-BlackItalic.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-Bold.ttf b/src/font-files/Poppins-Bold.ttf
deleted file mode 100755
index b94d47f3..00000000
Binary files a/src/font-files/Poppins-Bold.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-BoldItalic.ttf b/src/font-files/Poppins-BoldItalic.ttf
deleted file mode 100755
index e2e64456..00000000
Binary files a/src/font-files/Poppins-BoldItalic.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-ExtraBold.ttf b/src/font-files/Poppins-ExtraBold.ttf
deleted file mode 100755
index 8f008c36..00000000
Binary files a/src/font-files/Poppins-ExtraBold.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-ExtraBoldItalic.ttf b/src/font-files/Poppins-ExtraBoldItalic.ttf
deleted file mode 100755
index b2a9bf55..00000000
Binary files a/src/font-files/Poppins-ExtraBoldItalic.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-ExtraLight.ttf b/src/font-files/Poppins-ExtraLight.ttf
deleted file mode 100755
index ee623825..00000000
Binary files a/src/font-files/Poppins-ExtraLight.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-ExtraLightItalic.ttf b/src/font-files/Poppins-ExtraLightItalic.ttf
deleted file mode 100755
index e392492a..00000000
Binary files a/src/font-files/Poppins-ExtraLightItalic.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-Italic.ttf b/src/font-files/Poppins-Italic.ttf
deleted file mode 100755
index 46203996..00000000
Binary files a/src/font-files/Poppins-Italic.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-Light.ttf b/src/font-files/Poppins-Light.ttf
deleted file mode 100755
index 2ab02219..00000000
Binary files a/src/font-files/Poppins-Light.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-LightItalic.ttf b/src/font-files/Poppins-LightItalic.ttf
deleted file mode 100755
index 6f9279da..00000000
Binary files a/src/font-files/Poppins-LightItalic.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-Medium.ttf b/src/font-files/Poppins-Medium.ttf
deleted file mode 100755
index e90e87ed..00000000
Binary files a/src/font-files/Poppins-Medium.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-MediumItalic.ttf b/src/font-files/Poppins-MediumItalic.ttf
deleted file mode 100755
index d8a251c7..00000000
Binary files a/src/font-files/Poppins-MediumItalic.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-Regular.ttf b/src/font-files/Poppins-Regular.ttf
deleted file mode 100755
index be06e7fd..00000000
Binary files a/src/font-files/Poppins-Regular.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-SemiBold.ttf b/src/font-files/Poppins-SemiBold.ttf
deleted file mode 100755
index dabf7c24..00000000
Binary files a/src/font-files/Poppins-SemiBold.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-SemiBoldItalic.ttf b/src/font-files/Poppins-SemiBoldItalic.ttf
deleted file mode 100755
index 29d5f741..00000000
Binary files a/src/font-files/Poppins-SemiBoldItalic.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-Thin.ttf b/src/font-files/Poppins-Thin.ttf
deleted file mode 100755
index f5c0fdd5..00000000
Binary files a/src/font-files/Poppins-Thin.ttf and /dev/null differ
diff --git a/src/font-files/Poppins-ThinItalic.ttf b/src/font-files/Poppins-ThinItalic.ttf
deleted file mode 100755
index b9100893..00000000
Binary files a/src/font-files/Poppins-ThinItalic.ttf and /dev/null differ
diff --git a/src/font-files/Quicksand-Bold.ttf b/src/font-files/Quicksand-Bold.ttf
deleted file mode 100755
index edfa93f2..00000000
Binary files a/src/font-files/Quicksand-Bold.ttf and /dev/null differ
diff --git a/src/font-files/Quicksand-Light.ttf b/src/font-files/Quicksand-Light.ttf
deleted file mode 100755
index 42ef0726..00000000
Binary files a/src/font-files/Quicksand-Light.ttf and /dev/null differ
diff --git a/src/font-files/Quicksand-Medium.ttf b/src/font-files/Quicksand-Medium.ttf
deleted file mode 100755
index 7eadfad2..00000000
Binary files a/src/font-files/Quicksand-Medium.ttf and /dev/null differ
diff --git a/src/font-files/Quicksand-Regular.ttf b/src/font-files/Quicksand-Regular.ttf
deleted file mode 100755
index cb1596d5..00000000
Binary files a/src/font-files/Quicksand-Regular.ttf and /dev/null differ
diff --git a/src/font-files/Quicksand-SemiBold.ttf b/src/font-files/Quicksand-SemiBold.ttf
deleted file mode 100755
index b280a9d9..00000000
Binary files a/src/font-files/Quicksand-SemiBold.ttf and /dev/null differ
diff --git a/src/font-files/RA BALI.otf b/src/font-files/RA BALI.otf
deleted file mode 100755
index ddb4211a..00000000
Binary files a/src/font-files/RA BALI.otf and /dev/null differ
diff --git a/src/font-files/RacingSansOne-Regular.ttf b/src/font-files/RacingSansOne-Regular.ttf
deleted file mode 100755
index 0a0d4112..00000000
Binary files a/src/font-files/RacingSansOne-Regular.ttf and /dev/null differ
diff --git a/src/font-files/Sacramento-Regular.ttf b/src/font-files/Sacramento-Regular.ttf
deleted file mode 100755
index 6520e7c4..00000000
Binary files a/src/font-files/Sacramento-Regular.ttf and /dev/null differ
diff --git a/src/font-files/Santana-Script.ttf b/src/font-files/Santana-Script.ttf
deleted file mode 100755
index 3806870e..00000000
Binary files a/src/font-files/Santana-Script.ttf and /dev/null differ
diff --git a/src/font-files/SawarabiMincho-Regular.ttf b/src/font-files/SawarabiMincho-Regular.ttf
deleted file mode 100755
index ff94c4b4..00000000
Binary files a/src/font-files/SawarabiMincho-Regular.ttf and /dev/null differ
diff --git a/src/font-files/SpecialElite-Regular.ttf b/src/font-files/SpecialElite-Regular.ttf
deleted file mode 100755
index a645a5e5..00000000
Binary files a/src/font-files/SpecialElite-Regular.ttf and /dev/null differ
diff --git a/src/font-files/Takota.otf b/src/font-files/Takota.otf
deleted file mode 100755
index a5d5d389..00000000
Binary files a/src/font-files/Takota.otf and /dev/null differ
diff --git a/src/font-files/Tangerine-Bold.ttf b/src/font-files/Tangerine-Bold.ttf
deleted file mode 100755
index 8d1d2f50..00000000
Binary files a/src/font-files/Tangerine-Bold.ttf and /dev/null differ
diff --git a/src/font-files/Tangerine-Regular.ttf b/src/font-files/Tangerine-Regular.ttf
deleted file mode 100755
index a4e1032b..00000000
Binary files a/src/font-files/Tangerine-Regular.ttf and /dev/null differ
diff --git a/src/font-files/UnifrakturMaguntia-Regular.ttf b/src/font-files/UnifrakturMaguntia-Regular.ttf
deleted file mode 100755
index 34e0252d..00000000
Binary files a/src/font-files/UnifrakturMaguntia-Regular.ttf and /dev/null differ
diff --git a/src/font-files/aoyagireisyosimo_otf_2_01.otf b/src/font-files/aoyagireisyosimo_otf_2_01.otf
deleted file mode 100755
index 3af649f4..00000000
Binary files a/src/font-files/aoyagireisyosimo_otf_2_01.otf and /dev/null differ
diff --git a/src/font-files/aoyagireisyosimo_ttf_2_02.ttf b/src/font-files/aoyagireisyosimo_ttf_2_02.ttf
deleted file mode 100755
index 8651813e..00000000
Binary files a/src/font-files/aoyagireisyosimo_ttf_2_02.ttf and /dev/null differ
diff --git a/src/font-files/diner_.ttf b/src/font-files/diner_.ttf
deleted file mode 100755
index 94a745f8..00000000
Binary files a/src/font-files/diner_.ttf and /dev/null differ
diff --git a/src/font-files/setofont-ex.ttf b/src/font-files/setofont-ex.ttf
deleted file mode 100755
index efb88b71..00000000
Binary files a/src/font-files/setofont-ex.ttf and /dev/null differ
diff --git a/src/font-files/setofont.ttf b/src/font-files/setofont.ttf
deleted file mode 100755
index ae2da9b9..00000000
Binary files a/src/font-files/setofont.ttf and /dev/null differ
diff --git a/src/images/NoColor.svg b/src/images/NoColor.svg
index 025ba34f..634c4919 100644
--- a/src/images/NoColor.svg
+++ b/src/images/NoColor.svg
@@ -1,7 +1,7 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 15">
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 17 17">
   <g stroke="#F00000" fill="none" fill-rule="evenodd">
-    <path d="M.5.5h16v14H.5z"/>
-    <path d="M1 1l15 13" stroke-linecap="square"/>
-    <path d="M1 14L16 1" stroke-linecap="square"/>
+    <path d="M .5 .5 h 16 v 16 H .5 z"/>
+    <path d="M1 1  l 15 15" stroke-linecap="square"/>
+    <path d="M1 15 L 16 1" stroke-linecap="square"/>
   </g>
 </svg>
\ No newline at end of file
diff --git a/src/images/eyedropper.svg b/src/images/eyedropper.svg
new file mode 100644
index 00000000..170acd32
--- /dev/null
+++ b/src/images/eyedropper.svg
@@ -0,0 +1,17 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="23" height="23" viewBox="0 0 23 23">
+  <defs>
+    <filter x="-17.5%" y="-13.2%" width="135%" height="136.8%" filterUnits="objectBoundingBox" id="a">
+      <feOffset dy="1" in="SourceAlpha" result="shadowOffsetOuter1"/>
+      <feGaussianBlur stdDeviation="1" in="shadowOffsetOuter1" result="shadowBlurOuter1"/>
+      <feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.3 0" in="shadowBlurOuter1" result="shadowMatrixOuter1"/>
+      <feMerge>
+        <feMergeNode in="shadowMatrixOuter1"/>
+        <feMergeNode in="SourceGraphic"/>
+      </feMerge>
+    </filter>
+  </defs>
+  <g filter="url(#a)" transform="translate(2 1)" fill="none" fill-rule="evenodd">
+    <path fill="#FFF" d="M1.46 17.53l1.11-4.01 8.72-8.65 3.03 3.26-8.48 7.92z"/>
+    <path d="M17.35 8.72l-2.13 2.13-1.41-1.42-7.71 7.71L1.5 19 0 17.5l1.86-4.6 7.71-7.71-1.42-1.41 2.13-2.13 7.07 7.07zM18.16 1a3 3 0 010 4.24l-2.92 2.92L11 3.92 13.92 1a3 3 0 014.24 0zM3.56 14.03L2.5 16.5l2.47-1.06L12.4 8 11 6.6l-7.44 7.43z" fill="#000" fill-rule="nonzero"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/src/index.html b/src/index.html
index 37e643ef..d71ea870 100644
--- a/src/index.html
+++ b/src/index.html
@@ -12,6 +12,7 @@
 
   <!-- build:css all.css -->
   <link rel="stylesheet" href="css/base.css" type="text/css"/>
+  <link rel="stylesheet" href="css/method-draw.css" type="text/css"/>
   <link rel="stylesheet" href="css/jpicker.css" type="text/css"/>
   <link rel="stylesheet" href="css/jgraduate.css" type="text/css"/>
   <link rel="stylesheet" href="css/fonts.css" type="text/css"/>
@@ -27,7 +28,6 @@
   <link rel="stylesheet" href="css/source.css" type="text/css"/>
   <link rel="stylesheet" href="css/keyboard.css" type="text/css"/>
   <link rel="stylesheet" href="css/dialog.css" type="text/css"/>
-  <link rel="stylesheet" href="css/method-draw.css" type="text/css"/>
   <link rel="stylesheet" href="css/app.css" type="text/css"/>
   <link rel="stylesheet" href="css/tools.css" type="text/css"/>
   <link rel="stylesheet" href="css/button.css" type="text/css"/>
@@ -36,9 +36,11 @@
   <link rel="stylesheet" href="css/align_buttons.css" type="text/css"/>
   <link rel="stylesheet" href="css/text.css" type="text/css"/>
   <link rel="stylesheet" href="css/sponsors.css" type="text/css"/>
+  <link rel="stylesheet" href="css/zoom-dropdown.css" type="text/css"/>
+  <link rel="stylesheet" href="css/loading.css" type="text/css"/>
   <!-- endbuild -->
 </head>
-<body>
+<body class="loading">
 
 <div id="method-draw" class="app">
 <div id="rulers">
@@ -49,7 +51,6 @@
 
 <div id="workarea">
 <div id="svgcanvas">
-
 </div>
 </div>
 
@@ -57,11 +58,11 @@
   <a class="menu">
     <div class="menu_title" id="logo">
       <svg viewBox="0 0 16 16" width="16" height="16" xmlns="http://www.w3.org/2000/svg">
-        <path d="M-.1 16.1L16 .04V16.1H-.1z" fill="var(--z12)"></path>
-        <path d="M0 16.1V.1l16 16H0z" fill="var(--z6)"></path>
+        <path d="M-.1 16.1L16 .04V16.1H-.1z"></path>
+        <path d="M0 16.1V.1l16 16H0z" fill="var(--z7)"></path>
       </svg>
     </div>
-    <div class="menu_list">
+    <div class="menu_list inverted-undo">
       <div id="modal_about" class="menu_item" data-action="about">About this app...</div>
       <div class="separator"></div>
       <div id="modal_preferences" class="menu_item" data-action="configure">Configure...</div>
@@ -69,19 +70,21 @@
       <div id="modal_donate" class="menu_item" data-action="donate">Donate or sponsor...</div>
     </div>
   </a>
-  
+
   <div class="menu">
     <div class="menu_title">File</div>
-    <div class="menu_list" id="file_menu"> 
+    <div class="menu_list inverted-undo" id="file_menu"> 
       <div data-action="clear" id="tool_clear" class="menu_item">New Document</div>
       
       <div id="tool_open" class="menu_item">
-        Open SVG... <span class="shortcut">⌘O</span></div>
-      <input type="file" accept="image/svg+xml" />
+        <input type="file" accept="image/svg+xml" id="tool_open_input" />
+        Open SVG... <span class="shortcut" style="display: none;">⌘O</span>
+      </div>
       
       <div id="tool_import" class="menu_item">
-        Place Image... <span class="shortcut">⌘K</span></div>
-        <input type="file" accept="image/*" />
+        <input type="file" accept="image/*"  id="tool_import_input" />
+        Place Image... <span class="shortcut" style="display: none;">⌘K</span>
+      </div>
       <div data-action="save" id="tool_save" class="menu_item">Save Image... <span class="shortcut">⌘S</span></div>
       <div data-action="export" id="tool_export" class="menu_item">Export as PNG</div>
     </div>
@@ -89,7 +92,7 @@
 
   <div class="menu">
     <div class="menu_title">Edit</div>
-    <div class="menu_list" id="edit_menu">
+    <div class="menu_list inverted-undo" id="edit_menu">
       <div data-action="undo" class="menu_item" id="tool_undo">Undo <span class="shortcut">⌘Z</span></div>
       <div data-action="redo" class="menu_item" id="tool_redo">Redo <span class="shortcut">⌘Y</span></div>
       <div class="separator"></div>
@@ -103,7 +106,7 @@
   
   <div class="menu">
     <div class="menu_title">Object</div>
-    <div class="menu_list"  id="object_menu">
+    <div class="menu_list inverted-undo" id="object_menu">
       <div class="menu_item action_selected disabled" id="tool_move_top">Bring to Front <span class="shortcut">⌘⇧↑</span></div>
       <div class="menu_item action_selected disabled" id="tool_move_up">Bring Forward <span class="shortcut">⌘↑</span></div>
       <div class="menu_item action_selected disabled" id="tool_move_down">Send Backward <span class="shortcut">⌘↓</span></div>
@@ -119,31 +122,18 @@
 
   <div class="menu">
     <div class="menu_title">View</div>
-    <div class="menu_list" id="view_menu">
+    <div class="menu_list inverted-undo" id="view_menu">
         <div class="menu_item push_button_pressed" id="tool_rulers">View Rulers <span class="shortcut">⇧R</span></div>
         <div class="menu_item" id="tool_wireframe">View Wireframe</div>
         <div class="separator"></div>
         <div class="menu_item" id="tool_source" data-action="source">Source... <span class="shortcut">⌘U</span></div>
     </div>
   </div>
-
-  <div class="sponsors" id="sponsors">
-    <div class="sponsor">
-      <a href="https://deta.space/discovery/method-draw?ref=method.ac" class="deta">
-        <span></span><span></span><span></span><span></span>
-        Install
-      </a>
-      <div class="sponsor-description">
-          <strong>Install Method Draw on Deta Space</strong>
-          <span>With Method Draw on Deta Space, you can securely save, open, and share your designs in the cloud.</span>
-          <p>These designs are available to you across your devices, over the internet, for free.</p><p> Click the button to try Method Draw on Deta Space!</p>
-          <svg class="sponsor-logo" width="100%" height="100%" fill="none" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 800 225" preserveAspectRatio="xMidYMid meet"><g clip-path="url(#deta_new_svg__clip0)"><path d="M111.14 0c61.38 0 111.139 49.705 111.139 111.02S172.52 222.04 111.14 222.04C49.759 222.04 0 172.335 0 111.02S49.759 0 111.14 0z" fill="#EF39A8"></path><path d="M111.404 21.676c49.689 0 89.97 40.237 89.97 89.873s-40.281 89.873-89.97 89.873-89.97-40.237-89.97-89.873 40.281-89.873 89.97-89.873z" fill="#BD399C"></path><path d="M111.404 45.465c36.536 0 66.154 29.586 66.154 66.084 0 36.497-29.618 66.083-66.154 66.083S45.25 148.046 45.25 111.549c0-36.498 29.618-66.084 66.154-66.084z" fill="#93388E"></path><path d="M110.874 65.555c24.844 0 44.985 20.119 44.985 44.937 0 24.817-20.141 44.936-44.985 44.936s-44.985-20.119-44.985-44.936c0-24.818 20.141-44.937 44.985-44.937z" fill="#6030A2"></path><path d="M339 170.836h49.915c23.004 0 40.365-5.842 51.867-17.745 11.719-11.902 17.579-25.752 17.579-41.983 0-16.23-5.86-30.296-17.579-42.199-11.502-11.902-28.863-17.745-51.867-17.745H339v119.672zm96.574-59.728c0 11.686-3.907 21.641-11.719 29.864-7.596 8.007-19.315 12.119-34.94 12.119h-27.779V68.909h27.779c15.625 0 27.344 4.112 34.94 12.119 7.812 8.223 11.719 18.178 11.719 30.08zm40.582 10.388c0 30.08 19.098 51.504 52.302 51.504 22.136 0 39.931-10.604 47.744-30.513h-24.523c-5.426 8.44-13.022 12.768-23.221 12.768-16.928 0-27.778-10.82-29.732-27.7h79.212v-6.059c0-29.648-19.966-51.505-50.782-51.505-31.034 0-51 21.208-51 51.505zm78.995-8.224h-56.208c2.388-14.932 11.936-25.535 28.213-25.535 15.843 0 25.608 10.387 27.995 25.535zm73.353 20.992V88.386h24.957v-16.23h-24.957V49h-21.702v23.155h-16.06v16.23h16.06v45.879c0 14.499 3.038 24.237 9.332 29.431 6.293 5.193 15.191 7.79 26.693 7.79 3.69 0 6.944-.216 9.766-.865l4.123-.866v-17.096l-4.123.433c-2.822.433-6.076.649-9.766.649-11.719 0-14.323-6.059-14.323-19.476zm93.101-63.624c-14.54 0-25.825 3.03-33.638 9.306-8.029 6.276-11.936 13.85-11.936 22.723h22.136c0-10.388 11.719-14.283 23.438-14.283 14.757 0 23.872 5.193 23.872 18.827v6.059h-26.693c-26.259 0-46.659 6.709-46.659 28.782 0 20.342 15.625 30.946 38.847 30.946 14.973 0 25.607-3.679 31.901-11.037l3.039-3.678c0 4.111 1.735 10.387 2.386 12.551H770v-1.731l-1.519-4.761c-.868-3.246-1.302-8.223-1.302-15.148v-38.088c0-28.998-16.493-40.468-45.574-40.468zm23.872 57.131c0 19.693-9.982 29.864-28.863 29.864-12.37 0-22.354-4.111-22.354-14.499 0-11.902 10.852-15.365 24.524-15.581l26.693.216z" fill="#000"></path></g><defs><clipPath id="deta_new_svg__clip0"><path fill="#fff" d="M0 0h770v222.04H0z"></path></clipPath></defs></svg>
-          <div class="sponsor-disclaimer">Deta is a sponsor of Method Draw</div>
-
-      </div>
-    </div>
-    
-  </div>
+  <div class="menu-right">
+  <button class="menu-icon" id="darkmode-button">
+    <svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 24 24"><path d="M17.66 7.93L12 2.27 6.34 7.93c-3.12 3.12-3.12 8.19 0 11.31C7.9 20.8 9.95 21.58 12 21.58c2.05 0 4.1-.78 5.66-2.34 3.12-3.12 3.12-8.19 0-11.31zM12 19.59c-1.6 0-3.11-.62-4.24-1.76C6.62 16.69 6 15.19 6 13.59s.62-3.11 1.76-4.24L12 5.1v14.49z"></path></svg>
+  </button>
+</div>
 </div>
 
 <div id="panels" class="tools_panel">
@@ -154,6 +144,13 @@ <h4>Canvas</h4>
 
     <div class="draginputs">
 
+
+      <label class="draginput twocol textcontent" data-title="Change Content">
+        <input id="canvas_title" type="text" />
+        <span>Title</span>
+      </label>
+
+
       <label data-title="Change canvas width" class="draginput">
         <input id="canvas_width" type="text" pattern="[0-9]*" value="800" />
         <span class="icon_label">Width</span>
@@ -364,11 +361,12 @@ <h4>Line</h4>
   </div>
 
   <div id="text_panel" class="context_panel">
+
     <h4>Text</h4>
     <div class="draginputs">
-      <label class="draginput twocol textcontent" data-title="Change Content">
+      <label class="draginput twocol textcontent hidden" data-title="Change Content">
+        <input id="text" type="text" autocomplete="off"/>
         <span>Content</span>
-        <input id="text" type="text"/>
       </label>
       <label>
         <input id="text_x" class="attr_changer" data-title="Change text x coordinate" data-attr="x" pattern="[0-9]*" />
@@ -387,7 +385,7 @@ <h4>Text</h4>
         <select id="font_family_dropdown">
         </select>
       </div>
-      <div class="draginput">
+      <div class="draginput font_style">
           <span>Font Style</span>
           <div id="tool_bold" data-title="Bold Text [B]">B</div>
           <div id="tool_italic" data-title="Italic Text [I]">i</div>
@@ -400,25 +398,28 @@ <h4>Text</h4>
   </div>
 
   <!-- formerly gsvg_panel -->
-  <div id="container_panel" class="context_panel clearfix">
+  <div id="svg_panel" class="context_panel clearfix">
+    <h4>SVG</h4>
   </div>
   
   <div id="use_panel" class="context_panel clearfix">
-    <div class="button" id="tool_unlink_use" data-title="Break link">Break link reference</div>
+    <h4>Use</h4>
+    <div class="button full" id="tool_unlink_use" data-title="Break link">Break use ref</div>
   </div>
   
   <div id="g_panel" class="context_panel clearfix">
-      <h4>Group</h4>
-      <div class="draginputs">
-        <label>
-          <input id="g_x" class="attr_changer" data-title="Change groups's x coordinate" data-attr="x" pattern="[0-9]*" />
-          <span>X</span>
-        </label>
-        <label>
-          <input id="g_y" class="attr_changer" data-title="Change groups's y coordinate" data-attr="y" pattern="[0-9]*" />
-          <span>Y</span>
-        </label>
+    <h4>Group</h4>
+    <div class="draginputs">
+      <label>
+        <input id="g_x" class="attr_changer" data-title="Change groups's x coordinate" data-attr="x" pattern="[0-9]*" />
+        <span>X</span>
+      </label>
+      <label>
+        <input id="g_y" class="attr_changer" data-title="Change groups's y coordinate" data-attr="y" pattern="[0-9]*" />
+        <span>Y</span>
+      </label>
     </div>
+    <div class="button full" title="Ungroup Elements" id="button_ungroup">Ungroup</div>
   </div>
   
   <div id="path_node_panel" class="context_panel clearfix">
@@ -435,7 +436,7 @@ <h4>Edit Path</h4>
       </label>
       
       <div id="segment_type" class="draginput label">
-        <span>Segment Type</span>
+        <span>Seg Type</span>
         <select id="seg_type" data-title="Change Segment type">
           <option id="straight_segments" selected="selected" value="4">Straight</option>
           <option id="curve_segments" value="6">Curve</option>
@@ -449,7 +450,7 @@ <h4>Edit Path</h4>
     <div class="button-container clearfix">
       <div class="button full" id="tool_node_clone" title="Adds a node">Add Node</div>
       <div class="button full" id="tool_node_delete" title="Delete Node">Delete Node</div>
-      <div class="button full" id="tool_openclose_path" title="Open/close sub-path">Open Path</div>
+      <div class="button full" id="tool_openclose_path" title="Open/close sub-path">Open/close Path</div>
     </div>
   </div>
   
@@ -459,8 +460,8 @@ <h4>Edit Path</h4>
       <label id="tool_angle" data-title="Change rotation angle" class="draginput">
         <input id="angle" class="attr_changer" size="2" value="0" data-attr="transform" data-min="-180" data-max="180" type="text"/>
         <span class="icon_label">Rotation</span>
-        <div id="tool_angle_indicator">
-          <div id="tool_angle_indicator_cursor"></div>
+        <div id="tool_angle_indicator" class="angle">
+          <div id="tool_angle_indicator_cursor" class="angle-cursor"></div>
         </div>
       </label>
       
@@ -481,9 +482,8 @@ <h4>Edit Path</h4>
 
     </div>
     
-    
     <div id="align_tools">
-      <h4>Align</h4>
+      <h4>Align to canvas</h4>
       <div class="toolset align_buttons" id="tool_position">
           <label>
             <div class="col last clear" id="position_opts">
@@ -518,6 +518,7 @@ <h4>Align</h4>
                 </svg>
               </div>
             </div>
+            <div class="clearfix"></div>
           </label>
       </div>    
     </div>
@@ -570,6 +571,8 @@ <h4 class="hidable">Multiple Elements</h4>
         </div>
     </div>
     <div class="clearfix"></div>
+    <div class="button full" id="button_group">Group Elements</div>
+    <div class="button full" id="tool_text_on_path" title="Place text on path">Place text on path</div>
 
   </div>
   
@@ -609,7 +612,6 @@ <h4>Stroke</h4>
     
   </div>
 
-
 <div id="tools_left" class="tools_panel">
   <div class="tool_button" id="tool_select" data-mode="select" title="Select Tool [V]">
     <svg viewBox="0 0 24 24" width="24" height="24">
@@ -686,28 +688,27 @@ <h4>Stroke</h4>
 <div id="tools_bottom" class="tools_panel">
 
     <!-- Zoom buttons -->
+  <select id="zoom_select">
+    <option value="6">6%</option>
+    <option value="12">12%</option>
+    <option value="16">16%</option>
+    <option value="25">25%</option>
+    <option value="50">50%</option>
+    <option value="75">75%</option>
+    <option value="100"  selected="selected">100%</option>
+    <option value="150">150%</option>
+    <option value="200">200%</option>
+    <option value="300">300%</option>
+    <option value="400">400%</option>
+    <option value="600">600%</option>
+    <option value="800">800%</option>
+    <option value="1600">1600%</option>
+  </select>
   <div id="zoom_panel" class="toolset" title="Change zoom level">
-    <div class="draginput select" id="zoom_label">
+    <div class="select-input" id="zoom_label">
       <span  id="zoomLabel" class="zoom_tool icon_label">
         <svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="2 2 20 20" width="27"><path d="M15.5 14h-.79l-.28-.27C15.41 12.59 16 11.11 16 9.5 16 5.91 13.09 3 9.5 3S3 5.91 3 9.5 5.91 16 9.5 16c1.61 0 3.09-.59 4.23-1.57l.27.28v.79l5 4.99L20.49 19l-4.99-5zm-6 0C7.01 14 5 11.99 5 9.5S7.01 5 9.5 5 14 7.01 14 9.5 11.99 14 9.5 14z"/></svg>
       </span>
-      <select id="zoom_select">
-        <option value="6">6%</option>
-        <option value="12">12%</option>
-        <option value="16">16%</option>
-        <option value="25">25%</option>
-        <option value="50">50%</option>
-        <option value="75">75%</option>
-        <option value="100"  selected="selected">100%</option>
-        <option value="150">150%</option>
-        <option value="200">200%</option>
-        <option value="300">300%</option>
-        <option value="400">400%</option>
-        <option value="600">600%</option>
-        <option value="800">800%</option>
-        <option value="1600">1600%</option>
-      </select>
-      <div class="caret"></div>
       <input id="zoom" value="100%" type="text" readonly="readonly" />
     </div>
   </div>
@@ -718,9 +719,7 @@ <h4>Stroke</h4>
 <!-- hidden divs -->
 <div id="color_picker"></div>
 
-</div> <!-- svg_editor -->
-
-
+</div> <!-- /app -->
 
 <div id="dialog_box">
   <div id="dialog_box_overlay"></div>
@@ -743,11 +742,13 @@ <h4>Stroke</h4>
   <li><a href="#move_back">Send to Back<span class="shortcut">⌘⇧↓</span></a></li>
 </ul>
 
-<div class="tools_flyout" id="tools_shapelib">
+<div class="tools_flyout inverted-undo" id="tools_shapelib">
   <div id="shape_buttons"></div>
 </div>
-
-<!-- build:js all.js -->
+  <!-- build:js loading.js -->
+  <script type="text/javascript" src="js/loading.js"></script>
+  <!-- endbuild -->
+  <!-- build:js all.js -->
   <script type="text/javascript" src="js/lib/jquery-3.5.1.min.js"></script>
   <script type="text/javascript" src="js/lib/pathseg.js"></script>
   <script type="text/javascript" src="js/lib/jquery.hotkeys.min.js"></script>
@@ -756,6 +757,7 @@ <h4>Stroke</h4>
   <script type="text/javascript" src="js/lib/jquery-ui-1.8.17.custom.min.js"></script>
   <script type="text/javascript" src="js/jquery.attr.js"></script>
   <script type="text/javascript" src="js/lib/jquery-draginput.js"></script>
+  <script type="text/javascript" src="js/lib/css.min.js"></script>
   <script type="text/javascript" src="js/utils.js"></script>
   <script type="text/javascript" src="js/dao.js"></script>
   <script type="text/javascript" src="js/state.js"></script>
@@ -786,6 +788,8 @@ <h4>Stroke</h4>
   <script type="text/javascript" src="js/Palette.js"></script>
   <script type="text/javascript" src="js/Zoom.js"></script>
   <script type="text/javascript" src="js/Modal.js"></script>
+  <script type="text/javascript" src="js/Title.js"></script>
+  <script type="text/javascript" src="js/Darkmode.js"></script>
   <script type="text/javascript" src="js/ContextMenu.js"></script>
   <script type="text/javascript" src="js/Shapelib.js"></script>
   <script type="text/javascript" src="js/fonts.js"></script>
@@ -794,16 +798,12 @@ <h4>Stroke</h4>
   <script type="text/javascript" src="js/lib/jpicker.min.js"></script>
   <script type="text/javascript" src="js/lib/mousewheel.js"></script>
   <script type="text/javascript" src="js/eyedropper.js"></script>
-  <!--<script type="text/javascript" src="js/grid.js"></script>-->
   <script type="text/javascript" src="js/lib/requestanimationframe.js"></script>
   <script type="text/javascript" src="js/lib/taphold.js"></script>
   <script type="text/javascript" src="js/lib/filesaver.js"></script>
   <script type="text/javascript" src="js/paste.js"></script>
+  <script type="text/javascript" src="js/modals.js"></script>
   <script type="text/javascript" src="js/start.js"></script>
-
-
-<!-- endbuild -->
-
+  <!-- endbuild -->
 </body>
 </html>
-
diff --git a/src/js/Canvas.js b/src/js/Canvas.js
index 7001a668..5850ad5c 100644
--- a/src/js/Canvas.js
+++ b/src/js/Canvas.js
@@ -68,13 +68,13 @@ MD.Canvas = function(){
     if (w === 'fit' || h === 'fit') state.set("canvasSize", res);
     $("#canvas_width").val(w);
     $("#canvas_height").val(h);
-    state.set("canvasContent", svgCanvas.getSvgString());
   }
 
-  function changeSize(){
+  function changeSize(attr, val, completed){
     const w = $("#canvas_width").val();
     const h = $("#canvas_height").val();
     state.set("canvasSize", [w,h]);
+    if (completed) editor.saveCanvas();
   }
 
   function update(center, new_ctr) {
@@ -125,16 +125,9 @@ MD.Canvas = function(){
     }
     
     if(center) {
-      // Go to top-left for larger documents
-      if(svgCanvas.contentW > $(workarea).width()) {
-        // Top-left
-        workarea.scrollLeft = offset.x - 10;
-        workarea.scrollTop = offset.y - 10;
-      } else {
-        // Center
-        workarea.scrollLeft = scroll_x;
-        workarea.scrollTop = scroll_y;
-      }
+      workarea.scrollLeft = scroll_x;
+      workarea.scrollTop = scroll_y;
+
     } else {
       workarea.scrollLeft = new_ctr.x - w_orig/2;
       workarea.scrollTop = new_ctr.y - h_orig/2;
@@ -144,7 +137,17 @@ MD.Canvas = function(){
     workarea.scroll();
   }
 
+  function rename(str) {
+    if (str.length) {
+      $('#canvas_title').val(str);
+      svgCanvas.setDocumentTitle(str);
+    }
+  }
+
+  rename(state.get("canvasTitle"));
+
   this.resize = resize;
   this.update = update;
+  this.rename = rename;
   this.changeSize = changeSize;
 }
\ No newline at end of file
diff --git a/src/js/Darkmode.js b/src/js/Darkmode.js
new file mode 100644
index 00000000..69e04387
--- /dev/null
+++ b/src/js/Darkmode.js
@@ -0,0 +1,27 @@
+MD.Darkmode = function(){
+
+  const button = document.querySelector("#darkmode-button");
+  const body = document.body;
+  if (!button) return false;
+
+  function set(isDark) {
+
+    button.setAttribute("title", isDark ? "Switch to lightmode" : "Switch to darkmode")
+    body.classList.toggle("inverted", !isDark);
+    body.classList.add("cancel-transitions");
+    setTimeout(function(){
+      body.classList.remove("cancel-transitions");
+    }, 0)
+    editor.rulers.update();
+  }
+
+  button.addEventListener("click", ()=>{
+    state.set("darkmode", !state.get("darkmode"));
+  });
+
+  const isDark = state.get("darkmode");
+  set(isDark);
+
+  this.set = set
+
+}
\ No newline at end of file
diff --git a/src/js/Import.js b/src/js/Import.js
index f5b8cb87..c544e5e6 100644
--- a/src/js/Import.js
+++ b/src/js/Import.js
@@ -1,15 +1,13 @@
 MD.Import = function(){
   const workarea = document.getElementById("workarea");
-  const $importInput = $('#tool_import + input');
-  const $openInput = $('#tool_open + input');
+  const $importInput = $('#tool_import input');
+  const $openInput = $('#tool_open input');
 
-  $('#tool_import').on("click", place);
-  $('#tool_open').on("click", open);
-
-  $importInput.change(importImage);
-  $openInput.change(openImage);
+  $importInput.on("change", importImage);
+  $openInput.on("change", openImage);
 
   function importImage(e){
+    $('#menu_bar').removeClass('active')
     if (!window.FileReader) return;
     //e.stopPropagation();
     //e.preventDefault();
@@ -26,11 +24,9 @@ MD.Import = function(){
       var reader = new FileReader();
       reader.onloadend = function(e) {
         svgCanvas.importSvgString(e.target.result, true);
-        svgCanvas.ungroupSelectedElement()
-        svgCanvas.ungroupSelectedElement()
-        svgCanvas.groupSelectedElements()
-        svgCanvas.alignSelectedElements("m", "page")
-        svgCanvas.alignSelectedElements("c", "page")
+        //svgCanvas.ungroupSelectedElement();
+        svgCanvas.alignSelectedElements("m", "page");
+        svgCanvas.alignSelectedElements("c", "page");
       };
       reader.readAsText(file);
     }
@@ -74,7 +70,7 @@ MD.Import = function(){
       reader.readAsDataURL(file)
     }
     
-    
+    //editor.saveCanvas();
   }
 
   function loadSvgString(str, callback) {
@@ -82,6 +78,8 @@ MD.Import = function(){
     callback = callback || $.noop;
     if(success) {
       callback(true);
+      editor.saveCanvas();
+      state.set("canvasTitle", svgCanvas.getDocumentTitle());
     } else {
       $.alert("Error: Unable to load SVG data", function() {
         callback(false);
@@ -90,6 +88,7 @@ MD.Import = function(){
   }
 
   function openImage(e){
+    $('#menu_bar').removeClass('active')
     const f = this;
     if(f.files.length === 1) {
       svgCanvas.clear();
@@ -134,5 +133,6 @@ MD.Import = function(){
 
   this.place = place;
   this.open = open;
+  this.loadSvgString = loadSvgString;
 
 }
\ No newline at end of file
diff --git a/src/js/Keyboard.js b/src/js/Keyboard.js
index c12d5674..d1075d2b 100644
--- a/src/js/Keyboard.js
+++ b/src/js/Keyboard.js
@@ -1,61 +1,62 @@
 MD.Keyboard = function(){
 
   const keys = {
-    "v":     { name: "Select tool",         cb: ()=> state.set("canvasMode", "select") },
-    "q":     { name: "Freehand tool",       cb: ()=> state.set("canvasMode", "fhpath") },
-    "l":     { name: "Line tool",           cb: ()=> state.set("canvasMode", "fhplineath")},
-    "r":     { name: "Rectangle tool",      cb: ()=> state.set("canvasMode", "rect")},
-    "o":     { name: "Ellipse tool",        cb: ()=> state.set("canvasMode", "ellipse")},
-    "s":     { name: "Shape tool",          cb: ()=> state.set("canvasMode", "shapelib")},
-    "p":     { name: "Path tool",           cb: ()=> state.set("canvasMode", "path")},
-    "t":     { name: "Text tool",           cb: ()=> state.set("canvasMode", "text")},
-    "z":     { name: "Zoom tool",           cb: ()=> state.set("canvasMode", "zoom")},
-    "e":     { name: "Eyedropper tool",     cb: ()=> state.set("canvasMode", "eyedropper")},
-    "x":       { name: "Focus fill/stroke",  cb: ()=> editor.focusPaint()}, 
-    "shift_x": { name: "Switch fill/stroke",  cb: ()=> editor.switchPaint()},  
+    "v": { name: "Select tool",         cb: ()=> state.set("canvasMode", "select") },
+    "q": { name: "Freehand tool",       cb: ()=> state.set("canvasMode", "fhpath") },
+    "l": { name: "Line tool",           cb: ()=> state.set("canvasMode", "fhplineath")},
+    "r": { name: "Rectangle tool",      cb: ()=> state.set("canvasMode", "rect")},
+    "o": { name: "Ellipse tool",        cb: ()=> state.set("canvasMode", "ellipse")},
+    "s": { name: "Shape tool",          cb: ()=> state.set("canvasMode", "shapelib")},
+    "p": { name: "Path tool",           cb: ()=> state.set("canvasMode", "path")},
+    "t": { name: "Text tool",           cb: ()=> state.set("canvasMode", "text")},
+    "z": { name: "Zoom tool",           cb: ()=> state.set("canvasMode", "zoom")},
+    "e": { name: "Eyedropper tool",     cb: ()=> state.set("canvasMode", "eyedropper")},
+    "x": { name: "Focus fill/stroke",   cb: ()=> editor.focusPaint()}, 
+"shift_x":   { name: "Switch fill/stroke",  cb: ()=> editor.switchPaint()},  
     "alt":   { name: false,                 cb: ()=> $("#workarea").toggleClass("out", state.get("canvasMode") === "zoom" )},  
     "cmd_s": { name: "Save SVG File",       cb: ()=> editor.save()},
     "cmd_z": { name: "Undo",                cb: ()=> editor.undo()},
     "cmd_y": { name: "Redo",                cb: ()=> editor.redo()},
-    "cmd_shift_z": { name: "Redo",          cb: ()=> editor.redo()},
-    "cmd_c":  { name: "Copy",               cb: ()=> editor.copySelected()},
-    "cmd_x":  { name: "Cut",                cb: ()=> editor.cutSelected()},
-    "cmd_v":  { name: "Paste",              cb: ()=> editor.pasteSelected()},
-    "cmd_d":  { name: "Duplicate",          cb: ()=> editor.duplicateSelected()},
-    "cmd_u":  { name: "View source",        cb: ()=> editor.source()},
-    "cmd_a":  { name: "Select All",         cb: ()=> svgCanvas.selectAllInCurrentLayer()},
-    "cmd_b":  { name: "Set bold text",      cb: ()=> editor.text.setBold()},
-    "cmd_i":  { name: "Set italic text",    cb: ()=> editor.text.setItalic()},
-    "cmd_g":  { name: "Group selected",     cb: ()=> editor.groupSelected()},
+"cmd_shift_z": { name: "Redo",              cb: ()=> editor.redo()},
+    "cmd_c": { name: "Copy",                cb: ()=> editor.copySelected()},
+    "cmd_x": { name: "Cut",                 cb: ()=> editor.cutSelected()},
+    "cmd_v": { name: "Paste",               cb: ()=> editor.pasteSelected()},
+    "cmd_d": { name: "Duplicate",           cb: ()=> editor.duplicateSelected()},
+    "cmd_u": { name: "View source",         cb: ()=> editor.source()},
+    "cmd_a": { name: "Select All",          cb: ()=> svgCanvas.selectAllInCurrentLayer()},
+    "cmd_b": { name: "Set bold text",       cb: ()=> editor.text.setBold()},
+    "cmd_i": { name: "Set italic text",     cb: ()=> editor.text.setItalic()},
+    "cmd_g": { name: "Group selected",      cb: ()=> editor.groupSelected()},
     "cmd_shift_g":  { name: "Ungroup",      cb: ()=> editor.ungroupSelected()},
-    "cmd_o":  { name: "Open SVG File",      cb: ()=> editor.import.open()},
-    "cmd_k":  { name: "Place image",        cb: ()=> editor.import.place()},
+    "cmd_o": { name: "Open SVG File",       cb: ()=> editor.import.open()},
+    "cmd_k": { name: "Place image",         cb: ()=> editor.import.place()},
     "backspace": { name: "Delete",          cb: ()=> editor.deleteSelected()},
+    "delete":    { name: "Delete",          cb: ()=> editor.deleteSelected()},
     "ctrl_arrowleft":        { name: "Rotate -1deg",  cb: ()=> editor.rotateSelected(0,1)},
     "ctrl_arrowright":       { name: "Rotate +1deg",  cb: ()=> editor.rotateSelected(1,1)},
     "ctrl_shift_arrowleft":  { name: "Rotate -5deg",  cb: ()=> editor.rotateSelected(0,5)},
     "ctrl_shift_arrowright": { name: "Rotate +5deg ", cb: ()=> editor.rotateSelected(1,5)},
-    "shift_o":  { name: "Next item",        cb: ()=> svgCanvas.cycleElement(0)},
-    "shift_p":  { name: "Prev item",        cb: ()=> svgCanvas.cycleElement(1)},
-    "shift_r":  { name: "Show/hide rulers", cb: ()=> editor.rulers.toggleRulers()},
-    "cmd_+":  { name: "Zoom in",            cb: ()=> editor.zoom.multiply(1.5)},
-    "cmd_-":  { name: "Zoom out",           cb: ()=> editor.zoom.multiply(0.75)},
-    "cmd_=":  { name: "Actual size",        cb: ()=> editor.zoom.reset()},
-    "arrowleft":  { name: "Nudge left",     cb: ()=> editor.moveSelected(-1,0)},
-    "arrowright":  { name: "Nudge right",   cb: ()=> editor.moveSelected(1,0)},
-    "arrowup":  { name: "Nudge up",         cb: ()=> editor.moveSelected(0,-1)},
-    "arrowdown":  { name: "Nudge down",     cb: ()=> editor.moveSelected(0,1)},
-    "shift_arrowleft": {name: "Jump left", cb: () => editor.moveSelected(state.get("canvasSnapStep") * -1, 0)},
+    "shift_o":  { name: "Next item",         cb: ()=> svgCanvas.cycleElement(0)},
+    "shift_p":  { name: "Prev item",         cb: ()=> svgCanvas.cycleElement(1)},
+    "shift_r":  { name: "Show/hide rulers",  cb: ()=> editor.rulers.toggleRulers()},
+    "cmd_+":  { name: "Zoom in",             cb: ()=> editor.zoom.multiply(1.5)},
+    "cmd_-":  { name: "Zoom out",            cb: ()=> editor.zoom.multiply(0.75)},
+    "cmd_=":  { name: "Actual size",         cb: ()=> editor.zoom.reset()},
+    "arrowleft":  { name: "Nudge left",      cb: ()=> editor.moveSelected(-1,0)},
+    "arrowright":  { name: "Nudge right",    cb: ()=> editor.moveSelected(1,0)},
+    "arrowup":  { name: "Nudge up",          cb: ()=> editor.moveSelected(0,-1)},
+    "arrowdown":  { name: "Nudge down",      cb: ()=> editor.moveSelected(0,1)},
+    "shift_arrowleft": {name: "Jump left",   cb: () => editor.moveSelected(state.get("canvasSnapStep") * -1, 0)},
     "shift_arrowright": {name: "Jump right", cb: () => editor.moveSelected(state.get("canvasSnapStep") * 1, 0)},
-    "shift_arrowup": {name: "Jump up", cb: () => editor.moveSelected(0, state.get("canvasSnapStep") * -1)},
-    "shift_arrowdown": {name: "Jump down", cb: () => editor.moveSelected(0, state.get("canvasSnapStep") * 1)},
-    "cmd_arrowup":{ name: "Bring forward",  cb: () => editor.moveUpSelected()},
+    "shift_arrowup": {name: "Jump up",       cb: () => editor.moveSelected(0, state.get("canvasSnapStep") * -1)},
+    "shift_arrowdown": {name: "Jump down",   cb: () => editor.moveSelected(0, state.get("canvasSnapStep") * 1)},
+    "cmd_arrowup":{ name: "Bring forward",   cb: () => editor.moveUpSelected()},
     "cmd_arrowdown":{ name: "Send backward", cb: () => editor.moveDownSelected()},
     "cmd_shift_arrowup":{ name: "Bring to front", cb: () => editor.moveToTopSelected()},
     "cmd_shift_arrowdown":{ name: "Send to back", cb: () => editor.moveToBottomSelected()},
     "escape":  { name: false,    cb: ()=> editor.escapeMode()},
-    "enter":    { name: false,    cb: ()=> editor.escapeMode()},
-    " ":  { name: "Pan canvas",    cb: (e)=> editor.pan.startPan(e)},
+    "enter":    { name: false,   cb: ()=> editor.escapeMode()},
+    " ":  { name: "Pan canvas",  cb: (e)=> editor.pan.startPan(e)},
   };
 
   document.addEventListener("keydown", function(e){
@@ -115,7 +116,7 @@ MD.Keyboard = function(){
       if (key === "arrowdown") key = "↓";
       if (key === " ") key = "SPACEBAR";
       if (key === "shift") key = "⇧";
-      if (key === "cmd") key = svgedit.browser.isMac ? "⌘" : "Ctrl";
+      if (key === "cmd") key = svgedit.browser.isMac() ? "⌘" : "Ctrl";
       shortcutKey.textContent = key;
       shortcutKeys.appendChild(shortcutKey);
       shortcut.appendChild(shortcutKeys);
diff --git a/src/js/Menu.js b/src/js/Menu.js
index de327c1c..7104cb39 100644
--- a/src/js/Menu.js
+++ b/src/js/Menu.js
@@ -8,8 +8,7 @@ MD.Menu = function(){
   $('#tool_topath').on("click", editor.convertToPath);
   $('#tool_group').on("click", editor.groupSelected);
   $('#tool_ungroup').on("click", editor.ungroupSelected);
-  $('#tool_ungroup').on("click", editor.ungroupSelected);
-  if (window.location.host !== "editor.method.ac") {
+  if (window.location.host === "editor.method.ac") {
     $('#modal_donate').show();
     $('#sponsors').show();
   }
@@ -53,7 +52,7 @@ MD.Menu = function(){
   }
 
   // This puts the correct shortcuts in the menus
-  if (!svgedit.browser.isMac) {
+  if (!svgedit.browser.isMac()) {
    $('.shortcut').each(function(){
      var text = $(this).text();
      $(this).text(text.split("⌘").join("Ctrl+"))
diff --git a/src/js/PaintBox.js b/src/js/PaintBox.js
index e3b54c14..dd995865 100644
--- a/src/js/PaintBox.js
+++ b/src/js/PaintBox.js
@@ -8,10 +8,19 @@ MD.PaintBox = function(container, type){
     
     var title = (picker === 'stroke' ? 'Pick a Stroke Paint and Opacity' : 'Pick a Fill Paint and Opacity');
     var was_none = false;
-    var pos = is_background ? {'right': 175, 'top': 50} : {'left': 50, 'bottom': 50}
+    var pos = is_background ? {'right': 175, 'top': 50} : {'left': 48, 'bottom': 36}
+
+    $(document).on("mousedown", function(e){
+      if (!e.target.closest("#color_picker"))
+        $("#color_picker").hide();
+    })
+
+    const unsupportedGradient = getUnsupportedGradient(picker);
     
     $("#color_picker")
       .removeAttr("style")
+      .toggleClass("radialUserSpace", unsupportedGradient)
+      .attr("data-radialUserSpace", Boolean(unsupportedGradient))
       .css(pos)
       .jGraduate(
       { 
@@ -22,10 +31,17 @@ MD.PaintBox = function(container, type){
       },
       function(p) {
         paint = new $.jGraduate.Paint(p);
-        editor.paintBox[picker].setPaint(paint, true);
-        svgCanvas.setPaint(picker, paint);
-        if (paint.radialGradient) paint.radialGradient = paint.radialGradient.outerHTML
-        if (paint.linearGradient) paint.linearGradient = paint.linearGradient.outerHTML
+        if (unsupportedGradient) {
+          // remove current gradient stops
+          while (unsupportedGradient.firstChild) unsupportedGradient.removeChild(unsupportedGradient.lastChild);
+          Array.from(paint.radialGradient.children).forEach(stop => {
+            unsupportedGradient.appendChild(stop);
+          });
+        }
+        else {
+          editor.paintBox[picker].setPaint(paint, true);
+          svgCanvas.setPaint(picker, paint);
+        }
         if (picker === "fill") state.set("canvasFill", paint);
         if (picker === "stroke") state.set("canvasStroke", paint);
         if (picker === "canvas") state.set("canvasBackground", paint);
@@ -56,6 +72,27 @@ MD.PaintBox = function(container, type){
   this.paint = new $.jGraduate.Paint({solidColor: cur.color});
   this.type = type;
 
+  function getUnsupportedGradient(type){
+    const selectedElems = svgCanvas.getSelectedElems().filter(Boolean);
+    if (!selectedElems.length) return false;
+    const elem = selectedElems[0];
+    // fill or stroke
+    var url = elem.getAttribute(type);
+    if (url && url.includes("(")) {
+      url = url.split("(")[1].split(")")[0];
+    }
+    // not a gradient
+    else return false;
+    const originalGradient = svgCanvas.svgroot.querySelector(url);
+    if (!originalGradient) return false
+    const isRadial = originalGradient.tagName === "radialGradient"
+    // not a radial gradient
+    if (!isRadial) return false;
+    const isUserSpaceOnUse = originalGradient.getAttribute("gradientUnits") === "userSpaceOnUse";
+    if (!isUserSpaceOnUse) return false;
+    return originalGradient;
+  }
+
   this.setPaint = function(paint, apply, noUndo) {
     this.paint = paint;
     var fillAttr = "none";
@@ -76,6 +113,13 @@ MD.PaintBox = function(container, type){
         this.grad = this.defs.appendChild(paint[ptype]);
         var id = this.grad.id = 'gradbox_' + this.type;
         fillAttr = "url(#" + id + ')';
+        
+        if (this.grad.getAttribute('gradientUnits') === "userSpaceOnUse") {
+          const gradient = this.grad;
+          ["userSpaceOnUse", "gradientTransform", "gradientUnits", "cx", "cy", "fx", "fy", "r"].forEach(attr => {
+              gradient.removeAttribute(attr);
+            });
+        }
     }
     this.rect.setAttribute('fill', fillAttr);
     this.rect.setAttribute('opacity', opac);
@@ -85,6 +129,7 @@ MD.PaintBox = function(container, type){
     }
 
     if(apply) {
+
       svgCanvas.setColor(this.type, fillAttr, true);
       svgCanvas.setPaintOpacity(this.type, opac, true);
     }
diff --git a/src/js/Pan.js b/src/js/Pan.js
index a53b0ed7..189f4904 100644
--- a/src/js/Pan.js
+++ b/src/js/Pan.js
@@ -8,13 +8,13 @@ MD.Pan = function(){
   function startPan(e){
     panning = true;
     svgCanvas.spaceKey = true;
-    document.body.classList.add("dragging");
+    workarea.classList.add("dragging");
   }
 
   function stopPan(){
     panning = false;
     svgCanvas.spaceKey = false;
-    document.body.classList.remove("dragging");
+    workarea.classList.remove("dragging");
   }
   
   var move_pan = function(evt) {    
diff --git a/src/js/Panel.js b/src/js/Panel.js
index 5fc4fb8c..38c247df 100644
--- a/src/js/Panel.js
+++ b/src/js/Panel.js
@@ -33,13 +33,12 @@ MD.Panel = function(){
     $('#text_x')       .dragInput({ min: null, max: null,  step:  1,  callback: editor.changeAttribute,     cursor: false  });
     $('#image_y')      .dragInput({ min: null, max: null,  step:  1,  callback: editor.changeAttribute,     cursor: false  });
     $('#rect_rx')      .dragInput({ min: 0,    max: 100,   step:  1,  callback: editor.changeAttribute,     cursor: true   });
-    $('#stroke_width') .dragInput({ min: 0,    max: 99,    step:  1,  callback: editor.changeAttribute,   cursor: true, smallStep: 0.1, start: 1.5          });
+    $('#stroke_width') .dragInput({ min: 0,    max: 99,    step:  1,  callback: editor.changeAttribute,     cursor: true, smallStep: 0.1, start: 1.5          });
     $('#angle')        .dragInput({ min: -180, max: 180,   step:  1,  callback: editor.changeRotationAngle, cursor: false, dragAdjust: 0.5      });
-    $('#font_size')    .dragInput({ min: 1,    max: 250,   step: 1,   callback: editor.text.changeFontSize,      cursor: true, stepfunc: editor.stepFontSize, dragAdjust: .15 });
+    $('#font_size')    .dragInput({ min: 1,    max: 250,   step: 1,   callback: editor.text.changeFontSize, cursor: true, stepfunc: editor.stepFontSize, dragAdjust: .15 });
     $('#group_opacity').dragInput({ min: 0,    max: 100,   step:  5,  callback: editor.changeAttribute,     cursor: true,  start: 100             });
     $('#blur')         .dragInput({ min: 0,    max: 10,    step: .1,  callback: editor.changeBlur,          cursor: true,  start: 0               });
 
-
     // Align
 
     $('#position_opts .align_button').on("click", function(){
@@ -82,6 +81,18 @@ MD.Panel = function(){
       svgCanvas.pathActions.opencloseSubPath();
     });
 
+    // Use
+    $("#tool_unlink_use").on("click", function(){
+      svgCanvas.ungroupSelectedElement();
+    });
+
+    $("#canvas_title").on("click", function(){
+      $(this).focus();
+    });
+
+    $('#button_group').on("click", editor.groupSelected);
+    $('#button_ungroup').on("click", editor.ungroupSelected);
+    
 
     function show(elem) {
       $('.context_panel').hide();
@@ -90,7 +101,8 @@ MD.Panel = function(){
 
       const tagName = elem.tagName;
       $("#" + tagName + "_panel").show();
-      $('#stroke_width').val(elem.getAttribute("stroke-width") || 0);
+      const strokeWidth = elem.getAttribute("stroke") && !elem.getAttribute("stroke-width") ? 1 : elem.getAttribute("stroke-width") || 0;
+      $('#stroke_width').val(strokeWidth);
       const dash = elem.getAttribute("stroke-dasharray") || "none"
       $('#stroke_style option').removeAttr('selected');
       $('#stroke_style option[value="'+ dash +'"]').attr("selected", "selected");
@@ -100,71 +112,126 @@ MD.Panel = function(){
       $.fn.dragInput.updateCursor($('#blur')[0])
     }
 
+    function pathEditContext(){
+       $('.context_panel').hide();
+       $('#path_node_panel').show();
+       $('#stroke_panel').hide();
+       var point = svgCanvas.pathActions.getNodePoint();
+       $('#tool_add_subpath').removeClass('push_button_pressed').addClass('tool_button');
+       $('#tool_node_delete').toggleClass('disabled', !svgCanvas.pathActions.canDeleteNodes);
+       if(point) {
+         var seg_type = $('#seg_type');
+         point.x = svgedit.units.convertUnit(point.x);
+         point.y = svgedit.units.convertUnit(point.y);
+         $('#path_node_x').val(Math.round(point.x));
+         $('#path_node_y').val(Math.round(point.y));
+         if(point.type) {
+           seg_type.val(point.type).removeAttr('disabled');
+           $("#seg_type_label").html(point.type === 4 ? "Straight" : "Curve")
+         } else {
+           seg_type.val(4).attr('disabled','disabled');
+         }
+       }
+       $("#panels").removeClass("multiselected")        
+       $("#stroke_panel").hide();
+       $("#canvas_panel").hide();
+       return;
+     }
+
+    function canPutTextOnPath(elems) {
+      if (elems.length !== 2) return false;
+      const text = elems.find(elem => elem.tagName === "text");
+      const path = elems.find(elem => ["ellipse", "circle", "line", "polyline", "polygon", "rect", "path"].indexOf(elem.tagName) > -1);
+      return (!!text && !!path);
+    }
+
     function updateContextPanel(elems) {
-     if (!elems) elems = editor.selected;
-     var elem = elems[0] || editor.selected[0];
-     const isNode = svgCanvas.pathActions.getNodePoint()
-     // If element has just been deleted, consider it null
-     if(!elem || !elem.parentNode) elem = null;
+      if (!elems) elems = editor.selected;
+      var elem = elems[0] || editor.selected[0];
+      const isNode = svgCanvas.pathActions.getNodePoint()
+      // If element has just been deleted, consider it null
+      if(!elem || !elem.parentNode) elem = null;
 
-     const multiselected = elems.length > 1;
+      const multiselected = elems.length > 1;
      
-     var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName();
-     var currentMode = svgCanvas.getMode();
+      var currentLayerName = svgCanvas.getCurrentDrawing().getCurrentLayerName();
+      var currentMode = svgCanvas.getMode();
 
-     $('.context_panel').hide();
+      $('.context_panel').hide();
+      $("#align_tools").toggle(elem && !multiselected);
 
-     if (currentMode === 'pathedit') return showPathEdit();
+      if (currentMode === 'pathedit') return showPathEdit();
      
-     var menu_items = $('#cmenu_canvas li');
+      var menu_items = $('#cmenu_canvas li');
      
-     //hack to show the proper multialign box
-     if (multiselected) {
-       const multi = elems.filter(Boolean);
-       elem = (svgCanvas.elementsAreSame(multi)) ? multi[0] : null
-       if (elem) $("#panels").addClass("multiselected")
-     }
+      //hack to show the proper multialign box
+      if (multiselected) {
+        const multi = elems.filter(Boolean);
+        elem = (svgCanvas.elementsAreSame(multi)) ? multi[0] : null
+        if (elem) $("#panels").addClass("multiselected");
+        const canTextPath = canPutTextOnPath(multi);
+        $("#tool_text_on_path").toggle(canTextPath);
+      }
+      else {
+        $("#panels").removeClass("multiselected");
+      }
 
-     if (!elem && !multiselected) {
-       $("#panels").removeClass("multiselected")        
-       $("#stroke_panel").hide();
-       $("#canvas_panel").show();
-     }
+      if (!elem && !multiselected) {      
+        $("#stroke_panel").hide();
+        $("#canvas_panel").show();
+      }
  
-     if (elem !== null) {
-       $("#stroke_panel").show();
-       var elname = elem.nodeName;
-       var angle = svgCanvas.getRotationAngle(elem);
-       $('#angle').val(Math.round(angle));
-       $('#tool_angle_indicator').css("transform", "rotate("+angle+"deg)");
-       var blurval = svgCanvas.getBlur(elem);
-       $('#blur').val(blurval);
-       if(!isNode && currentMode !== 'pathedit') {
-         $('#selected_panel').show();
-         $('.action_selected').removeClass('disabled');
-         // Elements in this array already have coord fields
-         var x, y
-         if(['g', 'polyline', 'path'].indexOf(elname) >= 0) {
-           var bb = svgCanvas.getStrokedBBox([elem]);
-           if(bb) {
-             x = bb.x;
-             y = bb.y;
-           }
-         }
-         x = svgedit.units.convertUnit(x);
-         y = svgedit.units.convertUnit(y);
-         $("#" + elname +"_x").val(Math.round(x))
-         $("#" + elname +"_y").val(Math.round(y))
-         if (elname === "polyline") {
-           //we're acting as if polylines were paths
-           $("#path_x").val(Math.round(x))
-           $("#path_y").val(Math.round(y))
-         }
+      if (elem !== null) {
+        $("#stroke_panel").show();
+        const strokeWidth = elem.getAttribute("stroke") && !elem.getAttribute("stroke-width") ? 1 : elem.getAttribute("stroke-width") || 0;
+        $('#stroke_width').val(strokeWidth);
+        // stroke style
+        const strokeStyle = elem.getAttribute("stroke-dasharray") || "none";
+        const strokeStyles = {
+          "none": "—",
+          "2,2": "...",
+          "5,5": "- -",
+          "5,2,2,2": "-·-",
+          "5,2,2,2,2,2": "-··-"
+        };
+        $("#stroke_style_label").html(strokeStyles[strokeStyle] || "—");
+        var elname = elem.nodeName;
+        var angle = svgCanvas.getRotationAngle(elem);
+        $('#angle').val(Math.round(angle));
+        $('#group_opacity').val(svgCanvas.getOpacity(elem)*100 || 100);
+        $.fn.dragInput.updateCursor(document.getElementById("group_opacity"));
+        $('#tool_angle_indicator').css("transform", "rotate("+angle+"deg)");
+        var blurval = svgCanvas.getBlur(elem);
+        $('#blur').val(blurval);
+        $.fn.dragInput.updateCursor(document.getElementById("blur"));
+        if(!isNode && currentMode !== 'pathedit') {
+          $('#selected_panel').show();
+          $('.action_selected').removeClass('disabled');
+          // Elements in this array already have coord fields
+          var x, y
+          if(['g', 'polyline', 'path'].indexOf(elname) >= 0) {
+            var bb = svgCanvas.getStrokedBBox([elem]);
+            if(bb) {
+              x = bb.x;
+              y = bb.y;
+            }
+          }
+          
+          x = svgedit.units.convertUnit(x);
+          y = svgedit.units.convertUnit(y);
+
+          $("#" + elname +"_x").val(Math.round(x))
+          $("#" + elname +"_y").val(Math.round(y))
+          if (elname === "polyline") {
+            //we're acting as if polylines were paths
+            $("#path_x").val(Math.round(x))
+            $("#path_y").val(Math.round(y))
+          }
                    
-         // Elements in this array cannot be converted to a path
-         var no_path = ['image', 'text', 'path', 'g', 'use'].indexOf(elname) === -1;
-         if (no_path) $('.action_path_convert_selected').removeClass('disabled');
-         if (elname === "path") $('.action_path_selected').removeClass('disabled');
+          // Elements in this array cannot be converted to a path
+          var no_path = ['image', 'text', 'path', 'g', 'use'].indexOf(elname) === -1;
+          if (no_path) $('.action_path_convert_selected').removeClass('disabled');
+          if (elname === "path") $('.action_path_selected').removeClass('disabled');
 
        }
        
@@ -199,7 +266,8 @@ MD.Panel = function(){
          line: ['x1','y1','x2','y2'], 
          text: ['x', 'y'],
          'use': [],
-         path : []
+         path : [],
+         svg : [],
        };
        
        var el_name = elem.tagName;
@@ -222,30 +290,39 @@ MD.Panel = function(){
          if(el_name === "rect") $("#cornerRadiusLabel").show()
          else $("#cornerRadiusLabel").hide()
          
-         $.each(cur_panel, function(i, item) {
-           var attrVal = elem.getAttribute(item);
+         cur_panel.forEach((item, i) => {
+
+            var attrVal = elem.getAttribute(item);
            //update the draginput cursors
            var name_item = document.getElementById(el_name + '_' + item);
+           // find a textPath to put correct x and y
+           if (el_name === "text") {
+             const textPath = elem.querySelector("textPath");
+             if (textPath) {
+              var bb = elem.getBBox();
+              if (bb) attrVal = bb[item];
+             }
+           }
            name_item.value = Math.round(attrVal) || 0;
            if (name_item.getAttribute("data-cursor") === "true") {
-             $.fn.dragInput.updateCursor(name_item );
+             $.fn.dragInput.updateCursor(name_item);
            }
          });
          
          if(el_name === 'text') {
-           var font_family = elem.getAttribute("font-family") || "serif";
+           var font_family = elem.getAttribute("font-family") || "default";
            var cleanFontFamily = font_family.split(",")[0].replace(/'/g, "");
            var select = document.getElementById("font_family_dropdown");
+           const axis = 
            $('#text_panel').css("display", "inline");  
-           $('#tool_italic').toggleClass('active', svgCanvas.getItalic())
-           $('#tool_bold').toggleClass('active', svgCanvas.getBold())
-           $('#tool_italic').toggleClass('disabled', fonts[cleanFontFamily] ? !fonts[cleanFontFamily]["Italic"] : false)
-           $('#tool_bold').toggleClass('disabled', fonts[cleanFontFamily] ? !fonts[cleanFontFamily]["Bold"] : false);
            $('#font_family').val(font_family);
            $(select).find(`option[value='${cleanFontFamily}']`).prop("selected", true);
            $('#font_size').val(elem.getAttribute("font-size"));
            $('#text').val(elem.textContent);
-           $('#preview_font').text(cleanFontFamily).css('font-family', font_family);
+           $('#preview_font').text(cleanFontFamily).css('font-family', cleanFontFamily === "default" ? "sans-serif" : cleanFontFamily);
+           const textPath = elem.querySelector("textPath");
+           document.getElementById("text_panel").classList.toggle("text-path", textPath);
+           $("#textPath_offset").val(textPath ? textPath.getAttribute("startOffset") : 0);
          } // text
          else if(el_name === 'image') {
             const url = svgCanvas.getHref(elem)
@@ -289,7 +366,7 @@ MD.Panel = function(){
      
      if ( (elem && !isNode) || multiselected) {
        // update the selected elements' layer
-       $('#selLayerNames').removeAttr('disabled').val(currentLayerName);
+       $('#selLayerNames').removeAttr('disabled').val(svgCanvas.getCurrentDrawing().getCurrentLayerName());
        
        // Enable regular menu options
        $("#cmenu_canvas").enableContextMenuItems('#delete,#cut,#copy,#move_front,#move_up,#move_down,#move_back');
diff --git a/src/js/Rulers.js b/src/js/Rulers.js
index b0188b88..ca58251d 100644
--- a/src/js/Rulers.js
+++ b/src/js/Rulers.js
@@ -55,7 +55,8 @@ MD.Rulers = function(){
   }
 
   function update(zoom) {
-    const gray = getComputedStyle(document.body).getPropertyValue('--z6') || "#999";
+    const isDark = state.get("darkmode");
+    const gray = getComputedStyle(document.body).getPropertyValue(isDark ? '--z5' : '--z6') || "#999";
     if(!zoom) zoom = svgCanvas.getZoom();
     var limit = 30000;
     var c_elem = svgCanvas.getContentElem();    
diff --git a/src/js/Text.js b/src/js/Text.js
index 3cdc94f8..5a70039d 100644
--- a/src/js/Text.js
+++ b/src/js/Text.js
@@ -24,29 +24,34 @@ MD.Text = function(){
     const isSystemFont = fam === "sans-serif" || fam === "serif" || fam === "monospace";
     const font = isSystemFont ? {Bold: true, Italic: true, "BoldItalic": true} : fonts[fam];
     if (!isSystemFont) fam = `'${fam}'`;
-    
-    svgCanvas.setBold(false);
-    svgCanvas.setItalic(false);
+
+
+    console.log(font.axes)
     
     $("#tool_bold")
       .removeClass("active")
-      .toggleClass("disabled", !font.Bold);
+      .toggleClass("disabled", !font.axes.wght);
 
     $("#tool_italic")
       .removeClass("active")
-      .toggleClass("disabled", !font.Italic);
+      .toggleClass("disabled", !font.axes.ital);
     
     var fam_display = this.options[this.selectedIndex].text;
     $('#preview_font').html(fam_display).css("font-family", fam);
     $('#font_family').val(fam).change();
-    // todo should depend on actual load
-    document.fonts.onloadingdone = function (fontFaceSetEvent) {
-    const els = svgCanvas.getSelectedElems();
+ 
+    document.fonts.onloading = function(fontFaceSetEvent) {
+      $("#tool_font_family").addClass("loading");
+    };
+ 
+    document.fonts.onloadingdone = function(fontFaceSetEvent) {
+      const els = svgCanvas.getSelectedElems();
       els.forEach(el => {
-          var selector = svgCanvas.selectorManager.requestSelector(el);
-          selector.resize();
-      })
-     };
+        var selector = svgCanvas.selectorManager.requestSelector(el);
+        selector.resize();
+      });
+      $("#tool_font_family").removeClass("loading");
+    };
     
   });
 
@@ -56,15 +61,23 @@ MD.Text = function(){
     })
     .keyup(function(e){
       e.stopPropagation();
-      if (e.key === "Escape") {
-        svgCanvas.textActions.toSelectMode()
+      if (e.key === "Escape" || e.key === "Enter") {
+        svgCanvas.textActions.toSelectMode();
+        this.blur();
+        editor.saveCanvas();
         return editor.escapeMode();
       }
       svgCanvas.setTextContent(this.value);
+      var elems = svgCanvas.getSelectedElems();
+      svgCanvas.selectorManager.requestSelector(elems[0]).reset(elems[0]);
+    })
+    .click(function(e) {
+      this.focus();
+      this.select();
     });
 
-  function changeFontSize(){
-    svgCanvas.setFontSize($("#font_size").val());
+  function changeFontSize(attr, value, completed){
+    svgCanvas.setFontSize(value);
   }
 
   this.setBold = setBold;
diff --git a/src/js/Textonpath.js b/src/js/Textonpath.js
new file mode 100644
index 00000000..68a246bf
--- /dev/null
+++ b/src/js/Textonpath.js
@@ -0,0 +1,3 @@
+MD.TextOnPath = function(){
+  console.log("hi")
+}
\ No newline at end of file
diff --git a/src/js/Title.js b/src/js/Title.js
new file mode 100644
index 00000000..5b26e514
--- /dev/null
+++ b/src/js/Title.js
@@ -0,0 +1,23 @@
+MD.Title = function(){
+  
+  $('#canvas_title')
+    .keydown(function(e){
+      e.stopPropagation();
+      if (e.key === "Escape") {
+        this.blur();
+      }
+      if (e.key === "Enter") {
+        this.blur();
+      }
+    })
+    .keyup(function(e){
+      e.stopPropagation();
+      svgCanvas.setDocumentTitle(this.value);
+      state.set("canvasTitle", this.value);
+    })
+    .click(function(e) {
+      this.focus();
+      this.select();
+    })
+
+}
\ No newline at end of file
diff --git a/src/js/dao.js b/src/js/dao.js
index b22791ab..bfdb2f98 100644
--- a/src/js/dao.js
+++ b/src/js/dao.js
@@ -15,7 +15,7 @@ const dao = [
     name: "canvasTitle",
     label: "Canvas Title",
     type: "string",
-    default: "",
+    default: "Drawing",
     private: false,
     save: true
   },
diff --git a/src/js/editor.js b/src/js/editor.js
index 67ef4ec4..7af66550 100644
--- a/src/js/editor.js
+++ b/src/js/editor.js
@@ -2,6 +2,7 @@ const MD = {};
 
 MD.Editor = function(){
   
+  const el = document.getElementById("method-draw");
   const serializer = new XMLSerializer();
   const _self = this;
   const workarea = document.getElementById("workarea");
@@ -103,7 +104,7 @@ MD.Editor = function(){
     svgCanvas.convertToPath();
     var elems = svgCanvas.getSelectedElems()
     svgCanvas.selectorManager.requestSelector(elems[0]).reset(elems[0])
-    svgCanvas.selectorManager.requestSelector(elems[0]).selectorRect.setAttribute("display", "none");
+    //svgCanvas.selectorManager.requestSelector(elems[0]).selectorRect.setAttribute("display", "none");
     svgCanvas.setMode("pathedit");
     svgCanvas.pathActions.toEditMode(elems[0]);
     svgCanvas.clearSelection();
@@ -145,7 +146,7 @@ MD.Editor = function(){
       svgCanvas.leaveContext()
     }
     else
-      state.set("canvasContent", svgCanvas.getSvgString())
+      saveCanvas()
   }
 
   // called when we've selected a different element
@@ -195,15 +196,17 @@ MD.Editor = function(){
       elems: elems
     });
 
-    if (!svgCanvas.getContext())
-      state.set("canvasContent", svgCanvas.getSvgString())
+
+    if (!svgCanvas.getContext()) {
+        saveCanvas();
+      }
   }
 
   function changeAttribute(attr, value, completed) {
     if (attr === "opacity") value *= 0.01;
     if (completed) {
       svgCanvas.changeSelectedAttribute(attr, value);
-      state.set("canvasContent", svgCanvas.getSvgString());
+      saveCanvas();
     }
     else svgCanvas.changeSelectedAttributeNoUndo(attr, value);      
   }
@@ -297,10 +300,14 @@ MD.Editor = function(){
     }});
   };
 
+  function saveCanvas(){
+    state.set("canvasContent", svgCanvas.getSvgString());
+  }
+
   function toggleWireframe() {
     editor.menu.flash($('#view_menu')); 
     $('#tool_wireframe').toggleClass('push_button_pressed');
-    $("#svg_editor").toggleClass('wireframe');
+    $("#method-draw").toggleClass('wireframe');
   }
 
   function groupSelected(){
@@ -308,6 +315,7 @@ MD.Editor = function(){
     if (_self.selected.length > 1) {
       editor.menu.flash($('#object_menu'));
       svgCanvas.groupSelectedElements();
+      saveCanvas();
     }
   };
 
@@ -315,6 +323,7 @@ MD.Editor = function(){
     if(_self.selected.length === 1 && _self.selected[0].tagName === "g"){
       editor.menu.flash($('#object_menu'));
       svgCanvas.ungroupSelectedElement();
+      saveCanvas();
     }
   }
 
@@ -341,6 +350,26 @@ MD.Editor = function(){
     editor.modal.source.open();
   }
 
+  function loadFromUrl(url, cb){
+    if(!cb) cb = function(){/*noop*/};
+    $.ajax({
+      'url': url,
+      'dataType': 'text',
+      cache: false,
+      success: function(str) {
+        editor.import.loadSvgString(str, cb);
+      },
+      error: function(xhr, stat, err) {
+        if(xhr.status != 404 && xhr.responseText) {
+          editor.import.loadSvgString(xhr.responseText, cb);
+        } else {
+          $.alert("Unable to load from URL" + ": \n"+err+'', cb);
+        }
+      }
+    });
+  }
+
+  this.el = el;
   this.selectedChanged = selectedChanged;
   this.elementChanged = elementChanged;
   this.changeAttribute = changeAttribute;
@@ -377,6 +406,8 @@ MD.Editor = function(){
   this.shortcuts = shortcuts;
   this.donate = donate;
   this.source = source;
+  this.saveCanvas = saveCanvas;
+  this.loadFromUrl = loadFromUrl;
 
   this.export = function(){ 
     if(window.canvg) {
diff --git a/src/js/exportHandler.js b/src/js/exportHandler.js
new file mode 100644
index 00000000..5f5b968d
--- /dev/null
+++ b/src/js/exportHandler.js
@@ -0,0 +1,32 @@
+function exportHandler(window, data) {
+  var issues = data.issues;
+  
+  if(!$('#export_canvas').length) {
+    $('<canvas>', {id: 'export_canvas'}).hide().appendTo('body');
+  }
+  var c = $('#export_canvas')[0];
+  
+  c.width = svgCanvas.contentW;
+  c.height = svgCanvas.contentH;
+  canvg(c, data.svg, {renderCallback: function() {
+    var datauri = c.toDataURL('image/png');  
+    if (!datauri) return false;
+    var filename = "Method Draw Image";
+    var type = 'image/png';
+    var file = svgedit.utilities.dataURItoBlob(datauri, type);
+    if (window.navigator.msSaveOrOpenBlob) // IE10+
+        window.navigator.msSaveOrOpenBlob(file, filename);
+    else { // Others
+        var a = document.createElement("a"),
+                url = URL.createObjectURL(file);
+        a.href = url;
+        a.download = filename;
+        document.body.appendChild(a);
+        a.click();
+        setTimeout(function() {
+            document.body.removeChild(a);
+            window.URL.revokeObjectURL(url);
+        }, 0);
+    }
+  }});
+}
\ No newline at end of file
diff --git a/src/js/eyedropper.js b/src/js/eyedropper.js
index e2696eb5..7105e253 100644
--- a/src/js/eyedropper.js
+++ b/src/js/eyedropper.js
@@ -72,7 +72,6 @@ MD.Eyedropper = function() {
       title: "Eye Dropper Tool",
       position: 8,
       key: "I",
-      icon: "extensions/eyedropper.png",
       events: {
         "click": function() {
           state.set("canvasMode", "eyedropper");
@@ -108,7 +107,7 @@ MD.Eyedropper = function() {
             changes[attrname] = elem.getAttribute(attrname);
             elem.setAttribute(attrname, newvalue);
           };
-          var batchCmd = new S.BatchCommand();
+          var batchCmd = new svgedit.history.BatchCommand();
           opts.selectedElements.forEach(function(element){
             if (currentStyle.fillPaint)       change(element, "fill", currentStyle.fillPaint);
             if (currentStyle.fillOpacity)     change(element, "fill-opacity", currentStyle.fillOpacity);
diff --git a/src/js/fonts.js b/src/js/fonts.js
index 62511d94..f5b3e524 100644
--- a/src/js/fonts.js
+++ b/src/js/fonts.js
@@ -4,7 +4,7 @@ function populateFonts(fonts){
     <option value='serif' selected>serif</option>
     <option value='monospace' selected>monospace</option>
   `;
-  let fontfaces = "";
+  let fontLinks = "";
   const formats = {
     ttf: "truetype",
     otf: "opentype",
@@ -13,587 +13,1656 @@ function populateFonts(fonts){
     woff2: "woff2",
   };
   for (fontName in fonts) {
-    const variants = fonts[fontName];
-    for (variantName in variants) {
-      const variant = variants[variantName];
-      const ext = variant.file.split(".")[1].toLowerCase();
-      const format = formats[ext];
-      const src = `url('font-files/${variant.file}') format('${format}')`;
-      fontfaces += `
-        @font-face {
-          font-family: '${fontName}';
-          src: ${src};
-          font-weight: ${variant["font-weight"]};
-          font-style: ${variant["font-style"]};
-        }
-      `;
-    }
+    const font = fonts[fontName];
+    const axes = Object.keys(font.axes).join(",");
+    const pairs = Object.keys(font.axes);
+    fontLinks += `<link href="https://fonts.googleapis.com/css2?family=${fontName.split(" ").join("+")}" rel="stylesheet">`
     options += `
       <option value="${fontName}">${fontName}</option>
     `;
   }
 
   $("#font_family_dropdown").append(options);
-  $("head").append("<style>" + fontfaces +"</style>");
-
+  $("head").append('<link rel="preconnect" href="https://fonts.googleapis.com"><link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>');
+  $("head").append(fontLinks);
 };
 
 const fonts = {
 
-  "Anton": {
-    "Regular": {
-      "file": "Anton-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
+  "Alegreya": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Alumni Sans": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Andada Pro": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 840],
+        value: 400
+      }
+    }
+  },
+
+  "Antonio": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Archivo": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wdth": {
+        name: "Width",
+        range: [62,125],
+        step: 0.1,
+        value: 100
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Arimo": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Arimo": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Asap": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Assistant": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [200, 800],
+        value: 400
+      }
+    }
+  },
+
+  "Azeret Mono": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Besley": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Big Shoulders Display": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Bitter": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Bodoni Moda": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "opsz": {
+        name: "Optical Size",
+        range: [6, 96],
+        value: 14,
+        step: 0.1
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Brygada 1918": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Cabin": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wdth": {
+        name: "Width",
+        range: [75,100],
+        step: 0.1,
+        value: 100
+
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Catamaran": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Caveat": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Changa": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [200, 800],
+        value: 400
+      }
+    }
+  },
+
+  "Cinzel": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [400, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Comfortaa": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [300, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Commissioner": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Crimson Pro": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [200, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Cuprum": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Dancing Script": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Domine": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Dosis": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [200, 800],
+        value: 400
+      }
+    }
+  },
+
+  "EB Garamond": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 800],
+        value: 400
+      }
+    }
+  },
+
+  "El Messiri": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Encode Sans": {
+    "axes": {
+      "wdth": {
+        name: "Width",
+        range: [75,125],
+        step: 0.1,
+        value: 100
+
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Epilogue": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+
+  "Exo": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Faustina": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Fira Code": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [300, 700],
+        value: 400
+      }
+    }
+  },
+
+
+  "Fraunces": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "opsz": {
+        name: "Optical Size",
+        range: [9, 144],
+        value: 14,
+        step: 0.1
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      },
+      "SOFT": {
+        name: "Softness",
+        range: [0, 100],
+        value: 0,
+        step: 0.1
+      },
+      "WONK": {
+        name: "Wonky",
+        range: [0, 1],
+        value: 0
+      }
+    }
+  },
+
+  "Gemunu Libre": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [200, 800],
+        value: 400
+      }
+    }
+  },
+
+ "Georama": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wdth": {
+        name: "Width",
+        range: [62.5,125],
+        step: 0.1,
+        value: 100
+
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Glory": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 800],
+        value: 400
+      }
+    }
+  },
+
+
+  "Gluten": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Grandstander": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Grenze Gotisch": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Hahmlet": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Heebo": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Hepta Slab": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [1, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Ibarra Real Nova": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Imbue": {
+    "axes": {
+      "opsz": {
+        name: "Optical Size",
+        range: [10, 100],
+        value: 14,
+        step: 0.1
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Inconsolata": {
+    "axes": {
+      "wdth": {
+        name: "Width",
+        range: [50,200],
+        step: 0.1,
+        value: 100
+
+      },
+      "wght": {
+        name: "Weight",
+        range: [200, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Inter": {
+    "axes": {
+      "slnt": {
+        name: "Slant",
+        range: [-10,0],
+        step: 1,
+        value: 0
+
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "JetBrains Mono": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 800],
+        value: 400
+      }
+    }
+  },
+
+  "Josefin Sans": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Josefin Slab": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Jost": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
     }
   },
 
-  "Asset": {
-    "Regular": {
-      "file": "Asset-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
+  "Jura": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [300, 700],
+        value: 400
+      }
     }
   },
 
-  "Calistoga": {
-    "Regular": {
-      "file": "Calistoga-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
+ "Karla": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [200, 800],
+        value: 400
+      }
     }
   },
 
-  "Emilys Candy": {
-    "Regular": {
-      "file": "EmilysCandy-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
+  "Kreon": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [300, 700],
+        value: 400
+      }
     }
   },
 
-  "Great Vibes": {
-    "Regular": {
-      "file": "GreatVibes-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
+ "Kufam": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 900],
+        value: 400
+      }
     }
   },
 
-  "Harlow Solid Italic": {
-    "Italic": {
-      "file": "HARLOWSI_0.TTF",
-      "font-weight": "normal",
-      "font-style": "italic",
+  "Kumbh Sans": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
     }
   },
 
-  "Rounded Mplus 1c": {
-    "Regular": {
-      "file": "MPLUSRounded1c-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
+  "Lemonada": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [300, 700],
+        value: 400
+      }
     }
   },
 
-  "Rounded Mplus 1c Thin": {
-    "Regular": {
-      "file": "MPLUSRounded1c-Thin.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
+  "Lexend": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
     }
   },
-  
-  "Rounded Mplus 1c Light": {
-    "Regular": {
-      "file": "MPLUSRounded1c-Light.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
+
+ "Libre Franklin": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
     }
   },
-  "Rounded Mplus 1c Medium": {
-    "Regular": {
-      "file": "MPLUSRounded1c-Medium.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
+
+ "Literata": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "opsz": {
+        name: "Optical Size",
+        range: [7, 72],
+        value: 14,
+        step: 0.1
+      },
+      "wght": {
+        name: "Weight",
+        range: [200, 900],
+        value: 400
+      }
     }
   },
-  "Rounded Mplus 1c Bold": {
-    "Regular": {
-      "file": "MPLUSRounded1c-Bold.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
+
+ "Lora": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
     }
   },
-  "Rounded Mplus 1c ExtraBold": {
-    "Regular": {
-      "file": "MPLUSRounded1c-ExtraBold.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    }
-  },
-  "Rounded Mplus 1c Black": {
-    "Regular": {
-      "file": "MPLUSRounded1c-Black.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
+
+ "Manrope": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [200, 800],
+        value: 400
+      }
     }
-  },
-
-  "Montserrat": {
-    "Regular": {
-      "file": "Montserrat-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Montserrat-Italic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic",
-    },
-    "Bold": {
-      "file": "Montserrat-Bold.ttf",
-      "font-weight": "bold",
-      "font-style": "normal"
-    },
-    "Bold Italic": {
-      "file": "Montserrat-BoldItalic.ttf",
-      "font-weight": "bold",
-      "font-style": "italic",
-    }
-  },
-  "Montserrat Thin": {
-    "Regular": {
-      "file": "Montserrat-Thin.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Montserrat-ThinItalic.ttf",
-      "font-style": "italic",
-      "font-weight": "normal"
-    }
-  },
-  "Montserrat ExtraLight": {
-    "Regular": {
-      "file": "Montserrat-ExtraLight.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Montserrat-ExtraLightItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic",
-    }
-  },
-  "Montserrat Light": {
-    "Regular": {
-      "file": "Montserrat-Light.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Montserrat-LightItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic",
-    }
-  },
-  "Montserrat Medium": {
-    "Regular": {
-      "file": "Montserrat-Medium.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Montserrat-MediumItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic",
-    }
-  },
-  "Montserrat SemiBold": {
-    "Regular": {
-      "file": "Montserrat-SemiBold.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Montserrat-SemiBoldItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic",
-    }
-  },
-  "Montserrat ExtraBold": {
-    "Regular": {
-      "file": "Montserrat-ExtraBold.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Montserrat-ExtraBoldItalic.ttf",
-      "font-style": "italic",
-      "font-weight": "normal"
-    }
-  },
-  "Montserrat Black": {
-    "Regular": {
-      "file": "Montserrat-Black.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Montserrat-BlackItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic",
-    }
-  },
-
-  "Nunito": {
-    "Regular": {
-      "file": "Nunito-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Nunito-Italic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    },
-    "Bold": {
-      "file": "Nunito-Bold.ttf",
-      "font-weight": "bold",
-      "font-style": "normal"
-    },
-    "Bold Italic": {
-      "file": "Nunito-BoldItalic.ttf",
-      "font-style": "italic",
-      "font-weight": "bold"
-    },
-  },
-
-  "Nunito ExtraLight": {
-    "Regular": {
-      "file": "Nunito-ExtraLight.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Nunito-ExtraLightItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    }
-  },
-
-  "Nunito Light": {
-    "Regular": {
-      "file": "Nunito-Light.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Nunito-LightItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    }
-  },
-
-  "Nunito SemiBold": {
-    "Regular": {
-      "file": "Nunito-SemiBold.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Nunito-SemiBoldItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    }
-  },
-
-  "Nunito ExtraBold": {
-    "Regular": {
-      "file": "Nunito-ExtraBold.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Nunito-ExtraBoldItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    }
-  },
-
-  "Nunito Black": {
-    "Regular": {
-      "file": "Nunito-Black.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Nunito-BlackItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
+  },
+
+ "Manuale": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [300, 800],
+        value: 400
+      }
+    }
+  },
+
+  "Markazi Text": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Maven Pro": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [400, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Merriweather Sans": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [300, 800],
+        value: 400
+      }
+    }
+  },
+
+  "Mulish": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [200, 1000],
+        value: 400
+      }
+    }
+  },
+
+  "MuseoModerno": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Newsreader": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "opsz": {
+        name: "Optical Size",
+        range: [6, 72],
+        value: 14,
+        step: 0.1
+      },
+      "wght": {
+        name: "Weight",
+        range: [200, 800],
+        value: 400
+      }
+    }
+  },
+
+  "Noto Sans Display": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wdth": {
+        name: "Width",
+        range: [62.5,100],
+        step: 0.1,
+        value: 100
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Noto Sans Mono": {
+    "axes": {
+      "wdth": {
+        name: "Width",
+        range: [62.5,100],
+        step: 0.1,
+        value: 100
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Noto Serif Display": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wdth": {
+        name: "Width",
+        range: [62.5,100],
+        step: 0.1,
+        value: 100
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
     }
   },
 
   "Open Sans": {
-    "Regular": {
-      "file": "OpenSans-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "OpenSans-Italic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    },
-    "Bold": {
-      "file": "OpenSans-Bold.ttf",
-      "font-weight": "bold",
-      "font-style": "normal"
-    },
-    "Bold Italic": {
-      "file": "OpenSans-BoldItalic.ttf",
-      "font-style": "italic",
-      "font-weight": "bold"
-    },
-  },
-
-  "Open Sans Light": {
-    "Regular": {
-      "file": "OpenSans-Light.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "OpenSans-LightItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    },
-  },
-
-  "Open Sans SemiBold": {
-    "Regular": {
-      "file": "OpenSans-SemiBold.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "OpenSans-SemiBoldItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    },
-  },
-
-  "Open Sans ExtraBold": {
-    "Regular": {
-      "file": "OpenSans-ExtraBold.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "OpenSans-ExtraBoldItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    },
-  },
-
-  "Plaster": {
-    "Regular": {
-      "file": "Plaster-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    }
-  },
-
-  "Playball": {
-    "Regular": {
-      "file": "Playball-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    }
-  },
-
-  "Poppins": {
-    "Regular": {
-      "file": "Poppins-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Poppins-Italic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    },
-    "Bold": {
-      "file": "Poppins-Bold.ttf",
-      "font-weight": "bold",
-      "font-style": "normal"
-    },
-    "Bold Italic": {
-      "file": "Poppins-BoldItalic.ttf",
-      "font-style": "italic",
-      "font-weight": "bold"
-    },
-  },
-
-  "Poppins Thin": {
-    "Regular": {
-      "file": "Poppins-Thin.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Poppins-ThinItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    }
-  },
-
-  "Poppins ExtraLight": {
-    "Regular": {
-      "file": "Poppins-ExtraLight.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Poppins-ExtraLightItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    }
-  },
-
-  "Poppins Light": {
-    "Regular": {
-      "file": "Poppins-Light.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Poppins-LightItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    }
-  },
-
-  "Poppins SemiBold": {
-    "Regular": {
-      "file": "Poppins-SemiBold.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Poppins-SemiBoldItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    }
-  },
-
-  "Poppins ExtraBold": {
-    "Regular": {
-      "file": "Poppins-ExtraBold.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Poppins-ExtraBoldItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
-    }
-  },
-
-  "Poppins Black": {
-    "Regular": {
-      "file": "Poppins-Black.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Italic": {
-      "file": "Poppins-BlackItalic.ttf",
-      "font-weight": "normal",
-      "font-style": "italic"
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wdth": {
+        name: "Width",
+        range: [75,100],
+        step: 0.1,
+        value: 100
+      },
+      "wght": {
+        name: "Weight",
+        range: [300, 800],
+        value: 400
+      }
+    }
+  },
+
+  "Orbitron": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [400, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Oswald": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [200, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Oxanium": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [200, 800],
+        value: 400
+      }
+    }
+  },
+
+  "Petrona": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Piazzolla": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "opsz": {
+        name: "Optical Size",
+        range: [8, 30],
+        value: 14,
+        step: 0.1
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Playfair Display": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Podkova": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [400, 800],
+        value: 400
+      }
+    }
+  },
+
+  "Public Sans": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
     }
   },
 
   "Quicksand": {
-    "Regular": {
-      "file": "Quicksand-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Bold": {
-      "file": "Quicksand-Bold.ttf",
-      "font-weight": "bold",
-      "font-style": "normal"
-    },
-  },
-
-  "Quicksand Light": {
-    "Regular": {
-      "file": "Quicksand-Light.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-  },
-
-  "Quicksand Medium": {
-    "Regular": {
-      "file": "Quicksand-Medium.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-  },
-
-  "Quicksand SemiBold": {
-    "Regular": {
-      "file": "Quicksand-SemiBold.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-  },
-
-  "Racing Sans One": {
-    "Regular": {
-      "file": "RacingSansOne-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-  },
-
-  "Sacramento": {
-    "Regular": {
-      "file": "Sacramento-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-  },
-
-  "Special Elite": {
-    "Regular": {
-      "file": "SpecialElite-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-  },
-
-  "Tangerine": {
-    "Regular": {
-      "file": "Tangerine-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
-    "Bold": {
-      "file": "Tangerine-Bold.ttf",
-      "font-weight": "bold",
-      "font-style": "normal"
-    }
-  },
-
-  "UnifrakturMaguntia": {
-    "Book": {
-      "file": "UnifrakturMaguntia-Regular.ttf",
-      "font-weight": "normal",
-      "font-style": "normal"
-    },
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [300, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Raleway": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Rasa": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [300, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Recursive": {
+    "axes": {
+      "slnt": {
+        name: "Slant",
+        range: [-15,0],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [300, 1000],
+        value: 400
+      },
+      "CASL": {
+        name: "Casual",
+        range: [0,1],
+        value: 0,
+        step: 0.01
+      },
+      "CRSV": {
+        name: "Cursive",
+        range: [0,1],
+        value: 0.5,
+        step: 0.1
+      },
+      "MONO": {
+        name: "Monospace",
+        range: [0,1],
+        value: 0,
+        step: 0.01
+      }
+    }
+  },
+
+  "Red Hat Display": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [300, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Red Hat Text": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [300, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Red Rose": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [300, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Reem Kufi": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Roboto Mono": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Roboto Slab": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Rokkitt": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Rosario": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [300, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Rubik": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [300, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Ruda": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [400, 900],
+        value: 400
+      }
+    }
+  },
+
+  "STIX Two Text": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Saira": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wdth": {
+        name: "Width",
+        range: [50,125],
+        step: 0.1,
+        value: 125
+      },
+      "wght": {
+        name: "Weight",
+        range: [300, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Sansita Swashed": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [300, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Signika": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [300, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Sora": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 800],
+        value: 400
+      }
+    }
+  },
+
+  "Space Grotesk": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [300, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Spartan": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Stick No Bills": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [200, 800],
+        value: 400
+      }
+    }
+  },
+
+  "Syne": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [400, 800],
+        value: 400
+      }
+    }
+  },
+
+  "Texturina": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "opsz": {
+        name: "Optical Size",
+        range: [12, 72],
+        value: 14,
+        step: 0.1
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Tourney": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wdth": {
+        name: "Width",
+        range: [75,125],
+        step: 0.1,
+        value: 100
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+
+  "Trispace": {
+    "axes": {
+      "wdth": {
+        name: "Width",
+        range: [75,125],
+        step: 0.1,
+        value: 100
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 800],
+        value: 400
+      }
+    }
+  },
+
+  "Truculenta": {
+    "axes": {
+      "opsz": {
+        name: "Optical Size",
+        range: [12, 72],
+        value: 14,
+        step: 0.1
+      },
+      "wdth": {
+        name: "Width",
+        range: [75,125],
+        step: 0.1,
+        value: 100
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Urbanist": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Varta": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [300, 700],
+        value: 400
+      }
+    }
+  },
+
+
+  "Vollkorn": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [400, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Work Sans": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [100, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Yaldevi": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [200, 900],
+        value: 400
+      }
+    }
+  },
+
+  "Yanone Kaffeesatz": {
+    "axes": {
+      "wght": {
+        name: "Weight",
+        range: [200, 700],
+        value: 400
+      }
+    }
+  },
+
+  "Yrsa": {
+    "axes": {
+      "ital": {
+        name: "Italic",
+        range: [0,1],
+        value: 0
+      },
+      "wght": {
+        name: "Weight",
+        range: [300, 700],
+        value: 400
+      }
+    }
   }
 };
 
diff --git a/src/js/history.js b/src/js/history.js
index 2e0c95b4..52cc5371 100644
--- a/src/js/history.js
+++ b/src/js/history.js
@@ -581,6 +581,7 @@ svgedit.history.UndoManager.prototype.beginUndoableChange = function(attrName, e
 svgedit.history.UndoManager.prototype.finishUndoableChange = function() {
   var p = this.undoChangeStackPointer--;
   var changeset = this.undoableChangeStack[p];
+  if (!changeset) return new svgedit.history.BatchCommand();
   var i = changeset['elements'].filter(Boolean).length;
   var attrName = changeset['attrName'];
   var batchCmd = new svgedit.history.BatchCommand("Change " + attrName);
diff --git a/src/js/lib/css.min.js b/src/js/lib/css.min.js
new file mode 100644
index 00000000..5fece1e3
--- /dev/null
+++ b/src/js/lib/css.min.js
@@ -0,0 +1,3 @@
+/*! css.js 27-02-2018 */
+
+!function(e){"use strict";var t=function(){this.cssImportStatements=[],this.cssKeyframeStatements=[],this.cssRegex=new RegExp("([\\s\\S]*?){([\\s\\S]*?)}","gi"),this.cssMediaQueryRegex="((@media [\\s\\S]*?){([\\s\\S]*?}\\s*?)})",this.cssKeyframeRegex="((@.*?keyframes [\\s\\S]*?){([\\s\\S]*?}\\s*?)})",this.combinedCSSRegex="((\\s*?(?:\\/\\*[\\s\\S]*?\\*\\/)?\\s*?@media[\\s\\S]*?){([\\s\\S]*?)}\\s*?})|(([\\s\\S]*?){([\\s\\S]*?)})",this.cssCommentsRegex="(\\/\\*[\\s\\S]*?\\*\\/)",this.cssImportStatementRegex=new RegExp("@import .*?;","gi")};t.prototype.stripComments=function(e){var t=new RegExp(this.cssCommentsRegex,"gi");return e.replace(t,"")},t.prototype.parseCSS=function(e){if(void 0===e)return[];for(var t=[];;){var s=this.cssImportStatementRegex.exec(e);if(null===s)break;this.cssImportStatements.push(s[0]),t.push({selector:"@imports",type:"imports",styles:s[0]})}e=e.replace(this.cssImportStatementRegex,"");for(var r,i=new RegExp(this.cssKeyframeRegex,"gi");null!==(r=i.exec(e));)t.push({selector:"@keyframes",type:"keyframes",styles:r[0]});e=e.replace(i,"");for(var n=new RegExp(this.combinedCSSRegex,"gi");null!==(r=n.exec(e));){var o="";o=void 0===r[2]?r[5].split("\r\n").join("\n").trim():r[2].split("\r\n").join("\n").trim();var l=new RegExp(this.cssCommentsRegex,"gi"),p=l.exec(o);if(null!==p&&(o=o.replace(l,"").trim()),-1!==(o=o.replace(/\n+/,"\n")).indexOf("@media")){var a={selector:o,type:"media",subStyles:this.parseCSS(r[3]+"\n}")};null!==p&&(a.comments=p[0]),t.push(a)}else{var c={selector:o,rules:this.parseRules(r[6])};"@font-face"===o&&(c.type="font-face"),null!==p&&(c.comments=p[0]),t.push(c)}}return t},t.prototype.parseRules=function(e){var t=[];e=(e=e.split("\r\n").join("\n")).split(";");for(var s=0;s<e.length;s++){var r=e[s];if(-1!==(r=r.trim()).indexOf(":")){var i=(r=r.split(":"))[0].trim(),n=r.slice(1).join(":").trim();if(i.length<1||n.length<1)continue;t.push({directive:i,value:n})}else"base64,"===r.trim().substr(0,7)?t[t.length-1].value+=r.trim():r.length>0&&t.push({directive:"",value:r,defective:!0})}return t},t.prototype.findCorrespondingRule=function(e,t,s){void 0===s&&(s=!1);for(var r=!1,i=0;i<e.length&&(e[i].directive!==t||(r=e[i],s!==e[i].value));i++);return r},t.prototype.findBySelector=function(e,t,s){void 0===s&&(s=!1);for(var r=[],i=0;i<e.length;i++)!1===s?e[i].selector===t&&r.push(e[i]):-1!==e[i].selector.indexOf(t)&&r.push(e[i]);if("@imports"===t||r.length<2)return r;var n=r[0];for(i=1;i<r.length;i++)this.intelligentCSSPush([n],r[i]);return[n]},t.prototype.deleteBySelector=function(e,t){for(var s=[],r=0;r<e.length;r++)e[r].selector!==t&&s.push(e[r]);return s},t.prototype.compressCSS=function(e){for(var t=[],s={},r=0;r<e.length;r++){var i=e[r];if(!0!==s[i.selector]){var n=this.findBySelector(e,i.selector);0!==n.length&&(t=t.concat(n),s[i.selector]=!0)}}return t},t.prototype.cssDiff=function(e,t){if(e.selector!==t.selector)return!1;if("media"===e.type||"media"===t.type)return!1;for(var s,r,i={selector:e.selector,rules:[]},n=0;n<e.rules.length;n++)s=e.rules[n],!1===(r=this.findCorrespondingRule(t.rules,s.directive,s.value))?i.rules.push(s):s.value!==r.value&&i.rules.push(s);for(var o=0;o<t.rules.length;o++)r=t.rules[o],!1===(s=this.findCorrespondingRule(e.rules,r.directive))&&(r.type="DELETED",i.rules.push(r));return 0!==i.rules.length&&i},t.prototype.intelligentMerge=function(e,t,s){void 0===s&&(s=!1);for(var r=0;r<t.length;r++)this.intelligentCSSPush(e,t[r],s);for(r=0;r<e.length;r++){var i=e[r];"media"!==i.type&&"keyframes"!==i.type&&(i.rules=this.compactRules(i.rules))}},t.prototype.intelligentCSSPush=function(e,t,s){var r=t.selector,i=!1;if(void 0===s&&(s=!1),!1===s){for(var n=0;n<e.length;n++)if(e[n].selector===r){i=e[n];break}}else for(var o=e.length-1;o>-1;o--)if(e[o].selector===r){i=e[o];break}if(!1===i)e.push(t);else if("media"!==t.type)for(var l=0;l<t.rules.length;l++){var p=t.rules[l],a=this.findCorrespondingRule(i.rules,p.directive);!1===a?i.rules.push(p):"DELETED"===p.type?a.type="DELETED":a.value=p.value}else i.subStyles=i.subStyles.concat(t.subStyles)},t.prototype.compactRules=function(e){for(var t=[],s=0;s<e.length;s++)"DELETED"!==e[s].type&&t.push(e[s]);return t},t.prototype.getCSSForEditor=function(e,t){void 0===t&&(t=0);var s="";void 0===e&&(e=this.css);for(var r=0;r<e.length;r++)"imports"===e[r].type&&(s+=e[r].styles+"\n\n");for(r=0;r<e.length;r++){var i=e[r];if(void 0!==i.selector){var n="";void 0!==i.comments&&(n=i.comments+"\n"),"media"===i.type?(s+=n+i.selector+"{\n",s+=this.getCSSForEditor(i.subStyles,t+1),s+="}\n\n"):"keyframes"!==i.type&&"imports"!==i.type&&(s+=this.getSpaces(t)+n+i.selector+" {\n",s+=this.getCSSOfRules(i.rules,t+1),s+=this.getSpaces(t)+"}\n\n")}}for(r=0;r<e.length;r++)"keyframes"===e[r].type&&(s+=e[r].styles+"\n\n");return s},t.prototype.getImports=function(e){for(var t=[],s=0;s<e.length;s++)"imports"===e[s].type&&t.push(e[s].styles);return t},t.prototype.getCSSOfRules=function(e,t){for(var s="",r=0;r<e.length;r++)void 0!==e[r]&&(void 0===e[r].defective?s+=this.getSpaces(t)+e[r].directive+": "+e[r].value+";\n":s+=this.getSpaces(t)+e[r].value+";\n");return s||"\n"},t.prototype.getSpaces=function(e){for(var t="",s=0;s<4*e;s++)t+=" ";return t},t.prototype.applyNamespacing=function(e,t){var s=e,r="."+this.cssPreviewNamespace;void 0!==t&&(r=t),"string"==typeof e&&(s=this.parseCSS(e));for(var i=0;i<s.length;i++){var n=s[i];if(!(n.selector.indexOf("@font-face")>-1||n.selector.indexOf("keyframes")>-1||n.selector.indexOf("@import")>-1||n.selector.indexOf(".form-all")>-1||n.selector.indexOf("#stage")>-1))if("media"!==n.type){for(var o=n.selector.split(","),l=[],p=0;p<o.length;p++)-1===o[p].indexOf(".supernova")?l.push(r+" "+o[p]):l.push(o[p]);n.selector=l.join(",")}else n.subStyles=this.applyNamespacing(n.subStyles,t)}return s},t.prototype.clearNamespacing=function(e,t){void 0===t&&(t=!1);var s=e,r="."+this.cssPreviewNamespace;"string"==typeof e&&(s=this.parseCSS(e));for(var i=0;i<s.length;i++){var n=s[i];if("media"!==n.type){for(var o=n.selector.split(","),l=[],p=0;p<o.length;p++)l.push(o[p].split(r+" ").join(""));n.selector=l.join(",")}else n.subStyles=this.clearNamespacing(n.subStyles,!0)}return!1===t?this.getCSSForEditor(s):s},t.prototype.createStyleElement=function(e,t,s){if(void 0===s&&(s=!1),!1===this.testMode&&"nonamespace"!==s&&(t=this.applyNamespacing(t)),"string"!=typeof t&&(t=this.getCSSForEditor(t)),!0===s&&(t=this.getCSSForEditor(this.parseCSS(t))),!1!==this.testMode)return this.testMode("create style #"+e,t);var r=document.getElementById(e);r&&r.parentNode.removeChild(r);var i=document.head||document.getElementsByTagName("head")[0],n=document.createElement("style");n.id=e,n.type="text/css",i.appendChild(n),n.styleSheet&&!n.sheet?n.styleSheet.cssText=t:n.appendChild(document.createTextNode(t))},e.cssjs=t}(this);
\ No newline at end of file
diff --git a/src/js/lib/jpicker.min.js b/src/js/lib/jpicker.min.js
index f9266b27..9ad0b01e 100644
--- a/src/js/lib/jpicker.min.js
+++ b/src/js/lib/jpicker.min.js
@@ -1671,7 +1671,7 @@
                 var all = color.active.val('all');
                 if (win.alphaPrecision < 0) win.alphaPrecision = 0;
                 else if (win.alphaPrecision > 2) win.alphaPrecision = 2;
-                var controlHtml='<table class="jPicker" cellpadding="0" cellspacing="0"><tbody>' + (win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : '') + '<tr><td rowspan="9"><h2 class="Title">' + (win.title || localization.text.title) + '</h2><div class="Map"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><img src="' + images.clientPath + images.colorMap.arrow.file + '" class="Arrow"/></div></td><td rowspan="9"><div class="Bar"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><span class="Map4">&nbsp;</span><span class="Map5">&nbsp;</span><span class="Map6">&nbsp;</span><img src="' + images.clientPath + images.colorBar.arrow.file + '" class="Arrow"/></div></td><td colspan="2" class="Preview"><div class="prev_div">' + localization.text.newColor + '<div class="color_preview"><span class="Active" title="' + localization.tooltips.colors.newColor + '">&nbsp;</span><span class="Current" title="' + localization.tooltips.colors.currentColor + '">&nbsp;</span></div></div>' + localization.text.currentColor + '</td><td rowspan="9" class="Button"><input type="button" class="Ok" value="' + localization.text.ok + '" title="' + localization.tooltips.buttons.ok + '"/><input type="button" class="Cancel" value="' + localization.text.cancel + '" title="' + localization.tooltips.buttons.cancel + '"/><div class="Grid">&nbsp;</div></td></tr><tr class="Hue"><td class="Radio"><label title="' + localization.tooltips.hue.radio + '"><input name="color_mode" type="radio" value="h"' + (settings.color.mode == 'h' ? ' checked="checked"' : '') + '/>H:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.h : '') + '" title="' + localization.tooltips.hue.textbox + '"/>&nbsp;º</td></tr><tr class="Saturation"><td class="Radio"><label title="' + localization.tooltips.saturation.radio + '"><input  name="color_mode" type="radio" value="s"' + (settings.color.mode == 's' ? ' checked="checked"' : '') + '/>S:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.s : '') + '" title="' + localization.tooltips.saturation.textbox + '"/>&nbsp;%</td></tr><tr class="Value"><td class="Radio"><label title="' + localization.tooltips.value.radio + '"><input  name="color_mode" type="radio" value="v"' + (settings.color.mode == 'v' ? ' checked="checked"' : '') + '/>V:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.v : '') + '" title="' + localization.tooltips.value.textbox + '"/>&nbsp;%<br/><br/></td></tr><tr class="Red"><td class="Radio"><label title="' + localization.tooltips.red.radio + '"><input name="color_mode" type="radio" value="r"' + (settings.color.mode == 'r' ? ' checked="checked"' : '') + '/>R:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.r : '') + '" title="' + localization.tooltips.red.textbox + '"/></td></tr><tr class="Green"><td class="Radio"><label title="' + localization.tooltips.green.radio + '"><input  name="color_mode" type="radio" value="g"' + (settings.color.mode == 'g' ? ' checked="checked"' : '') + '/>G:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.g : '') + '" title="' + localization.tooltips.green.textbox + '"/></td></tr><tr class="Blue"><td class="Radio"><label title="' + localization.tooltips.blue.radio + '"><input  name="color_mode" type="radio" value="b"' + (settings.color.mode == 'b' ? ' checked="checked"' : '') + '/>B:</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.b : '') + '" title="' + localization.tooltips.blue.textbox + '"/></td></tr><tr class="Alpha"><td class="Radio">' + (win.alphaSupport ? '<label title="' + localization.tooltips.alpha.radio + '"><input  name="color_mode" type="radio" value="a"' + (settings.color.mode == 'a' ? ' checked="checked"' : '') + '/>A:</label>' : '&nbsp;') + '</td><td class="Text">' + (win.alphaSupport ? '<input type="text" maxlength="' + (3 + win.alphaPrecision) + '" value="' + (all != null ? Math.precision((all.a * 100) / 255, win.alphaPrecision) : '') + '" title="' + localization.tooltips.alpha.textbox + '"/>&nbsp;%' : '&nbsp;') + '</td></tr><tr class="Hex"><td colspan="2" class="Text"><label title="' + localization.tooltips.hex.textbox + '">#:<input type="text" maxlength="6" class="Hex" value="' + (all != null ? all.hex : '') + '"/></label>' + (win.alphaSupport ? '<input type="text" maxlength="2" class="AHex" value="' + (all != null ? all.ahex.substring(6) : '') + '" title="' + localization.tooltips.hex.alpha + '"/></td>' : '&nbsp;') + '</tr></tbody></table>';
+                var controlHtml='<table class="jPicker" cellpadding="0" cellspacing="0"><tbody>' + (win.expandable ? '<tr><td class="Move" colspan="5">&nbsp;</td></tr>' : '') + '<tr><td rowspan="9"><h2 class="Title">' + (win.title || localization.text.title) + '</h2><div class="Map"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><img src="' + images.clientPath + images.colorMap.arrow.file + '" class="Arrow"/></div></td><td rowspan="9"><div class="Bar"><span class="Map1">&nbsp;</span><span class="Map2">&nbsp;</span><span class="Map3">&nbsp;</span><span class="Map4">&nbsp;</span><span class="Map5">&nbsp;</span><span class="Map6">&nbsp;</span><img src="' + images.clientPath + images.colorBar.arrow.file + '" class="Arrow"/></div></td><td colspan="2" class="Preview"><div class="prev_div">' + localization.text.newColor + '<div class="color_preview"><span class="Active" title="' + localization.tooltips.colors.newColor + '">&nbsp;</span><span class="Current" title="' + localization.tooltips.colors.currentColor + '">&nbsp;</span></div></div>' + localization.text.currentColor + '</td><td rowspan="9" class="Button"><input type="button" class="Ok" value="' + localization.text.ok + '" title="' + localization.tooltips.buttons.ok + '"/><input type="button" class="Cancel" value="' + localization.text.cancel + '" title="' + localization.tooltips.buttons.cancel + '"/><div class="Grid">&nbsp;</div></td></tr><tr class="Hue"><td class="Radio"><label title="' + localization.tooltips.hue.radio + '"><input name="color_mode" type="radio" value="h"' + (settings.color.mode == 'h' ? ' checked="checked"' : '') + '/>H</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.h : '') + '" title="' + localization.tooltips.hue.textbox + '"/>&nbsp;º</td></tr><tr class="Saturation"><td class="Radio"><label title="' + localization.tooltips.saturation.radio + '"><input  name="color_mode" type="radio" value="s"' + (settings.color.mode == 's' ? ' checked="checked"' : '') + '/>S</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.s : '') + '" title="' + localization.tooltips.saturation.textbox + '"/>&nbsp;%</td></tr><tr class="Value"><td class="Radio"><label title="' + localization.tooltips.value.radio + '"><input  name="color_mode" type="radio" value="v"' + (settings.color.mode == 'v' ? ' checked="checked"' : '') + '/>L</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.v : '') + '" title="' + localization.tooltips.value.textbox + '"/>&nbsp;%<br/><br/></td></tr><tr class="Red"><td class="Radio"><label title="' + localization.tooltips.red.radio + '"><input name="color_mode" type="radio" value="r"' + (settings.color.mode == 'r' ? ' checked="checked"' : '') + '/>R</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.r : '') + '" title="' + localization.tooltips.red.textbox + '"/></td></tr><tr class="Green"><td class="Radio"><label title="' + localization.tooltips.green.radio + '"><input  name="color_mode" type="radio" value="g"' + (settings.color.mode == 'g' ? ' checked="checked"' : '') + '/>G</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.g : '') + '" title="' + localization.tooltips.green.textbox + '"/></td></tr><tr class="Blue"><td class="Radio"><label title="' + localization.tooltips.blue.radio + '"><input  name="color_mode" type="radio" value="b"' + (settings.color.mode == 'b' ? ' checked="checked"' : '') + '/>B</label></td><td class="Text"><input type="text" maxlength="3" value="' + (all != null ? all.b : '') + '" title="' + localization.tooltips.blue.textbox + '"/></td></tr><tr class="Alpha"><td class="Radio">' + (win.alphaSupport ? '<label title="' + localization.tooltips.alpha.radio + '"><input  name="color_mode" type="radio" value="a"' + (settings.color.mode == 'a' ? ' checked="checked"' : '') + '/>A</label>' : '&nbsp;') + '</td><td class="Text">' + (win.alphaSupport ? '<input type="text" maxlength="' + (3 + win.alphaPrecision) + '" value="' + (all != null ? Math.precision((all.a * 100) / 255, win.alphaPrecision) : '') + '" title="' + localization.tooltips.alpha.textbox + '"/>&nbsp;%' : '&nbsp;') + '</td></tr><tr class="Hex"><td colspan="2" class="Text"><label title="' + localization.tooltips.hex.textbox + '">Hex<input type="text" maxlength="6" class="Hex" value="' + (all != null ? all.hex : '') + '"/></label>' + (win.alphaSupport ? '<input type="text" maxlength="2" class="AHex" value="' + (all != null ? all.ahex.substring(6) : '') + '" title="' + localization.tooltips.hex.alpha + '"/></td>' : '&nbsp;') + '</tr></tbody></table>';
                 if (win.expandable)
                 {
                   container.html(controlHtml);
@@ -1786,7 +1786,6 @@
                     var quickHex = color.quickList[i].val('hex');
                     html+='<span class="QuickColor"' + (ahex && ' title="#' + ahex + '"' || '') + ' style="background-color:' + (quickHex && '#' + quickHex || '') + ';' + (quickHex ? '' : 'background-image:url(' + images.clientPath + 'NoColor.svg)') + (win.alphaSupport && alpha && alpha < 255 ? ';opacity:' + Math.precision(alpha / 255, 4) + ';filter:Alpha(opacity=' + Math.precision(alpha / 2.55, 4) + ')' : '') + '">&nbsp;</span>';
                   }
-                  setImg.call($this, grid, images.clientPath + 'bar-opacity.png');
                   grid.html(html);
                   grid.find('.QuickColor').click(quickPickClicked);
                 }
diff --git a/src/js/lib/jquery-draginput.js b/src/js/lib/jquery-draginput.js
index e15b57fa..4921bf5a 100644
--- a/src/js/lib/jquery-draginput.js
+++ b/src/js/lib/jquery-draginput.js
@@ -35,7 +35,6 @@ $.fn.dragInput = function(cfg){
     var scale = area/cursorHeight * step;
     var lastY = 0;
     var attr = this.getAttribute("data-attr");
-    var canvas = svgCanvas;
     var completed = true //for mousewheel
     var $cursor = (area && this.dragCfg.cursor)
       ? $("<div class='draginput_cursor' />").appendTo($label) 
@@ -78,17 +77,17 @@ $.fn.dragInput = function(cfg){
     
     //when the mouse is released
     this.stop = function() {
-      var selectedElems = canvas.getSelectedElems();
+      var selectedElems = svgCanvas.getSelectedElems();
       $('body').removeClass('dragging');
       $label.removeClass("active");
       completed = true;
       $(window).unbind("mousemove.draginput touchmove.draginput mouseup.draginput touchend.draginput");
       lastY = 0;
       if (selectedElems[0]) {
-        var batchCmd = canvas.undoMgr.finishUndoableChange();
-        if (!batchCmd.isEmpty()) canvas.undoMgr.addCommandToHistory(batchCmd);
+        var batchCmd = svgCanvas.undoMgr.finishUndoableChange();
+        if (!batchCmd.isEmpty()) svgCanvas.undoMgr.addCommandToHistory(batchCmd);
       }
-      this.adjustValue(0, completed)
+      this.adjustValue(0, completed);
     }
     
     this.updateCursor = function(){
@@ -98,17 +97,22 @@ $.fn.dragInput = function(cfg){
     }
     
     this.launch = function(e) {
-      var selectedElems = canvas.getSelectedElems();
+      var selectedElems = svgCanvas.getSelectedElems();
       var oy = e.pageY;
       var val = this.value;
       var el = this;
-      if (attr && selectedElems.length) canvas.undoMgr.beginUndoableChange(attr, selectedElems)
+      if (attr && selectedElems.length) svgCanvas.undoMgr.beginUndoableChange(attr, selectedElems)
       $('body').addClass('dragging');
       $label.addClass('active');
       $(window).bind("mousemove.draginput touchmove.draginput", function(e){el.move(e, oy, parseFloat(val))})
       $(window).bind("mouseup.draginput touchend.draginput", function(e){el.stop()})
+      $("input").blur();
     }
     
+    const delta = 2;
+    let startX;
+    let startY;
+
     $(this)
       .attr("readonly", "readonly")
       .attr("data-scale", scale)
@@ -116,9 +120,23 @@ $.fn.dragInput = function(cfg){
       .attr("data-cursor", ($cursor !== false))
           
     .bind("mousedown touchstart", function(e){
+      startX = event.pageX;
+      startY = event.pageY;
       this.blur();
       this.launch(e);
     })
+
+    .bind("mouseup touchend", function(e) {
+      const diffX = Math.abs(event.pageX - startX);
+      const diffY = Math.abs(event.pageY - startY);
+
+      if (diffX < delta && diffY < delta) {
+          this.removeAttribute("readonly", "readonly");
+          this.focus();
+          this.select();
+      }
+      
+    })
     
     .bind("dblclick taphold", function(e) {
       this.removeAttribute("readonly", "readonly");
@@ -147,12 +165,15 @@ $.fn.dragInput = function(cfg){
     })
     
     .blur(function(e){
+      window.getSelection().removeAllRanges();
       this.setAttribute("readonly", "readonly")
     })
     
     .bind("mousewheel", function(e, delta, deltaX, deltaY){
-      var selectedElems = canvas.getSelectedElems();
-      if (completed) canvas.undoMgr.beginUndoableChange(attr, selectedElems)
+      const panels = document.getElementById("panels");
+      if (panels.scrollHeight > panels.clientHeight) return;
+      var selectedElems = svgCanvas.getSelectedElems();
+      if (completed) svgCanvas.undoMgr.beginUndoableChange(attr, selectedElems)
       completed = false
       clearTimeout(window.undoTimeout)
       window.undoTimeout = setTimeout(function(){
@@ -179,6 +200,6 @@ $.fn.dragInput.updateCursor = function(el){
   var domain = parseFloat(el.getAttribute("data-domain"));
   var pos = ((value*-1)/scale+domain) + "px";
   var cursor = el.parentNode.lastChild
-  if (cursor.className == "draginput_cursor") cursor.style.top = pos;
+  if (cursor.className === "draginput_cursor") cursor.style.top = pos;
 }
 
diff --git a/src/js/lib/jquery.jgraduate.js b/src/js/lib/jquery.jgraduate.js
index 23a51fbe..417d12fd 100644
--- a/src/js/lib/jquery.jgraduate.js
+++ b/src/js/lib/jquery.jgraduate.js
@@ -76,7 +76,18 @@ $.jGraduate = {
               this.linearGradient = options.copy.linearGradient.cloneNode(true);
               break;
             case "radialGradient":
-              this.radialGradient = options.copy.radialGradient.cloneNode(true);
+              const clone = options.copy.radialGradient.cloneNode(true);
+              
+              if (clone.getAttribute('gradientUnits') === "userSpaceOnUse") {
+                // todo hardcoded dimensions
+                const rRatio = (256/2) / clone.getAttribute("r");
+                const cxRatio = (256/2) / clone.getAttribute("cx");
+                const cyRatio = (256/2) /clone.getAttribute("cy");
+                clone.setAttribute("r", rRatio * 22/2 );
+                clone.setAttribute("cx", cxRatio * 22/2);
+                clone.setAttribute("cy", cyRatio * 22/2);
+              }
+              this.radialGradient = clone;
               break;
           }
         }
@@ -249,7 +260,7 @@ jQuery.fn.jGraduate =
           '<div class="jGraduate_StopSection">' +
             '<label class="jGraduate_Form_Heading">Focal Point</label>' +
             '<div class="jGraduate_Form_Section">' +
-              '<label>Match center: <input type="checkbox" checked="checked" id="' + id + '_jGraduate_match_ctr"/></label><br/>' +
+              '<label class="match-center"><input type="checkbox" checked="checked" id="' + id + '_jGraduate_match_ctr"/> Match center</label><br/>' +
               '<label>x:</label>' +
               '<input type="text" id="' + id + '_jGraduate_fx" size="3" title="Enter x value between 0.0 and 1.0"/>' +
               '<label> y:</label>' +
@@ -287,7 +298,7 @@ jQuery.fn.jGraduate =
             '<div id="' + id + '_jGraduate_Angle" class="jGraduate_SliderBar jGraduate_Angle" title="Click to set Angle">' +
               '<img id="' + id + '_jGraduate_AngleArrows" class="jGraduate_AngleArrows" src="' + $settings.images.clientPath + 'rangearrows2.svg" width="9" height="20">' +
             '</div>' +
-            '<label><input type="text" id="' + id + '_jGraduate_AngleInput" size="3" value="0"/>º&nbsp;</label>' + 
+            '<label><input type="text" id="' + id + '_jGraduate_AngleInput" size="3" value="0"/>º&nbsp;</label>' + 
                 '</div>' +
                 '<div class="jGraduate_Slider jGraduate_OpacField">' +
             '<label class="prelabel">Opac:</label>' +
@@ -311,7 +322,7 @@ jQuery.fn.jGraduate =
             
       var attr_input = {};
             
-            var SLIDERW = 145;
+            var SLIDERW = 120;
             $('.jGraduate_SliderBar').width(SLIDERW);
       
       var container = $('#' + id+'_jGraduate_GradContainer')[0];
@@ -476,11 +487,11 @@ jQuery.fn.jGraduate =
           .val(attrval)
           .change(function() {
             // TODO: Support values < 0 and > 1 (zoomable preview?)
-            if (isNaN(parseFloat(this.value)) || this.value < 0) {
-              this.value = 0.0; 
-            } else if(this.value > 1) {
-              this.value = 1.0;
-            }
+            // if (isNaN(parseFloat(this.value)) || this.value < 0) {
+            //   this.value = 0.0; 
+            // } else if(this.value > 1) {
+            //   this.value = 1.0;
+            // }
             
             if(!(attr[0] === 'f' && !showFocus)) {
               if(isRadial && curType === 'radialGradient' || !isRadial && curType === 'linearGradient') {
@@ -842,7 +853,7 @@ jQuery.fn.jGraduate =
       // bind GUI elements
       $('#'+id+'_jGraduate_Ok').bind('click touchstart', function() {
         $this.paint.type = curType;
-        $this.paint[curType] = curGradient.cloneNode(true);;
+        $this.paint[curType] = curGradient.cloneNode(true);
         $this.paint.solidColor = null;
         okClicked();
       });
@@ -1123,6 +1134,8 @@ jQuery.fn.jGraduate =
         var type = $(this).attr('data-type');
         var container = $(idref + ' .jGraduate_gradPick').show();
         if(type === 'rg' || type === 'lg') {
+          const isRadialUserSpaceOnUse = $("#color_picker").attr("data-radialUserSpace") === "true";
+          $("#color_picker").toggleClass("radialUserSpace", isRadialUserSpaceOnUse && type === 'rg');
           // Show/hide appropriate fields
           $('.jGraduate_' + type + '_field').show();
           $('.jGraduate_' + (type === 'lg' ? 'rg' : 'lg') + '_field').hide();
diff --git a/src/js/lib/pathseg.js b/src/js/lib/pathseg.js
index ff7822c0..c86b73ba 100644
--- a/src/js/lib/pathseg.js
+++ b/src/js/lib/pathseg.js
@@ -6,6 +6,12 @@
 // changes which were implemented in Firefox 43 and Chrome 46.
 
 (function() { "use strict";
+    // The polyfill only applies to browser environments with a `window` object 
+    // (i.e. not node.js, workers, etc.). If included in one of these 
+    // environments (such as when using 'react-dom/server'), simply return out
+    if (typeof window === 'undefined')
+        return;
+
     if (!("SVGPathSeg" in window)) {
         // Spec: http://www.w3.org/TR/SVG11/single-page.html#paths-InterfaceSVGPathSeg
         window.SVGPathSeg = function(type, typeAsLetter, owningPathSegList) {
diff --git a/src/js/loading.js b/src/js/loading.js
new file mode 100644
index 00000000..096c6ebc
--- /dev/null
+++ b/src/js/loading.js
@@ -0,0 +1,14 @@
+(function(){
+  const canvasContent = localStorage.getItem("md-canvasContent");
+  const isDark = localStorage.getItem("md-darkmode");
+  if (!isDark && isDark !== null) document.body.classList.add("inverted");
+  if (!canvasContent) return;
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(canvasContent, "image/svg+xml");
+  const workarea = document.getElementById("workarea");
+  workarea.appendChild(doc.documentElement);
+  const svgCanvas = document.getElementById("svgcanvas");
+  const canvasTitle = localStorage.getItem("md-canvasTitle");
+  svgCanvas.setAttribute("title", canvasTitle ? "Loading " + canvasTitle  : "Loading Drawing");
+  const svg = workarea.querySelector("svg");
+})();
\ No newline at end of file
diff --git a/src/js/method-draw.js b/src/js/method-draw.js
index a84449e1..9e3b63a9 100644
--- a/src/js/method-draw.js
+++ b/src/js/method-draw.js
@@ -1573,7 +1573,7 @@ window.methodDraw = function() {
                 keyval = opts.key;
               }
               keyval += '';
-              if (svgedit.browser.isMac && keyval.indexOf("+") != -1) {
+              if (svgedit.browser.isMac() && keyval.indexOf("+") != -1) {
                 var modifier_key =  keyval.split("+")[0];
                 if (modifier_key == "ctrl") keyval.replace("ctrl", "cmd")
               }
@@ -1716,7 +1716,7 @@ window.methodDraw = function() {
     $('#rect_rx')      .dragInput({ min: 0,    max: 100,   step:  1,  callback: changeAttribute,    cursor: true                          });
     $('#stroke_width') .dragInput({ min: 0,    max: 99,    step:  1,  callback: changeStrokeWidth,   cursor: true, smallStep: 0.1, start: 1.5          });
     $('#angle')        .dragInput({ min: -180, max: 180,   step:  1,  callback: changeRotationAngle, cursor: false, dragAdjust: 0.5      });
-    $('#font_size')    .dragInput({ min: 1, max: 250, step: 1, callback: changeFontSize, cursor: true, stepfunc: stepFontSize, dragAdjust: .15 });
+    $('#font_size')    .dragInput({ min: 1, max: 250, step: 1, callback: changeFontSize,             cursor: false, stepfunc: stepFontSize, dragAdjust: .15 });
     $('#group_opacity').dragInput({ min: 0,    max: 100,   step:  5,  callback: changeAttribute,       cursor: true,  start: 100             });
     $('#blur')         .dragInput({ min: 0,    max: 10,    step: .1,  callback: changeBlur,          cursor: true,  start: 0               });
       // Set default zoom 
diff --git a/src/js/modals.js b/src/js/modals.js
new file mode 100644
index 00000000..a066d3aa
--- /dev/null
+++ b/src/js/modals.js
@@ -0,0 +1,85 @@
+// globals
+const svgCanvas = new $.SvgCanvas(document.getElementById("svgcanvas"));
+const editor = new MD.Editor();
+const state = new State();
+
+editor.modal = {
+  about: new MD.Modal({
+    html: `
+      <h1>About this application</h1>
+      <p>Method Draw is a simple <a href="https://github.com/methodofaction/Method-Draw">open source</a> vector drawing application. Method Draw was forked from <a href="https://github.com/SVG-Edit/svgedit">SVG-Edit</a> several years ago with the goal of improving and modernizing the interface.</p>
+      <p>At this time (2021), the author (<a href="http://method.ac/writing">Mark MacKay</a>) is working on improving stability and improving the codebase, which contains a lot of legacy practices. The goal is to create a vector editor suitable for simple graphic design tasks.</p>
+      `
+  }),
+  source: new MD.Modal({
+    html: `
+      <div id="svg_source_editor">
+        <div id="svg_source_overlay" class="overlay"></div>
+        <div id="svg_source_container">
+          <form>
+            <textarea id="svg_source_textarea" spellcheck="false"></textarea>
+          </form>
+          <div id="tool_source_back" class="toolbar_button">
+            <button id="tool_source_cancel" class="cancel">Cancel</button>
+            <button id="tool_source_save" class="ok">Apply Changes</button>
+          </div>
+        </div>
+    </div>`,
+    js: function(el){
+      el.children[0].classList.add("modal-item-source");
+      el.querySelector("#tool_source_save").addEventListener("click", function(){
+        var saveChanges = function() {
+          svgCanvas.clearSelection();
+          $('#svg_source_textarea').blur();
+          editor.zoom.multiply(1);
+          editor.rulers.update();
+          editor.paintBox.fill.prep();
+          editor.paintBox.stroke.prep();
+          editor.modal.source.close();
+        }
+
+        if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) {
+          $.confirm("There were parsing errors in your SVG source.\nRevert back to original SVG source?", function(ok) {
+            if(!ok) return false;
+            saveChanges();
+          });
+        } else {
+          saveChanges();
+        } 
+      })
+      el.querySelector("#tool_source_cancel").addEventListener("click", function(){
+        editor.modal.source.close();
+      });
+    }
+  }),
+  configure: new MD.Modal({
+    html: `
+      <h1>Configuration</h1>
+      <div id="configuration">
+        <button class="warning">Erase all data</button>
+        </div>
+      </div>`,
+    js: function(el){
+      const input = el.querySelector("#configuration button.warning");
+      input.addEventListener("click", function(){
+        state.clean();
+      })
+    }
+  }),
+  donate: new MD.Modal({
+    html: `
+      <h1>Donate</h1>
+      <p>
+        Method Draw relies on your generous donations for continued development.
+        <a href="https://method.ac/donate/">Donate now</a> if you find this application useful.
+      </p>`
+  }),
+  shortcuts: new MD.Modal({
+    html: `
+      <h1>Shortcuts</h1>
+      <div id="shortcuts"></div>`,
+    js: function(el){
+      el.children[0].classList.add("modal-item-wide");
+    }
+  })
+};
\ No newline at end of file
diff --git a/src/js/paste.js b/src/js/paste.js
index 96a586c9..38f748dd 100644
--- a/src/js/paste.js
+++ b/src/js/paste.js
@@ -1,4 +1,4 @@
-// window.addEventListener('paste', ... or
+// TODO as is paste is currently not working
 document.onpaste = function(event){
   var items = (event.clipboardData || event.originalEvent.clipboardData).items;
   for (index in items) {
@@ -6,8 +6,7 @@ document.onpaste = function(event){
     if (item.kind === 'file') {
       var blob = item.getAsFile();
       var reader = new FileReader();
-      reader.onload = function(event){
-        console.log(event.target.result)}; // data url!
+      reader.onload = function(event){}; // remove?
       reader.readAsDataURL(blob);
     }
   }
diff --git a/src/js/sanitize.js b/src/js/sanitize.js
index 77e231a4..3e5777a2 100644
--- a/src/js/sanitize.js
+++ b/src/js/sanitize.js
@@ -128,6 +128,9 @@ $.each(svgWhiteList_, function(elt,atts){
   svgWhiteListNS_[elt] = attNS;
 });
 
+
+svgedit.sanitize.svgWhiteList = function() { return svgWhiteList_; }
+
 // temporarily expose these
 svgedit.sanitize.getNSMap = function() { return nsMap_; }
 
@@ -141,12 +144,12 @@ svgedit.sanitize.sanitizeSvg = function(node) {
   // we only care about element nodes
   // automatically return for all comment, etc nodes
   // for text, we do a whitespace trim
-  if (node.nodeType == 3) {
+  if (node.nodeType === 3) {
     node.nodeValue = node.nodeValue.replace(/^\s+|\s+$/g, "");
     // Remove empty text nodes
     if(!node.nodeValue.length) node.parentNode.removeChild(node);
   }
-  if (node.nodeType != 1) return;
+  if (node.nodeType !== 1) return;
 
   var doc = node.ownerDocument;
   var parent = node.parentNode;
@@ -158,7 +161,6 @@ svgedit.sanitize.sanitizeSvg = function(node) {
 
   // if this element is allowed
   if (allowedAttrs != undefined) {
-
     var se_attrs = [];
   
     var i = node.attributes.length;
@@ -198,16 +200,17 @@ svgedit.sanitize.sanitizeSvg = function(node) {
       }
       
       // for the style attribute, rewrite it in terms of XML presentational attributes
-      if (attrName == "style") {
-        var props = attr.nodeValue.replace(' ', '').split(";"),
-          p = props.length;
-        while(p--) {
-          var nv = props[p].split(":");
-          // now check that this attribute is supported
-          if (allowedAttrs.indexOf(nv[0]) >= 0) {
-            node.setAttribute(nv[0],nv[1]);
-          }
-        }
+      if (attrName === "style") {
+        const props = attr.nodeValue
+          .split(";")
+          .map(prop => prop.trim())
+          .filter(Boolean)
+          .forEach(prop => {
+            var nv = prop.split(":");
+            if (allowedAttrs.indexOf(nv[0]) >= 0) {
+              node.setAttribute(nv[0],nv[1]);
+            }
+          })
         node.removeAttribute('style');
       }
     }
diff --git a/src/js/select.js b/src/js/select.js
index a628d9c2..0e5ac4c6 100644
--- a/src/js/select.js
+++ b/src/js/select.js
@@ -112,7 +112,7 @@ svgedit.select.Selector.prototype.updateGripCursors = function(angle) {
   }
   var i = 0;
   for (var dir in selectorManager_.selectorGrips) {
-    selectorManager_.selectorGrips[dir].setAttribute('style', ('cursor:' + dir_arr[i] + '-resize'));
+    selectorManager_.selectorGrips[dir].style.cursor = dir_arr[i] + '-resize';
     i++;
   };
 };
@@ -128,6 +128,12 @@ svgedit.select.Selector.prototype.showGrips = function(show) {
   var elem = this.selectedElement;
   this.hasGrips = show;
   if(elem && show) {
+    // hide unproportional scale grips
+    // const isText = elem.tagName === "text";
+    // const grips = selectorManager_.selectorGrips;
+    // ["n", "s", "e", "w"].forEach(dir => {
+    //   grips[dir].style.display = isText ? "none" : "inline";
+    // });
     this.selectorGroup.appendChild(selectorManager_.selectorGripsGroup);
     this.updateGripCursors(svgedit.utilities.getRotationAngle(elem));
   }
diff --git a/src/js/start.js b/src/js/start.js
index 178bdaf1..73949893 100644
--- a/src/js/start.js
+++ b/src/js/start.js
@@ -1,89 +1,3 @@
-// globals
-const svgCanvas = new $.SvgCanvas(document.getElementById("svgcanvas"));
-const editor = new MD.Editor();
-const state = new State();
-
-editor.modal = {
-  about: new MD.Modal({
-    html: `
-      <h1>About this application</h1>
-      <p>Method Draw is a simple <a href="https://github.com/methodofaction/Method-Draw">open source</a> vector drawing application. Method Draw was forked from <a href="https://github.com/SVG-Edit/svgedit">SVG-Edit</a> several years ago with the goal of improving and modernizing the interface.</p>
-      <p>At this time (2021), the author (<a href="http://method.ac/writing">Mark MacKay</a>) is working on improving stability and improving the codebase, which contains a lot of legacy practices. The goal is to create a vector editor suitable for simple graphic design tasks.</p>
-      `
-  }),
-  source: new MD.Modal({
-    html: `
-      <div id="svg_source_editor">
-        <div id="svg_source_overlay" class="overlay"></div>
-        <div id="svg_source_container">
-          <form>
-            <textarea id="svg_source_textarea" spellcheck="false"></textarea>
-          </form>
-          <div id="tool_source_back" class="toolbar_button">
-            <button id="tool_source_cancel" class="cancel">Cancel</button>
-            <button id="tool_source_save" class="ok">Apply Changes</button>
-          </div>
-        </div>
-    </div>`,
-    js: function(el){
-      el.children[0].classList.add("modal-item-source");
-      el.querySelector("#tool_source_save").addEventListener("click", function(){
-        var saveChanges = function() {
-          svgCanvas.clearSelection();
-          $('#svg_source_textarea').blur();
-          editor.zoom.multiply(1);
-          editor.rulers.update();
-          editor.paintBox.fill.prep();
-          editor.paintBox.stroke.prep();
-          editor.modal.source.close();
-        }
-
-        if (!svgCanvas.setSvgString($('#svg_source_textarea').val())) {
-          $.confirm("There were parsing errors in your SVG source.\nRevert back to original SVG source?", function(ok) {
-            if(!ok) return false;
-            saveChanges();
-          });
-        } else {
-          saveChanges();
-        } 
-      })
-      el.querySelector("#tool_source_cancel").addEventListener("click", function(){
-        editor.modal.source.close();
-      });
-    }
-  }),
-  configure: new MD.Modal({
-    html: `
-      <h1>Configuration</h1>
-      <div id="configuration">
-        <button class="warning">Erase all data</button>
-        </div>
-      </div>`,
-    js: function(el){
-      const input = el.querySelector("#configuration button.warning");
-      input.addEventListener("click", function(){
-        state.clean();
-      })
-    }
-  }),
-  donate: new MD.Modal({
-    html: `
-      <h1>Donate</h1>
-      <p>
-        Method Draw relies on your generous donations for continued development.
-        <a href="https://method.ac/donate/">Donate now</a> if you find this application useful.
-      </p>`
-  }),
-  shortcuts: new MD.Modal({
-    html: `
-      <h1>Shortcuts</h1>
-      <div id="shortcuts"></div>`,
-    js: function(el){
-      el.children[0].classList.add("modal-item-wide");
-    }
-  })
-};
-
 editor.keyboard = new MD.Keyboard();
 editor.menu = new MD.Menu();
 editor.toolbar = new MD.Toolbar();
@@ -102,6 +16,8 @@ editor.pan = new MD.Pan();
 
 editor.import = new MD.Import();
 editor.contextMenu = new MD.ContextMenu();
+editor.darkmode = new MD.Darkmode();
+editor.title = new MD.Title();
 
 // bind the selected event to our function that handles updates to the UI
 svgCanvas.bind("selected", editor.selectedChanged);
@@ -116,7 +32,33 @@ const shapeLib = svgCanvas.addExtension.apply(this, ["shapes", MD.Shapelib]);
 const eyedropper = svgCanvas.addExtension.apply(this, ["eyedropper", MD.Eyedropper]);
 state.set("canvasId", t("Untitled"));
 state.set("canvasMode", state.get("canvasMode"));
-svgCanvas.setSvgString(state.get("canvasContent"));
-editor.paintBox.fill.setPaint(state.get("canvasFill"));
-editor.paintBox.stroke.setPaint(state.get("canvasStroke"));
-editor.paintBox.canvas.setPaint(state.get("canvasBackground"));
\ No newline at end of file
+
+// load from param
+if (!window.location.search.includes("?load=")) {
+  svgCanvas.setSvgString(state.get("canvasContent"));
+}
+else {
+  
+  const error = function(err) {
+      console.log(err);
+      svgCanvas.setSvgString(state.get("canvasContent"));
+  }
+
+  const url = utils.findGetParameter("load");
+  fetch(url)
+    .then(r => r.text())
+    .then(text => {
+      if (text.includes("Error response")) return error("Error response");
+      svgCanvas.setSvgString(text);
+    })
+    .catch(error);
+}
+
+state.set("canvasTitle", svgCanvas.getDocumentTitle());
+
+//editor.paintBox.fill.setPaint(state.get("canvasFill"));
+//editor.paintBox.stroke.setPaint(state.get("canvasStroke"));
+//editor.paintBox.canvas.setPaint(state.get("canvasBackground"));
+
+document.body.classList.remove("loading");
+document.getElementById("svgcanvas").removeAttribute("title");
\ No newline at end of file
diff --git a/src/js/state.js b/src/js/state.js
index 8e62269e..e4cfd82a 100644
--- a/src/js/state.js
+++ b/src/js/state.js
@@ -25,12 +25,14 @@ function State(){
   // canvas data
   this.canvasId = (id)      => {/* noop */}
   this.canvasMode = (mode)  => { editor.toolbar.setMode(mode) }
+  this.canvasTitle = (str)  => { editor.canvas.rename(str) }
   this.canvasSize = (size)  => { editor.canvas.resize(...size) }
   this.canvasContent = (svgString)  => { /* noop */ }
   this.canvasRulers = (bool)  => { /* noop */ }
   this.canvasFill = (paint)  => { /* noop */ }
   this.canvasStroke = (paint)  => { /* noop */ }
   this.canvasBackground = (paint)  => { /* noop */ }
+  this.darkmode = (isDark)  => { editor.darkmode.set(isDark) }
 
   this.clean = (warn = true) => {
     if (warn) {
@@ -48,7 +50,7 @@ function State(){
     // basic checks
     if (val === undefined || val === null) throw "wont save nuthin, " + key + " " + val;
     const isObject = dao.find(thing => thing.name === key).type === "object";
-    localStorage.setItem("write" + "-" + key, isObject ? JSON.stringify(val) : val.toString());
+    localStorage.setItem("md" + "-" + key, isObject ? JSON.stringify(val) : val.toString());
   }
 
   function _getKey(name) {
@@ -69,7 +71,7 @@ function State(){
   };
 
   function _getValue(key, def) {
-    const item = localStorage.getItem("write-" + key) || def;
+    const item = localStorage.getItem("md-" + key) || def;
     const archetype = dao.find(thing => thing.name === key.split("-")[0]);
     if (archetype) return archetype.clean(item);
     else throw "Unkown archetype";
diff --git a/src/js/svgcanvas.js b/src/js/svgcanvas.js
index 60e0315d..3513703c 100644
--- a/src/js/svgcanvas.js
+++ b/src/js/svgcanvas.js
@@ -49,7 +49,8 @@ var curConfig = {
   initFill: {color: 'fff', opacity: 1},
   initStroke: {width: 1, color: '000', opacity: 1},
   imgPath: 'images/',
-  baseUnit: 'px'
+  baseUnit: 'px',
+  defaultFont: "Noto Sans JP"
 };
 
 // Update config with new one if given
@@ -146,7 +147,7 @@ $.extend(all_properties.text, {
   fill: "#000000",
   stroke_width: 0,
   font_size: 24,
-  font_family: 'sans-serif'
+  font_family: curConfig.defaultFont
 });
 
 // Current shape style properties
@@ -569,15 +570,11 @@ getStrokedBBox = this.getStrokedBBox = function(elems) {
       var angle = svgedit.utilities.getRotationAngle(elem);
       if ((angle && angle % 90) ||
           svgedit.math.hasMatrixTransform(svgedit.transformlist.getTransformList(elem))) {
-        // Accurate way to get BBox of rotated element in Firefox:
-        // Put element in group and get its BBox
-        
-        var good_bb = false;
         
         // Get the BBox from the raw path for these elements
         var elemNames = ['ellipse','path','line','polyline','polygon'];
         if(elemNames.indexOf(elem.tagName) >= 0) {
-          bb = good_bb = canvas.convertToPath(elem, true);
+          bb = canvas.convertToPath(elem, true);
         } else if(elem.tagName == 'rect') {
           // Look for radius
           var rx = elem.getAttribute('rx');
@@ -586,51 +583,6 @@ getStrokedBBox = this.getStrokedBBox = function(elems) {
             bb = good_bb = canvas.convertToPath(elem, true);
           }
         }
-        
-        if(!good_bb) {
-          // Must use clone else FF freaks out
-          var clone = elem.cloneNode(true); 
-          var g = document.createElementNS(svgns, "g");
-          var parent = elem.parentNode;
-          parent.appendChild(g);
-          g.appendChild(clone);
-          bb = svgedit.utilities.bboxToObj(g.getBBox());
-          parent.removeChild(g);
-        }
-        
-
-        // Old method: Works by giving the rotated BBox,
-        // this is (unfortunately) what Opera and Safari do
-        // natively when getting the BBox of the parent group
-//            var angle = angle * Math.PI / 180.0;
-//            var rminx = Number.MAX_VALUE, rminy = Number.MAX_VALUE, 
-//              rmaxx = Number.MIN_VALUE, rmaxy = Number.MIN_VALUE;
-//            var cx = round(bb.x + bb.width/2),
-//              cy = round(bb.y + bb.height/2);
-//            var pts = [ [bb.x - cx, bb.y - cy], 
-//                  [bb.x + bb.width - cx, bb.y - cy],
-//                  [bb.x + bb.width - cx, bb.y + bb.height - cy],
-//                  [bb.x - cx, bb.y + bb.height - cy] ];
-//            var j = 4;
-//            while (j--) {
-//              var x = pts[j][0],
-//                y = pts[j][1],
-//                r = Math.sqrt( x*x + y*y );
-//              var theta = Math.atan2(y,x) + angle;
-//              x = round(r * Math.cos(theta) + cx);
-//              y = round(r * Math.sin(theta) + cy);
-//    
-//              // now set the bbox for the shape after it's been rotated
-//              if (x < rminx) rminx = x;
-//              if (y < rminy) rminy = y;
-//              if (x > rmaxx) rmaxx = x;
-//              if (y > rmaxy) rmaxy = y;
-//            }
-//            
-//            bb.x = rminx;
-//            bb.y = rminy;
-//            bb.width = rmaxx - rminx;
-//            bb.height = rmaxy - rminy;
       }
       return bb;
     } catch(e) { 
@@ -856,6 +808,7 @@ var getId, getNextId, call;
 // Parameters:
 // newDoc - The SVG DOM document
 this.prepareSvg = function(newDoc) {
+
   this.sanitizeSvg(newDoc.documentElement);
 
   // convert paths into absolute commands
@@ -865,6 +818,7 @@ this.prepareSvg = function(newDoc) {
     path.setAttribute('d', pathActions.convertPath(path));
     pathActions.fixEnd(path);
   }
+
 };
 
 // Function getRefElem
@@ -1017,7 +971,6 @@ var remapElement = this.remapElement = function(selected,changes,m) {
     }
   }
 
-
   var elName = selected.tagName;
   if(elName === "g" || elName === "text" || elName === "use") {
     // if it was a translate, then just update x,y
@@ -1286,8 +1239,18 @@ var updateClipPath = function(attr, tx, ty) {
 // Undo command object with the resulting change
 var recalculateDimensions = this.recalculateDimensions = function(selected) {
   if (selected == null) return null;
-  
   var tlist = getTransformList(selected);
+
+  // apply transformation to path and to text if is textpath
+  const textPath = selected.querySelector("textPath");
+  if (textPath) {
+    return false;
+    const href = textPath.getAttribute("href");
+    const id = href.replace("#", "");
+    const path = svgroot.getElementById(id);
+    //recalculateDimensions(selected, true);
+    if (path) selected = path;
+  }
   
   // remove any unnecessary transforms
   if (tlist && tlist.numberOfItems > 0) {
@@ -1313,7 +1276,7 @@ var recalculateDimensions = this.recalculateDimensions = function(selected) {
     // End here if all it has is a rotation
     if(tlist.numberOfItems === 1 && getRotationAngle(selected)) return null;
   }
-  
+
   // if this element had no transforms, we are done
   if (!tlist || tlist.numberOfItems == 0) {
     selected.removeAttribute("transform");
@@ -1353,6 +1316,7 @@ var recalculateDimensions = this.recalculateDimensions = function(selected) {
       tlist.removeItem(k-2);
       tlist.appendItem(mt);
     }
+    
   }
 
   // If it still has a single [M] or [R][M], return null too (prevents BatchCommand from being returned).
@@ -1399,6 +1363,7 @@ var recalculateDimensions = this.recalculateDimensions = function(selected) {
     case "use":
     case "text":
     case "tspan":
+    case "textPath":
       attrs = ["x", "y"];
       break;
     case "polygon":
@@ -1508,22 +1473,6 @@ var recalculateDimensions = this.recalculateDimensions = function(selected) {
           if (!childTlist) continue;
 
           var m = transformListToTransform(childTlist).matrix;
-
-          // Convert a matrix to a scale if applicable
-//          if(hasMatrixTransform(childTlist) && childTlist.numberOfItems == 1) {
-//            if(m.b==0 && m.c==0 && m.e==0 && m.f==0) {
-//              childTlist.removeItem(0);
-//              var translateOrigin = svgroot.createSVGTransform(),
-//                scale = svgroot.createSVGTransform(),
-//                translateBack = svgroot.createSVGTransform();
-//              translateOrigin.setTranslate(0, 0);
-//              scale.setScale(m.a, m.d);
-//              translateBack.setTranslate(0, 0);
-//              childTlist.appendItem(translateBack);
-//              childTlist.appendItem(scale);
-//              childTlist.appendItem(translateOrigin);
-//            }
-//          }
         
           var angle = getRotationAngle(child);
           var old_start_transform = start_transform;
@@ -2244,11 +2193,10 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
 
     root_sctm = svgcontent.querySelector("g").getScreenCTM().inverse();
 
-    var pt = transformPoint( evt.pageX, evt.pageY, root_sctm ),
-      mouse_x = pt.x * current_zoom,
-      mouse_y = pt.y * current_zoom;
+    var pt = transformPoint( evt.pageX, evt.pageY, root_sctm );
+    var mouse_x = pt.x * current_zoom;
+    var mouse_y = pt.y * current_zoom;
       
-
     evt.preventDefault();
 
     if(right_click) {
@@ -2263,7 +2211,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
     if(mouse_target.tagName === 'a' && mouse_target.childNodes.length === 1) {
       mouse_target = mouse_target.firstChild;
     }
-    
+
     // real_x/y ignores grid-snap value
     var real_x = r_start_x = start_x = x;
     var real_y = r_start_y = start_y = y;
@@ -2339,10 +2287,6 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
           }
           r_start_x *= current_zoom;
           r_start_y *= current_zoom;
-//          console.log('p',[evt.pageX, evt.pageY]);          
-//          console.log('c',[evt.clientX, evt.clientY]);  
-//          console.log('o',[evt.offsetX, evt.offsetY]);  
-//          console.log('s',[start_x, start_y]);
           
           assignAttributes(rubberBox, {
             'x': r_start_x,
@@ -2795,14 +2739,19 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
           ty = snapToGrid(ty);
         }
 
-        translateOrigin.setTranslate(-(left+tx),-(top+ty));
+        
+
+        else {
+          translateOrigin.setTranslate(-(left+tx),-(top+ty));
+        }
+
         if(evt.shiftKey) {
           if(sx == 1) sx = sy
           else sy = sx;
         }
         scale.setScale(sx,sy);
-        
         translateBack.setTranslate(left+tx,top+ty);
+
         if(hasMatrix) {
           var diff = angle?1:0;
           tlist.replaceItem(translateOrigin, 2+diff);
@@ -3104,7 +3053,7 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
       case "select":
         if (selectedElements[0] != null) {
           // if we only have one selected element
-          if (selectedElements.length == 1) {
+          if (selectedElements.length === 1) {
             // set our current stroke/fill properties to the element's
             var selected = selectedElements[0];
             switch ( selected.tagName ) {
@@ -3370,7 +3319,8 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
   };
   
   var dblClick = function(evt) {
-    var evt_target = evt.target;
+    var isNested = (evt.target.tagName === "tspan" || evt.target.tagName === "textPath");
+    var evt_target = isNested ? evt.target.closest("text") : evt.target;
     var parent = evt_target.parentNode;
     var mouse_target = getMouseTarget(evt);
     var tagName = mouse_target.tagName;
@@ -3378,8 +3328,14 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
     if(parent === current_group) return;
     
     if(tagName === 'text' && current_mode !== 'textedit') {
-      var pt = transformPoint( evt.pageX, evt.pageY, root_sctm );
-      textActions.select(mouse_target, pt.x, pt.y);
+      if (evt_target.querySelector("textPath")) {
+        $("#text").focus();
+        $("#text").select();
+      }
+      else {
+        var pt = transformPoint( evt.pageX, evt.pageY, root_sctm );
+        textActions.select(mouse_target, pt.x, pt.y);
+      }
     }
     
     if((tagName === "g" || tagName === "a") && getRotationAngle(mouse_target)) {
@@ -3402,6 +3358,11 @@ var getMouseTarget = this.getMouseTarget = function(evt) {
       canvas.setMode("pathedit");
       canvas.pathActions.toEditMode(evt_target);
     }
+
+    // Reset context
+    if(tagName === "ellipse" || tagName === "circle" || tagName === "line" || tagName === "rect") {
+      editor.convertToPath();
+    }
     
     if((parent.tagName !== 'g' && parent.tagName !== 'a') ||
       parent === getCurrentDrawing().getCurrentLayer() ||
@@ -3504,6 +3465,7 @@ var textActions = canvas.textActions = function() {
     
     var charbb;
     charbb = chardata[index];
+    if (!charbb) return;
     if(!empty) {
       textinput.setSelectionRange(index, index);
     }
@@ -3517,11 +3479,11 @@ var textActions = canvas.textActions = function() {
       });
       cursor = getElem("selectorParentGroup").appendChild(cursor);
     }
-    
+
     if(!blinker) {
       blinker = setInterval(function() {
         var show = (cursor.getAttribute('display') === 'none');
-        cursor.setAttribute('display', show?'inline':'none');
+        cursor.setAttribute('display', show ? 'inline': 'none');
       }, 600);
     }
     
@@ -3556,7 +3518,7 @@ var textActions = canvas.textActions = function() {
       selblock = document.createElementNS(svgns, "path");
       assignAttributes(selblock, {
         'id': "text_selectblock",
-        'fill': "green",
+        'fill': "blue",
         'opacity': .5,
         'style': "pointer-events:none"
       });
@@ -3857,42 +3819,42 @@ var pathActions = canvas.pathActions = function() {
     p.setAttribute("d", pathActions.convertPath(p));
   }
 
-  // TODO: Move into path.js
-    svgedit.path.Path.prototype.endChanges = function(text) {
-      if(svgedit.browser.isWebkit()) resetD(this.elem);
-      var cmd = new ChangeElementCommand(this.elem, {d: this.last_d}, text);
-      addCommandToHistory(cmd);
-      call("changed", [this.elem]);
-    }
+// TODO: Move into path.js
+  svgedit.path.Path.prototype.endChanges = function(text) {
+    if(svgedit.browser.isWebkit()) resetD(this.elem);
+    var cmd = new ChangeElementCommand(this.elem, {d: this.last_d}, text);
+    addCommandToHistory(cmd);
+    call("changed", [this.elem]);
+  }
 
-    svgedit.path.Path.prototype.addPtsToSelection = function(indexes) {
-      if(!$.isArray(indexes)) indexes = [indexes];
-      for(var i=0; i< indexes.length; i++) {
-        var index = indexes[i];
-        var seg = this.segs[index];
-        if(seg.ptgrip) {
-          if(this.selected_pts.indexOf(index) == -1 && index >= 0) {
-            this.selected_pts.push(index);
-          }
+  svgedit.path.Path.prototype.addPtsToSelection = function(indexes) {
+    if(!$.isArray(indexes)) indexes = [indexes];
+    for(var i=0; i< indexes.length; i++) {
+      var index = indexes[i];
+      var seg = this.segs[index];
+      if(seg.ptgrip) {
+        if(this.selected_pts.indexOf(index) == -1 && index >= 0) {
+          this.selected_pts.push(index);
         }
-      };
-      this.selected_pts.sort();
-      var i = this.selected_pts.length,
-        grips = new Array(i);
-      // Loop through points to be selected and highlight each
-      while(i--) {
-        var pt = this.selected_pts[i];
-        var seg = this.segs[pt];
-        seg.select(true);
-        grips[i] = seg.ptgrip;
       }
-      // TODO: Correct this:
-      pathActions.canDeleteNodes = true;
-      
-      pathActions.closed_subpath = this.subpathIsClosed(this.selected_pts[0]);
-      
-      call("selected", grips);
+    };
+    this.selected_pts.sort();
+    var i = this.selected_pts.length,
+      grips = new Array(i);
+    // Loop through points to be selected and highlight each
+    while(i--) {
+      var pt = this.selected_pts[i];
+      var seg = this.segs[pt];
+      seg.select(true);
+      grips[i] = seg.ptgrip;
     }
+    // TODO: Correct this:
+    pathActions.canDeleteNodes = true;
+    
+    pathActions.closed_subpath = this.subpathIsClosed(this.selected_pts[0]);
+    
+    call("selected", grips);
+  }
 
   var current_path = null,
     drawn_path = null,
@@ -3973,6 +3935,8 @@ var pathActions = canvas.pathActions = function() {
   return {
     mouseDown: function(evt, mouse_target, start_x, start_y) {
       if(current_mode === "path") {
+
+        // deselect when start draw
         mouse_x = start_x;
         mouse_y = start_y;
         
@@ -4080,13 +4044,15 @@ var pathActions = canvas.pathActions = function() {
               var endseg = drawn_path.createSVGPathSegClosePath();
               seglist.appendItem(newseg);
               seglist.appendItem(endseg);
-              selectorManager.requestSelector(newpath).showGrips(true)
+              selectOnly([newpath], true);
             } else if(len < 3) {
               keep = false;
+
               return keep;
             }
 
             stretchy.parentNode.removeChild(stretchy);
+            state.set("canvasMode", "select");
             
             // this will signal to commit the path
             element = newpath;
@@ -4173,8 +4139,11 @@ var pathActions = canvas.pathActions = function() {
             if(subpath) index += svgedit.path.path.segs.length;
             svgedit.path.addPointGrip(index, x, y);
           }
-            keep = true;
+          keep = true;
         }
+
+        if (!keep || !newpath) clearSelection();
+
         return;
       }
       
@@ -4184,7 +4153,7 @@ var pathActions = canvas.pathActions = function() {
       svgedit.path.path.storeD();
       
       var id = evt.target.id;
-      if (id.substr(0,14) == "pathpointgrip_") {
+      if (id.includes("pathpointgrip_")) {
         // Select this point
         var cur_pt = svgedit.path.path.cur_pt = parseInt(id.substr(14));
         svgedit.path.path.dragging = [start_x, start_y];
@@ -4202,7 +4171,7 @@ var pathActions = canvas.pathActions = function() {
         } else {
           svgedit.path.path.addPtsToSelection(cur_pt);
         }
-      } else if(id.indexOf("ctrlpointgrip_") == 0) {
+      } else if(id.includes("ctrlpointgrip_")) {
         svgedit.path.path.dragging = [start_x, start_y];
         
         var parts = id.split('_')[1].split('c');
@@ -4568,6 +4537,15 @@ var pathActions = canvas.pathActions = function() {
       addToSelection([elem], true);
       call("changed", selectedElements);
     },
+
+    reverse: function() {
+
+      var elem = selectedElements[0];
+      if(!elem || !elem.getAttribute("d")) return;
+
+      const d = elem.getAttribute("d");
+      var reversed = reverse(path);
+    },
     
     clear: function(remove) {
       current_path = null;
@@ -4590,22 +4568,9 @@ var pathActions = canvas.pathActions = function() {
       tlist.clear();
       path.removeAttribute("transform");
       var segList = path.pathSegList;
-      
-      // Opera/win/non-EN throws an error here.
-      // TODO: Find out why!
-      // Presumed fixed in Opera 10.5, so commented out for now
-      
-//      try {
-        var len = segList.numberOfItems;
-//      } catch(err) {
-//        var fixed_d = pathActions.convertPath(path);
-//        path.setAttribute('d', fixed_d);
-//        segList = path.pathSegList;
-//        var len = segList.numberOfItems;
-//      }
+      var len = segList.numberOfItems;
       var last_x, last_y;
 
-
       for (var i = 0; i < len; ++i) {
         var seg = segList.getItem(i);
         var type = seg.pathSegType;
@@ -4623,7 +4588,6 @@ var pathActions = canvas.pathActions = function() {
       
       reorientGrads(path, m);
 
-
     },
     zoomChange: function() {
       if(current_mode == "pathedit") {
@@ -4665,113 +4629,114 @@ var pathActions = canvas.pathActions = function() {
       return svgedit.path.path;
     },
     opencloseSubPath: function() {
-      var sel_pts = svgedit.path.path.selected_pts;
-      // Only allow one selected node for now
-      if(sel_pts.length !== 1) return;
       
-      var elem = svgedit.path.path.elem;
-      var list = elem.pathSegList;
+      const isNullish = (val) => {
+        return val === null || val === undefined;
+      };
 
-      var len = list.numberOfItems;
+      const path = svgedit.path.path;
+      const selPts = path.selected_pts;
+      // Only allow one selected node for now
+      if (selPts.length !== 1) { return; }
 
-      var index = sel_pts[0];
-      
-      var open_pt = null;
-      var start_item = null;
+      const { elem } = path;
+      const list = elem.pathSegList;
+
+      // const len = list.numberOfItems;
+
+      const index = selPts[0];
+
+      let openPt = null;
+      let startItem = null;
 
       // Check if subpath is already open
-      svgedit.path.path.eachSeg(function(i) {
-        if(this.type === 2 && i <= index) {
-          start_item = this.item;
+      path.eachSeg(function (i) {
+        if (this.type === 2 && i <= index) {
+          startItem = this.item;
         }
-        if(i <= index) return true;
-        if(this.type === 2) {
+        if (i <= index) { return true; }
+        if (this.type === 2) {
           // Found M first, so open
-          open_pt = i;
+          openPt = i;
           return false;
-        } else if(this.type === 1) {
+        }
+        if (this.type === 1) {
           // Found Z first, so closed
-          open_pt = false;
+          openPt = false;
           return false;
         }
+        return true;
       });
-      
-      if(open_pt == null) {
+
+      if (isNullish(openPt)) {
         // Single path, so close last seg
-        open_pt = svgedit.path.path.segs.length - 1;
+        openPt = path.segs.length - 1;
       }
 
-      if(open_pt !== false) {
+      if (openPt !== false) {
         // Close this path
-        
+
         // Create a line going to the previous "M"
-        var newseg = elem.createSVGPathSegLinetoAbs(start_item.x, start_item.y);
-      
-        var closer = elem.createSVGPathSegClosePath();
-        if(open_pt == svgedit.path.path.segs.length) {
+        const newseg = elem.createSVGPathSegLinetoAbs(startItem.x, startItem.y);
+
+        const closer = elem.createSVGPathSegClosePath();
+        if (openPt === path.segs.length - 1) {
           list.appendItem(newseg);
           list.appendItem(closer);
         } else {
-          svgedit.path.insertItemBefore(elem, closer, open_pt);
-          svgedit.path.insertItemBefore(elem, newseg, open_pt);
+          list.insertItemBefore(closer, openPt);
+          list.insertItemBefore(newseg, openPt);
         }
-        
-        svgedit.path.path.init().selectPt(open_pt+1);
+
+        path.init().selectPt(openPt + 1);
         return;
       }
-      
-      
 
       // M 1,1 L 2,2 L 3,3 L 1,1 z // open at 2,2
       // M 2,2 L 3,3 L 1,1
-      
-      // M 1,1 L 2,2 L 1,1 z M 4,4 L 5,5 L6,6 L 5,5 z 
-      // M 1,1 L 2,2 L 1,1 z [M 4,4] L 5,5 L(M)6,6 L 5,5 z 
-      
-      var seg = svgedit.path.path.segs[index];
-      
-      if(seg.mate) {
+
+      // M 1,1 L 2,2 L 1,1 z M 4,4 L 5,5 L6,6 L 5,5 z
+      // M 1,1 L 2,2 L 1,1 z [M 4,4] L 5,5 L(M)6,6 L 5,5 z
+
+      const seg = path.segs[index];
+
+      if (seg.mate) {
         list.removeItem(index); // Removes last "L"
         list.removeItem(index); // Removes the "Z"
-        svgedit.path.path.init().selectPt(index - 1);
+        path.init().selectPt(index - 1);
         return;
       }
-      
-      var last_m, z_seg;
-      
-      // Find this sub-path's closing point and remove
-      for(var i=0; i<list.numberOfItems; i++) {
-        var item = list.getItem(i);
 
-        if(item.pathSegType === 2) {
+      let lastM; let zSeg;
+
+      // Find this sub-path's closing point and remove
+      for (let i = 0; i < list.numberOfItems; i++) {
+        const item = list.getItem(i);
+        if (item.pathSegType === 2) {
           // Find the preceding M
-          last_m = i;
-        } else if(i === index) {
+          lastM = i;
+        } else if (i === index) {
           // Remove it
-          list.removeItem(last_m);
-//            index--;
-        } else if(item.pathSegType === 1 && index < i) {
+          list.removeItem(lastM);
+          // index--;
+        } else if (item.pathSegType === 1 && index < i) {
           // Remove the closing seg of this subpath
-          z_seg = i-1;
+          zSeg = i - 1;
           list.removeItem(i);
           break;
         }
       }
-      
-      var num = (index - last_m) - 1;
-      
-      while(num--) {
-        svgedit.path.insertItemBefore(elem, list.getItem(last_m), z_seg);
-      }
-      
-      var pt = list.getItem(last_m);
+
+      //let num = (index - lastM) - 1;
+      //while (num--) {
+      //  list.insertItemBefore(list.getItem(lastM), zSeg);
+      //}
+
+      const pt = list.getItem(lastM);
       
       // Make this point the new "M"
-      svgedit.path.replacePathSeg(2, last_m, [pt.x, pt.y]);
-      
-      var i = index
-      
-      svgedit.path.path.init().selectPt(0);
+      svgedit.path.replacePathSeg(2, lastM, [ pt.x, pt.y ]);
+      path.init().selectPt(0);
     },
     deletePathNode: function() {
       if(!pathActions.canDeleteNodes) return;
@@ -5165,6 +5130,8 @@ this.svgCanvasToString = function() {
     });
   }
   
+
+  
   return output;
 };
 
@@ -5203,7 +5170,7 @@ this.svgToString = function(elem, indent) {
       }
       
       out.push(' width="' + res.w + '" height="' + res.h + '"' + vb + ' xmlns="'+svgns+'"');
-      
+
       var nsuris = {};
       
       // Check elements for namespaces, add if found
@@ -5384,9 +5351,14 @@ this.save = function() {
   
   // no need for doctype, see http://jwatt.org/svg/authoring/#doctype-declaration
   var str = this.svgCanvasToString();
+  var illutratorCompat = true;
+  if (illutratorCompat && str.includes(" href=")) str = str.replace(" href=", " xlink:href=");
   var blob = new Blob([ str ], {type: "image/svg+xml;charset=utf-8"});
   var dropAutoBOM = true;
-  saveAs(blob, "method-draw-image.svg", dropAutoBOM);
+  var title = state.get("canvasTitle");
+  var filename = title.replace(/[^a-z0-9]/gi, '_').toLowerCase();
+  var extension = "svg";
+  saveAs(blob, `${filename}.${extension}`, dropAutoBOM);
 };
 
 // Function: rasterExport
@@ -5534,7 +5506,6 @@ var uniquifyElems = this.uniquifyElems = function(g) {
       }
       // remap all href attributes
       var hreffers = ids[oldid]["hrefs"];
-      console.log(hreffers)
       var k = hreffers.length;
       while (k--) {
         var hreffer = hreffers[k];
@@ -5763,11 +5734,21 @@ var convertToGroup = this.convertToGroup = function(elem) {
   }
 }
 
-this.styleToAttributes = function(doc) {
+this.styleToAttr = function(doc) {
   const docEl = doc.documentElement;
-
+  const styles = docEl.querySelectorAll("style");
+  var parser = new cssjs();
+  styles.forEach(style =>{
+    var parsed = parser.parseCSS(style.textContent);
+    parsed.forEach(ruleset => {
+      const els = docEl.querySelectorAll(ruleset.selector);
+      els.forEach(el => {
+        ruleset.rules.forEach(rule => el.setAttribute(rule.directive, rule.value));
+      })
+    })
+  });
+  styles.forEach(style => {style.parentNode.removeChild(style)});
   return doc;
-
 }
 
 //   
@@ -5783,26 +5764,18 @@ this.setSvgString = function(xmlString) {
   try {
     // convert string into XML document
     var newDoc = svgedit.utilities.text2xml(xmlString);
-    this.prepareSvg(newDoc);
-
     var batchCmd = new BatchCommand("Change Source");
 
-    newDoc = this.styleToAttributes(newDoc);
+    this.prepareSvg(newDoc);
+    newDoc = this.styleToAttr(newDoc);
     
-
     // remove old svg document
     var nextSibling = svgcontent.nextSibling;
     var oldzoom = svgroot.removeChild(svgcontent);
     batchCmd.addSubCommand(new RemoveElementCommand(oldzoom, nextSibling, svgroot));
   
-    // set new svg document
-    // If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode()
-    if(svgdoc.adoptNode) {
-      svgcontent = svgdoc.adoptNode(newDoc.documentElement);
-    }
-    else {
-      svgcontent = svgdoc.importNode(newDoc.documentElement, true);
-    }
+
+    svgcontent = svgdoc.adoptNode(newDoc.documentElement);
     
     svgroot.appendChild(svgcontent);
     var content = $(svgcontent);
@@ -5856,6 +5829,34 @@ this.setSvgString = function(xmlString) {
     // Put all paint elems in defs
     
     content.find('linearGradient, radialGradient, pattern').appendTo(findDefs());
+
+    svgcontent.querySelectorAll('textPath').forEach(function(el){
+      const href = svgCanvas.getHref(el);
+      if (!href) return;
+      const path = svgcontent.querySelector(href);
+      const offset = el.getAttribute("startOffset");
+      // convert percentage based to absolute
+      if (offset.includes("%") && path) {
+        const totalLength = path.getTotalLength();
+        const pct = parseFloat(offset) * .01;
+        el.setAttribute("startOffset", (pct * totalLength).toFixed(0))
+      }
+      const tspan = el.querySelector("tspan");
+      const text = el.closest("text");
+      text.setAttributeNS(xmlns, "xml:space", "default");
+      if (tspan && text) {
+
+        // grab the first tspan and apply it to the text element
+        svgedit.sanitize.svgWhiteList()["text"].forEach(attr => {
+          const value = tspan.getAttribute(attr);
+          if (value && attr !== "id" && !attr.includes(":")) {
+            tspan.removeAttribute(attr);
+            text.setAttribute(attr, value);
+          }
+        });
+        tspan.setAttributeNS(xmlns, "xml:space", "preserve");
+      }
+    })
     
     // Set ref element for <use> elements
     
@@ -5926,7 +5927,7 @@ this.setSvgString = function(xmlString) {
     var background = $("#canvas_background")
     if (background.length) {
       var opacity = background.attr("fill-opacity")
-      opacity = opacity ? parseInt(opacity)*100 : 100
+      opacity = opacity ? parseInt(opacity, 10)*100 : 100
       fill = this.getPaint(background.attr("fill"), opacity, "canvas")
       editor.paintBox.canvas.setPaint(fill)
     }
@@ -6006,108 +6007,91 @@ this.getPaint = function(color, opac, type) {
 // was obtained
 // * import should happen in top-left of current zoomed viewport  
 this.importSvgString = function(xmlString) {
-
   try {
-    // Get unique ID
-    var uid = svgedit.utilities.encode64(xmlString.length + xmlString).substr(0,32);
-    
-    var useExisting = false;
-
-    // Look for symbol and make sure symbol exists in image
-    if(import_ids[uid]) {
-      if( $(import_ids[uid].symbol).parents('#svgroot').length ) {
-        useExisting = true;
-      }
-    }
-    
     var batchCmd = new BatchCommand("Import SVG");
-  
-    if(useExisting) {
-      var symbol = import_ids[uid].symbol;
-      var ts = import_ids[uid].xform;
-    } else {
-      // convert string into XML document
-      var newDoc = svgedit.utilities.text2xml(xmlString);
-  
-      this.prepareSvg(newDoc);
-  
-      // import new svg document into our document
-      var svg;
-      // If DOM3 adoptNode() available, use it. Otherwise fall back to DOM2 importNode()
-      if(svgdoc.adoptNode) {
-        svg = svgdoc.adoptNode(newDoc.documentElement);
-      }
-      else {
-        svg = svgdoc.importNode(newDoc.documentElement, true);
-      }
-      
-      uniquifyElems(svg);
-      
-      var innerw = convertToNum('width', svg.getAttribute("width")),
-        innerh = convertToNum('height', svg.getAttribute("height")),
-        innervb = svg.getAttribute("viewBox"),
-        // if no explicit viewbox, create one out of the width and height
-        vb = innervb ? innervb.split(" ") : [0,0,innerw,innerh];
-      for (var j = 0; j < 4; ++j)
-        vb[j] = +(vb[j]);
-  
-      // TODO: properly handle preserveAspectRatio
-      var canvasw = +svgcontent.getAttribute("width"),
-        canvash = +svgcontent.getAttribute("height");
-      // imported content should be 1/3 of the canvas on its largest dimension
+    // convert string into XML document
+    var newDoc = svgedit.utilities.text2xml(xmlString);
 
-      
-      // Hack to make recalculateDimensions understand how to scale
-      var ts = "translate(0)";
-      
-      var symbol = svgdoc.createElementNS(svgns, "symbol");
-      var defs = findDefs();
-      
-      if(svgedit.browser.isGecko()) {
-        // Move all gradients into root for Firefox, workaround for this bug:
-        // https://bugzilla.mozilla.org/show_bug.cgi?id=353575
-        // TODO: Make this properly undo-able.
-        $(svg).find('linearGradient, radialGradient, pattern').appendTo(defs);
-      }
-  
-      while (svg.firstChild) {
-        var first = svg.firstChild;
-        symbol.appendChild(first);
-      }
-      var attrs = svg.attributes;
-      for(var i=0; i < attrs.length; i++) {
-        var attr = attrs[i];
-        symbol.setAttribute(attr.nodeName, attr.nodeValue);
-      }
-      symbol.id = getNextId();
-      
-      // Store data
-      import_ids[uid] = {
-        symbol: symbol,
-        xform: ts
+    this.prepareSvg(newDoc);
+
+    newDoc = this.styleToAttr(newDoc);
+
+    // import new svg document into our document
+    var svg = svgdoc.adoptNode(newDoc.documentElement);
+
+    uniquifyElems(svg);
+
+    // Put all paint elems in defs
+    
+    $(svg).find('linearGradient, radialGradient, pattern').appendTo(findDefs());
+
+    svg.querySelectorAll('textPath').forEach(function(el){
+      const href = svgCanvas.getHref(el);
+      if (!href) return;
+      const path = svgcontent.querySelector(href);
+      $(path).appendTo(findDefs());
+      const offset = el.getAttribute("startOffset");
+      // convert percentage based to absolute
+      if (offset.includes("%") && path) {
+        const totalLength = path.getTotalLength();
+        const pct = parseFloat(offset) * .01;
+        el.setAttribute("startOffset", (pct * totalLength).toFixed(0))
+      }
+      const tspan = el.querySelector("tspan");
+      const text = el.closest("text");
+      text.setAttributeNS(xmlns, "xml:space", "default");
+      if (tspan && text) {
+
+        // grab the first tspan and apply it to the text element
+        svgedit.sanitize.svgWhiteList()["text"].forEach(attr => {
+          const value = tspan.getAttribute(attr);
+          if (value && attr !== "id" && !attr.includes(":")) {
+            tspan.removeAttribute(attr);
+            text.setAttribute(attr, value);
+          }
+        });
+        tspan.setAttributeNS(xmlns, "xml:space", "preserve");
       }
-      
-      findDefs().appendChild(symbol);
-      batchCmd.addSubCommand(new InsertElementCommand(symbol));
-    }
+    })
     
+    // Set ref element for <use> elements
     
-    var use_el = svgdoc.createElementNS(svgns, "use");
-    use_el.id = getNextId();
-    setHref(use_el, "#" + symbol.id);
+    // TODO: This should also be done if the object is re-added through "redo"
+    setUseData(svg);
     
-    (current_group || getCurrentDrawing().getCurrentLayer()).appendChild(use_el);
-    batchCmd.addSubCommand(new InsertElementCommand(use_el));
-    clearSelection();
+    convertGradients(svg);
+
+
+    // recalculate dimensions on the top-level children so that unnecessary transforms
+    // are removed
+    svgedit.utilities.walkTreePost(svgcontent, function(n){try{recalculateDimensions(n)}catch(e){console.log(e)}});
     
-    use_el.setAttribute("transform", ts);
-    recalculateDimensions(use_el);
-    $(use_el).data('symbol', symbol).data('ref', symbol);
-    addToSelection([use_el]);
     
-    // TODO: Find way to add this in a recalculateDimensions-parsable way
-//        if (vb[0] != 0 || vb[1] != 0)
-//          ts = "translate(" + (-vb[0]) + "," + (-vb[1]) + ") " + ts;
+    var innerw = convertToNum('width', svg.getAttribute("width")),
+      innerh = convertToNum('height', svg.getAttribute("height")),
+      innervb = svg.getAttribute("viewBox"),
+      // if no explicit viewbox, create one out of the width and height
+      vb = innervb ? innervb.split(" ") : [0,0,innerw,innerh];
+    for (var j = 0; j < 4; ++j)
+      vb[j] = +(vb[j]);
+
+    // TODO: properly handle preserveAspectRatio
+    var canvasw = +svgcontent.getAttribute("width"),
+      canvash = +svgcontent.getAttribute("height");
+
+    // Hack to make recalculateDimensions understand how to scale
+    
+    const layer = (current_group || getCurrentDrawing().getCurrentLayer());
+    const g = svgdoc.createElementNS(svgns, "g");
+    while (svg.firstChild) {
+      g.appendChild(svg.firstChild);
+    }
+    layer.appendChild(g);
+    batchCmd.addSubCommand(new InsertElementCommand(g));
+
+    
+    clearSelection();
+    addToSelection([g]);
     addCommandToHistory(batchCmd);
     call("changed", [svgcontent]);
 
@@ -6900,11 +6884,13 @@ var findDefs = function() {
 // Parameters
 // type - String indicating "fill" or "stroke" to apply to an element
 var setGradient = this.setGradient = function(type) {
+  
   if(!cur_properties[type + '_paint'] || cur_properties[type + '_paint'].type == "solidColor") return;
   var grad = canvas[type + 'Grad'];
   // find out if there is a duplicate gradient already in the defs
   var duplicate_grad = findDuplicateGradient(grad);
   var defs = findDefs();
+
   // no duplicate found, so import gradient into defs
   if (!duplicate_grad) {
     var orig_grad = grad;
@@ -7169,6 +7155,7 @@ this.setStrokeAttr = function(attr, val) {
   }
 };
 
+
 // Function: getStyle
 // Returns current style options
 this.getStyle = function() {
@@ -7177,7 +7164,11 @@ this.getStyle = function() {
 
 // Function: getOpacity
 // Returns the current opacity
-this.getOpacity = function() {
+this.getOpacity = function(elem) {
+  if (elem) {
+    const opacity = elem.getAttribute("opacity");
+    return opacity === null ? 1 : parseFloat(opacity);
+  }
   return cur_shape.opacity;
 };
 
@@ -7222,15 +7213,13 @@ this.setPaintOpacity = function(type, val, preventUndo) {
 // elem - The element to check the blur value for
 this.getBlur = function(elem) {
   var val = 0;
-//    var elem = selectedElements[0];
-  
+
   if(elem) {
     var filter_url = elem.getAttribute('filter');
     if(filter_url) {
-      var blur = getElem(elem.id + '_blur');
-      if(blur) {
-        val = blur.firstChild.getAttribute('stdDeviation');
-      }
+      const selector = filter_url.split("url(#")[1].slice(0, -1);
+      var blur = getElem(selector);
+      if (blur) val = blur.firstChild.getAttribute('stdDeviation');
     }
   }
   return val;
@@ -7498,11 +7487,14 @@ this.getText = function() {
 // Parameters:
 // val - String with the new text
 this.setTextContent = function(val) {
-  changeSelectedAttribute("#text", val);
+  const selected = selectedElements[0];
+  const textPath = selected.querySelector("textPath");
+  changeSelectedAttribute("#text", val, textPath ? [textPath] : null);
   textActions.init(val);
   textActions.setCursor();
 };
 
+
 // Function: setImageURL
 // Sets the new image URL for the selected image element. Updates its size if
 // a new URL is given
@@ -7736,15 +7728,24 @@ this.convertToPath = function(elem, getBBox) {
     if(elem.tagName == 'circle') {
       rx = ry = $(elem).attr('r');
     }
-  
+
     joinSegs([
-      ['M',[(cx-rx),(cy)]],
+      ['M',[(cx),(cy+ry)]], //
+      ['C',[(cx-rx/num),(cy+ry), (cx-rx),(cy+ry/num), (cx-rx),(cy)]],
       ['C',[(cx-rx),(cy-ry/num), (cx-rx/num),(cy-ry), (cx),(cy-ry)]],
       ['C',[(cx+rx/num),(cy-ry), (cx+rx),(cy-ry/num), (cx+rx),(cy)]],
       ['C',[(cx+rx),(cy+ry/num), (cx+rx/num),(cy+ry), (cx),(cy+ry)]],
-      ['C',[(cx-rx/num),(cy+ry), (cx-rx),(cy+ry/num), (cx-rx),(cy)]],
       ['Z',[]]
     ]);
+  
+    //joinSegs([
+    //  ['M',[(cx-rx),(cy)]], //
+    //  ['C',[(cx-rx),(cy-ry/num), (cx-rx/num),(cy-ry), (cx),(cy-ry)]],
+    //  ['C',[(cx+rx/num),(cy-ry), (cx+rx),(cy-ry/num), (cx+rx),(cy)]],
+    //  ['C',[(cx+rx),(cy+ry/num), (cx+rx/num),(cy+ry), (cx),(cy+ry)]],
+    //  ['C',[(cx-rx/num),(cy+ry), (cx-rx),(cy+ry/num), (cx-rx),(cy)]],
+    //  ['Z',[]]
+    //]);
     break;
   case 'path':
     d = elem.getAttribute('d');
@@ -7850,6 +7851,19 @@ var changeSelectedAttributeNoUndo = this.changeSelectedAttributeNoUndo = functio
       pathActions.moveNode(attr, newValue);
     }
     var elems = elems || selectedElements;
+
+    // get the path instead of text if is textPath
+    //elems = elems.map((elem) => {
+    //  if (elem.tagName === 'text') {
+    //    const path = svgCanvas.getTextPath(elem);
+    //    console.log(path)
+    //    if (path) elem = path;
+    //  }
+    //  return elem;
+    //});
+
+
+
     var i = elems.length;
     var no_xy_elems = ['g', 'polyline', 'path'];
     var good_g_attrs = ['transform', 'opacity', 'filter'];
@@ -7873,7 +7887,7 @@ var changeSelectedAttributeNoUndo = this.changeSelectedAttributeNoUndo = functio
       var oldval = attr === "#text" ? elem.textContent : elem.getAttribute(attr);
       if (oldval == null)  oldval = "";
       if (oldval !== String(newValue)) {
-        if (attr == "#text") {
+        if (attr === "#text") {
           var old_w = svgedit.utilities.getBBox(elem).width;
           elem.textContent = newValue;
 
diff --git a/src/js/svgutils.js b/src/js/svgutils.js
index 540bb97a..d3233629 100644
--- a/src/js/svgutils.js
+++ b/src/js/svgutils.js
@@ -482,9 +482,11 @@ function groupBBFix(selected) {
 // elem - Optional DOM element to get the BBox for
 svgedit.utilities.getBBox = function(elem) {
   var selected = elem || editorContext_.getSelectedElements()[0];
+  if (selected.nodeName === "textPath") selected = elem.parentNode;
   if (elem.nodeType != 1) return null;
   var ret = null;
   var elname = selected.nodeName;
+
   
   switch ( elname ) {
   case 'text':
diff --git a/src/js/utils.js b/src/js/utils.js
index 1cb07784..b6ebd342 100644
--- a/src/js/utils.js
+++ b/src/js/utils.js
@@ -10,3 +10,425 @@ utils.findGetParameter = function(parameterName) {
     }
     return result;
 }
+
+utils.throttle = function (callback, limit) {
+var waiting = false;                
+return function () {                
+  if (!waiting) {                   
+    callback.apply(this, arguments);
+    waiting = true;                 
+    setTimeout(function () {        
+      waiting = false;              
+    }, limit);
+  }
+}
+}
+/**
+ * https://github.com/Pomax/svg-path-reverse
+ *
+ * This code is in the public domain, except in jurisdictions that do
+ * not recognise the public domain, where this code is MIT licensed.
+ */
+(function (root, factory) {
+    if (typeof define === "function" && define.amd) {
+        define(factory);
+    } else if (typeof exports === "object") {
+        module.exports = factory();
+    } else {
+        utils.SVGPathEditor = factory();
+    }
+}(this, function () {
+
+  /**
+   * Normalise an SVG path to absolute coordinates
+   * and full commands, rather than relative coordinates
+   * and/or shortcut commands.
+   */
+  function normalizePath(d) {
+    // preprocess "d" so that we have spaces between values
+    d = d.replace(/,/g,' ')
+         .replace(/([^eE])-/g,'$1 -')
+         .replace(/\s*([achlmqstvzACHLMQSTVZ])\s*/g," $1 ")
+         .replace(/\s+/g, ' ');
+
+    // set up the variables used in this function
+    var instructions = d.replace(/([achlmqstvzACHLMQSTVZ])\s?/g,"|$1").split("|"),
+        instructionLength = instructions.length,
+        i,
+        instruction,
+        op,
+        lop,
+        args = [],
+        oargs = [],
+        alen,
+        a,
+        sx = 0,
+        sy = 0,
+        x = 0,
+        y = 0,
+        cx = 0,
+        cy = 0,
+        cx2 = 0,
+        cy2 = 0,
+        rx = 0,
+        ry = 0,
+        xrot = 0,
+        lflag = 0,
+        sweep = 0,
+        normalized = "";
+
+    // we run through the instruction list starting at 1, not 0,
+    // because we split up "|M x y ...." so the first element will
+    // always be an empty string. By design.
+    for (i = 1; i < instructionLength; i++) {
+
+      // which instruction is this?
+      instruction = instructions[i];
+      op = instruction.substring(0,1);
+      lop = op.toLowerCase();
+
+      // what are the arguments? note that we need to convert
+      // all strings into numbers, or + will do silly things.
+      args = instruction.replace(op,'').trim().split(' ').filter(function(v) { return v !== ''; });
+      oargs = args;
+      args = args.map(parseFloat);
+      alen = args.length;
+
+      // we could use a switch, but elaborate code in a "case" with
+      // fallthrough is just horrid to read. So let's use ifthen
+      // statements instead.
+
+      // moveto command (plus possible lineto)
+      if(lop === "m") {
+        normalized += "M ";
+        if (op === "m") {
+          x += args[0];
+          y += args[1];
+        } else {
+          x = args[0];
+          y = args[1];
+        }
+        // records start position, for dealing
+        // with the shape close operator ('Z')
+        sx = x;
+        sy = y;
+        normalized += x + " " + y + " ";
+        if (alen > 2) {
+          for (a = 0; a < alen; a += 2) {
+            if (op === "m") {
+              x += args[a];
+              y += args[a+1];
+            } else {
+              x = args[a];
+              y = args[a+1];
+            }
+            normalized += "L " + x + " " + y + " ";
+          }
+        }
+      }
+
+      // lineto commands
+      else if(lop === "l") {
+        for (a = 0; a < alen; a += 2) {
+          if (op === "l") {
+            x += args[a];
+            y += args[a+1];
+          } else {
+            x = args[a];
+            y = args[a+1];
+          }
+          normalized += "L " + x + " " + y + " ";
+        }
+      }
+      else if(lop === "h") {
+        for (a = 0; a < alen; a++) {
+          if (op === "h") {
+            x += args[a];
+          } else {
+            x = args[a];
+          }
+          normalized += "L " + x + " " + y + " ";
+        }
+      }
+      else if(lop === "v") {
+        for (a = 0; a < alen; a++) {
+          if (op === "v") {
+            y += args[a];
+          } else {
+            y = args[a];
+          }
+          normalized += "L " + x + " " + y + " ";
+        }
+      }
+
+      // quadratic curveto commands
+      else if(lop === "q") {
+        for (a = 0; a < alen; a += 4) {
+          if (op === "q") {
+            cx = x + args[a];
+            cy = y + args[a+1];
+            x += args[a+2];
+            y += args[a+3];
+          } else {
+            cx = args[a];
+            cy = args[a+1];
+            x  = args[a+2];
+            y  = args[a+3];
+          }
+          normalized += "Q " + cx + " " + cy + " "  + x + " " + y + " ";
+        }
+      }
+      else if(lop === "t") {
+        for (a = 0; a < alen; a += 2) {
+          // reflect previous cx/cy over x/y
+          cx = x + (x-cx);
+          cy = y + (y-cy);
+          // then get real end point
+          if (op === "t") {
+            x += args[a];
+            y += args[a+1];
+          } else {
+            x  = args[a];
+            y  = args[a+1];
+          }
+          normalized += "Q " + cx + " " + cy + " "  + x + " " + y + " ";
+        }
+      }
+
+      // cubic curveto commands
+      else if(lop === "c") {
+        for (a = 0; a < alen; a += 6) {
+          if (op === "c") {
+            cx  = x + args[a];
+            cy  = y + args[a+1];
+            cx2 = x + args[a+2];
+            cy2 = y + args[a+3];
+            x  += args[a+4];
+            y  += args[a+5];
+          } else {
+            cx  = args[a];
+            cy  = args[a+1];
+            cx2 = args[a+2];
+            cy2 = args[a+3];
+            x   = args[a+4]
+            y   = args[a+5];
+          }
+          normalized += "C " + cx + " " + cy + " " + cx2 + " " + cy2 + " "  + x + " " + y + " ";
+        }
+      }
+      else if(lop === "s") {
+        for (a = 0; a < alen; a += 4) {
+          // reflect previous cx2/cy2 over x/y
+          cx = x + (x-cx2);
+          cy = y + (y-cy2);
+          // then get real control and end point
+          if (op === "s") {
+            cx2 = x + args[a];
+            cy2 = y + args[a+1];
+            x  += args[a+2];
+            y  += args[a+3];
+          } else {
+            cx2 = args[a];
+            cy2 = args[a+1];
+            x   = args[a+2]
+            y   = args[a+3];
+          }
+          normalized += "C " + cx + " " + cy + " " + cx2 + " " + cy2 + " "  + x + " " + y + " ";
+        }
+      }
+
+      //   rx ry x-axis-rotation large-arc-flag sweep-flag  x   y
+      // a 25,25             -30              0,         1 50,-25
+
+      // arc command
+      else if(lop === "a") {
+        for (a = 0; a < alen; a += 7) {
+          rx = args[a];
+          ry = args[a+1];
+          xrot = args[a+2];
+
+          lflag = oargs[a+3]; // we need the original string to deal with leading zeroes
+          let fixed = false;
+
+          if(lflag.length > 1) {
+            let b1 = parseInt(lflag[0]),
+                b2 = parseInt(lflag[1]),
+                rest = undefined;
+            if(lflag.length > 2) rest = parseFloat(lflag.substring(2));
+            args[a+3] = b1;
+            args.splice(a+4, 0, b2);
+            if (rest!==undefined) args.splice(a+5, 0, rest);
+            fixed = true;
+          }
+          lflag = args[a+3];
+
+          sweep = fixed ? args[a+4] : oargs[a+4]; // we need the original string to deal with leading zeroes
+          if(!fixed && sweep.length > 1) {
+            args[a+4] = parseInt(sweep[0]);
+            args.splice(a+5, 0, parseFloat(sweep.substring(1)));
+          }
+          sweep = args[a+4];
+
+          if (op === "a") {
+            x += args[a+5];
+            y += args[a+6];
+          } else {
+            x = args[a+5];
+            y = args[a+6];
+          }
+
+          normalized += "A " + rx + " " + ry + " " + xrot + " " + lflag + " " + sweep + " " + x + " " + y + " ";
+        }
+      }
+
+      else if(lop === "z") {
+        normalized += "Z ";
+        // not unimportant: path closing changes the current x/y coordinate
+        x = sx;
+        y = sy;
+      }
+    }
+    return normalized.trim();
+  };
+
+  /**
+   * Reverse an SVG path.
+   * As long as the input path is normalised, this is actually really
+   * simple to do. As all pathing commands are symmetrical, meaning
+   * that they render the same when you reverse the coordinate order,
+   * the grand trick here is to reverse the path (making sure to keep
+   * coordinates ordered pairwise) and shift the operators left by
+   * one or two coordinate pairs depending on the operator:
+   *
+   *   - Z is removed (after noting it existed),
+   *   - L moves to 2 spots earlier (skipping one coordinate),
+   *   - Q moves to 2 spots earlier (skipping one coordinate),
+   *   - C moves to 4 spots earlier (skipping two coordinates)
+   *       and its arguments get reversed,
+   *   - the path start becomes M.
+   *   - the path end becomes Z iff it was there to begin with.
+   */
+  function reverseNormalizedPath(normalized) {
+    var terms = normalized.trim().split(' '),
+        term,
+        tlen = terms.length,
+        tlen1 = tlen-1,
+        t,
+        reversed = [],
+        x, y,
+        pair, pairs,
+        shift,
+        matcher = new RegExp('[QAZLCM]',''),
+        closed = terms.slice(-1)[0].toUpperCase() === 'Z';
+
+    for (t = 0; t < tlen; t++) {
+      term = terms[t];
+
+      // Is this an operator? If it is, run through its
+      // argument list, which we know is fixed length.
+      if (matcher.test(term)) {
+
+        // Arc processing relies on not-just-coordinates
+        if (term === "A") {
+          reversed.push(terms[t+5] === '0' ? '1' : '0');
+          reversed.push(terms[t+4]);
+          reversed.push(terms[t+3]);
+          reversed.push(terms[t+2]);
+          reversed.push(terms[t+1]);
+          reversed.push(term);
+          reversed.push(terms[t+7]);
+          reversed.push(terms[t+6]);
+          t += 7;
+          continue;
+        }
+
+        // how many coordinate pairs do we need to read,
+        // and by how many pairs should this operator be
+        // shifted left?
+        else if (term === "C") { pairs = 3; shift = 2; }
+        else if (term === "Q") { pairs = 2; shift = 1; }
+        else if (term === "L") { pairs = 1; shift = 1; }
+        else if (term === "M") { pairs = 1; shift = 0; }
+        else { continue; }
+
+        // do the argument reading and operator shifting
+        if (pairs === shift) {
+          reversed.push(term);
+        }
+        for (pair = 0; pair < pairs; pair++) {
+          if (pair === shift) {
+            reversed.push(term);
+          }
+          x = terms[++t];
+          y = terms[++t];
+          reversed.push(y);
+          reversed.push(x);
+        }
+      }
+      // the code has been set up so that every time we
+      // iterate because of the for() operation, the term
+      // we see is a pathing operator, not a number. As
+      // such, if we get to this "else" the path is malformed.
+      else {
+        var pre  = terms.slice(Math.max(t-3,0),3).join(" ");
+            post = terms.slice(t+1,Math.min(t+4,tlen1)).join(" ");
+            range = pre + " [" + term + "] " + post;
+        throw("Error while trying to reverse normalized SVG path, at position "+t+" ("+range+").\n" +
+               "Either the path is not normalised, or it's malformed."); }
+    }
+
+    reversed.push('M');
+
+    // generating the reversed path string involves
+    // running through our transformed terms in reverse.
+    var revstring = "", rlen1 = reversed.length-1, r;
+    for (r = rlen1; r > 0; r--) {
+      revstring += reversed[r] + " ";
+    }
+    if (closed) revstring += "Z";
+    revstring = revstring.replace(/M M/g,'Z M');
+
+    return revstring;
+  };
+
+  /**
+   * This is the function that you'll actually want to
+   * make use of, because it lets you reverse individual
+   * subpaths in some <path> "d" attribute.
+   */
+  function reverseSubPath(path, subpath) {
+    subpath = parseInt(subpath)==subpath ? subpath : false;
+    var path = normalizePath(path),
+        paths = path.replace(/M/g,'|M').split("|"),
+        revpath;
+    paths.splice(0,1);
+    if (subpath !== false && subpath >= paths.length) {
+      return path;
+    }
+
+    if (subpath === false) {
+      paths = paths.map(function(spath) {
+        return reverseNormalizedPath(spath.trim());
+      });
+    } else {
+      var spath = paths[subpath];
+      if (spath) {
+        revpath = reverseNormalizedPath(spath.trim());
+        paths[subpath] = revpath;
+      }
+    }
+
+    return paths.join(" ").replace(/ +/g,' ').trim();
+  };
+
+  /**
+   * Our return object
+   */
+  var SVGPathEditor = {
+    normalize: normalizePath,
+    reverseNormalized: reverseNormalizedPath,
+    reverse: reverseSubPath
+  };
+
+  return SVGPathEditor;
+}));