From fc2ed6fc9d411c73b2e1903b5a5434425cf46aba Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Wed, 12 Nov 2025 14:11:37 -0400
Subject: [PATCH] More shapes

---
 README.md      | 12 ++++++++++++
 hamburger.html |  6 ++++++
 hamburger.mjs  | 42 +++++++++++++++++++++++++++++++++++++++---
 3 files changed, 57 insertions(+), 3 deletions(-)

diff --git a/README.md b/README.md
index c589e3e..acd248c 100644
--- a/README.md
+++ b/README.md
@@ -110,6 +110,12 @@ Animates the hamburger icon to the specified shape.
 - `'circle'` - Perfect circle shape
 - `'doughnut'` - Doughnut shape with center cutout
 - `'moon'` - Crescent moon shape
+- `'u'` - Inverted U shape (∩)
+- `'u_up'` - Upright U shape (U)
+- `'u_left'` - Left-facing U shape (⊂)
+- `'u_right'` - Right-facing U shape (⊃)
+- `'hamburger_vertical'` - Hamburger with middle line hidden (☰)
+- `'hamburger_horizontal'` - Horizontal hamburger with middle line hidden (⫘)
 
 **Example:**
 ```javascript
@@ -181,6 +187,12 @@ hamburger.destroy();
         <button onclick="changeShape('circle')">Circle</button>
         <button onclick="changeShape('doughnut')">Doughnut</button>
         <button onclick="changeShape('moon')">Moon</button>
+        <button onclick="changeShape('u')">∩</button>
+        <button onclick="changeShape('u_up')">U</button>
+        <button onclick="changeShape('u_left')">⊂</button>
+        <button onclick="changeShape('u_right')">⊃</button>
+        <button onclick="changeShape('hamburger_vertical')">☰</button>
+        <button onclick="changeShape('hamburger_horizontal')">⫘</button>
     </div>
 
     <script type="module">
diff --git a/hamburger.html b/hamburger.html
index c42399b..bf91f36 100644
--- a/hamburger.html
+++ b/hamburger.html
@@ -73,6 +73,12 @@
         <button onclick="animateTo('circle')">Circle</button>
         <button onclick="animateTo('doughnut')">Doughnut</button>
         <button onclick="animateTo('moon')">Moon</button>
+        <button onclick="animateTo('u')">∩</button>
+        <button onclick="animateTo('u_up')">U</button>
+        <button onclick="animateTo('u_left')">⊂</button>
+        <button onclick="animateTo('u_right')">⊃</button>
+        <button onclick="animateTo('hamburger_vertical')">☰</button>
+        <button onclick="animateTo('hamburger_horizontal')">⫘</button>
     </div>
     <div style="margin-top: 20px; padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9; width: 400px; height: 200px; overflow: auto;">
         <textarea id="svgCode" style="font-size: 12px; width: 100%; height: 150px; margin: 0; font-family: monospace;"></textarea>
diff --git a/hamburger.mjs b/hamburger.mjs
index 7767172..7b3c38e 100644
--- a/hamburger.mjs
+++ b/hamburger.mjs
@@ -100,9 +100,9 @@ export class HamburgerMorphing {
                 break;
 
             case 'burger':
-                this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 20, opacity: 1, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
-                this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 50, opacity: 1, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
-                this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 80, opacity: 1, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 50, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
                 break;
 
             case 'arrow_left':
@@ -195,6 +195,42 @@ export class HamburgerMorphing {
                 this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 90, x2: 90, y1: 50, y2: 50, 'stroke-width': 90, stroke: this.options.background });
                 break;
 
+            case 'u':
+                this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 20, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 80, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                break;
+
+            case 'u_up':
+                this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 20, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 80, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                break;
+
+            case 'u_left':
+                this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 20, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                break;
+
+            case 'u_right':
+                this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 80, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                break;
+
+            case 'hamburger_vertical':
+                this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 20, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                break;
+
+            case 'hamburger_horizontal':
+                this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 20, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 20, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 80, y1: 20, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
+                break;
+
 
             default:
                 throw new Error(`Unknown shape: ${shape}`);