laantungir/hamburger_morphing
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

More shapes

Browse Source
This commit is contained in:
Your Name
2025-11-12 14:11:37 -04:00
parent 41be0ac443
commit fc2ed6fc9d
3 changed files with 57 additions and 3 deletions
Download Patch File Download Diff File Expand all files Collapse all files

12
README.md
View File

@@ -110,6 +110,12 @@ Animates the hamburger icon to the specified shape.
- `'circle'` - Perfect circle shape - `'circle'` - Perfect circle shape
- `'doughnut'` - Doughnut shape with center cutout - `'doughnut'` - Doughnut shape with center cutout
- `'moon'` - Crescent moon shape - `'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:** **Example:**
```javascript ```javascript
@@ -181,6 +187,12 @@ hamburger.destroy();
<button onclick="changeShape('circle')">Circle</button> <button onclick="changeShape('circle')">Circle</button>
<button onclick="changeShape('doughnut')">Doughnut</button> <button onclick="changeShape('doughnut')">Doughnut</button>
<button onclick="changeShape('moon')">Moon</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> </div>
<script type="module"> <script type="module">

6
hamburger.html
View File

@@ -73,6 +73,12 @@
<button onclick="animateTo('circle')">Circle</button> <button onclick="animateTo('circle')">Circle</button>
<button onclick="animateTo('doughnut')">Doughnut</button> <button onclick="animateTo('doughnut')">Doughnut</button>
<button onclick="animateTo('moon')">Moon</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>
<div style="margin-top: 20px; padding: 10px; border: 1px solid #ccc; background-color: #f9f9f9; width: 400px; height: 200px; overflow: auto;"> <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> <textarea id="svgCode" style="font-size: 12px; width: 100%; height: 150px; margin: 0; font-family: monospace;"></textarea>

42
hamburger.mjs
View File

@@ -100,9 +100,9 @@ export class HamburgerMorphing {
break; break;
case 'burger': 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.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, 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, '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.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 80, 'stroke-width': STROKE_WIDTH, stroke: this.options.foreground });
break; break;
case 'arrow_left': 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 }); this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 90, x2: 90, y1: 50, y2: 50, 'stroke-width': 90, stroke: this.options.background });
break; 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: default:
throw new Error(`Unknown shape: ${shape}`); throw new Error(`Unknown shape: ${shape}`);