Demo update (png download + form cleanup)

luxeria · Jan 20, 2024 · 2a9d438 · 2a9d438
1 parent 66ea219
commit 2a9d438
Show file tree

Hide file tree

Showing 3 changed files with 219 additions and 140 deletions.
diff --git a/README.md b/README.md
@@ -8,7 +8,7 @@ The library is written in pure javascript and does not require any external libr
 
 A demo site utilizing all parameters of the library can be found [here](https://luxeria.ch/luxlogo.js/luxlogo.html).
 
-## Usage in other projects
+## Usage in your project
 
 Include the luxlogo.js file in your HTML page:
 
@@ -33,23 +33,24 @@ All `rel`-variables are relative to the `size`-variable.
 
 | Variable                 | Description                                | Default     |
 | ------------------------ | ------------------------------------------ | ----------- |
-| size                     | Size of the logo in pixels                 | 600         |
+| size                     | Size of the logo in pixels                 | 512         |
 | color1                   | Primary color of the logo                  | "#000000"   |
 | rotation                 | Rotation angle in degrees                  | 0           |
 | numArrows                | Number of arrows in the logo               | 3           |
 | relBorderThickness       | Relative border thickness                  | 0           |
 | relSpacing               | Relative spacing between arrows            | 8           |
-| relInnerCircleDiameter   | Relative diameter of the inner circle      | 25          |
-| relOuterCircleDiameter   | Relative diameter of the outer circle      | 85          |
+| relInnerCircleDiameter   | Relative diameter of the inner circle      | 24          |
+| relOuterCircleDiameter   | Relative diameter of the outer circle      | 84          |
 | relOuterCircleThickness  | Relative thickness of the outer circle     | 12          |
-| relArrowTipWidth         | Relative width of the arrow tip            | 25          |
+| relArrowTipWidth         | Relative width of the arrow tip            | 24          |
 | relArrowTipStart         | Relative start of the arrow tip from center| 20          |
 | relArrowTipEnd           | Relative end of the arrow tip from center  | 50          |
-| relArrowNotchOffset      | Relative offset of the arrow notch         | 3           |
-| relArrowBaseWidth        | Relative width of the arrow base           | 13          |
+| relArrowNotchOffset      | Relative offset of the arrow notch         | 6           |
+| relArrowBaseWidth        | Relative width of the arrow base           | 12          |
 
-## Todo
+## To-Do
 
-- [x] Fix sizing issues, display size, viewport and size of the serialized SVG file
+- [x] Fix sizing issues, display size, viewport and size of the serialized SVG file (fixed by adding a viewBox)
 - [ ] Fix masking/grouping to allow for proper borders
-- [ ] Add support for different colors for each part (gradient support maybe?)
+- [ ] Add support for different colors for each part (gradient support maybe?)
+- [ ] **Let's find new defaults!** As in: How do you want our logo to look like on the website and in print?
diff --git a/js/luxlogo.js b/js/luxlogo.js
@@ -5,7 +5,7 @@ class LuxLogo {
         this.svg.setAttribute("xmlns", "http://www.w3.org/2000/svg");
         this.svg.setAttribute("version", "1.1");
         this.svg.setAttribute("preserveAspectRatio", "xMidYMid meet");
-        this.size = 600;
+        this.size = 512;
         this.color1 = "#000000";
         this.rotation = 0;
         this.center = this.size / 2;
@@ -18,7 +18,7 @@ class LuxLogo {
         this.relArrowTipWidth = 25;
         this.relArrowTipStart = 20;
         this.relArrowTipEnd = 50;
-        this.relArrowNotchOffset = 5;
+        this.relArrowNotchOffset = 6;
         this.relArrowBaseWidth = 12;
 
         // Calculate absolute values from relative values
@@ -92,10 +92,10 @@ class LuxLogo {
     // Logo specific functions
     createArrow() {
         const polygonPoints = [
-            [this.center, this.arrowTipEnd], 
-            [this.center + this.arrowTipWidth/2, this.arrowTipStart],
+            [this.center, this.arrowTipEnd],
+            [this.center + this.arrowTipWidth / 2, this.arrowTipStart],
             [this.center, this.arrowTipStart - this.arrowNotchOffset],
-            [this.center - this.arrowTipWidth/2, this.arrowTipStart]
+            [this.center - this.arrowTipWidth / 2, this.arrowTipStart]
         ];
         const arrowPolygon = this.createPolygon(polygonPoints);
         const arrowBase = this.createRectangle(this.arrowBaseX, this.arrowBaseY, this.arrowBaseWidth, this.arrowBaseHeight);
@@ -140,7 +140,7 @@ class LuxLogo {
         arrows.setAttribute("stroke", "black");
         arrows.setAttribute("stroke-width", this.spacing);
 
-        const circle = this.createCircle(this.center, this.center, this.outerCircleDiameter - this.outerCircleThickness*2);
+        const circle = this.createCircle(this.center, this.center, this.outerCircleDiameter - this.outerCircleThickness * 2);
         circle.setAttribute("fill", "black");
 
         return this.createMask(id, canvas, arrows, circle);
@@ -176,5 +176,5 @@ class LuxLogo {
         return this.svg.outerHTML;
 
     }
-    
+
 }