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

Make this project usable by other projects

Browse Source
This commit is contained in:
Your Name
2025-11-11 17:58:19 -04:00
parent 635228783a
commit 1b4754f5eb
3 changed files with 472 additions and 149 deletions
Download Patch File Download Diff File Expand all files Collapse all files

219
README.md Normal file
View File

@@ -0,0 +1,219 @@
# Hamburger Morphing
A lightweight ES module for creating animated hamburger menu icons that can morph into various shapes using SVG.js.
## Features
- **Smooth Animations**: 500ms morphing animations between shapes
- **Configurable**: Customize size and color
- **Lightweight**: Minimal dependencies (only SVG.js)
- **ES Module**: Modern JavaScript module format
- **Multiple Shapes**: Support for 8 different icon shapes
## Installation
### As a Git Submodule
Add this project as a submodule to your repository:
```bash
git submodule add <repository-url> lib/hamburger-morphing
```
### Manual Installation
1. Download `hamburger.mjs` from this repository
2. Include SVG.js in your project (CDN or npm)
3. Import the module in your JavaScript
## Quick Start
```html
<!DOCTYPE html>
<html>
<head>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
</head>
<body>
<div id="menu-icon"></div>
<script type="module">
import { HamburgerMorphing } from './lib/hamburger-morphing/hamburger.mjs';
// Create hamburger instance
const hamburger = new HamburgerMorphing('#menu-icon', {
size: 80,
color: '#ff6b6b'
});
// Morph to different shapes
hamburger.animateTo('x'); // Close/X icon
hamburger.animateTo('burger'); // Back to hamburger
</script>
</body>
</html>
```
## API Reference
### Constructor
```javascript
new HamburgerMorphing(containerSelector, options)
```
**Parameters:**
- `containerSelector` (string): CSS selector for the container element
- `options` (object, optional): Configuration options
- `size` (number, default: 100): Size of the SVG in pixels
- `color` (string, default: "#000"): Stroke color for the lines
**Example:**
```javascript
const hamburger = new HamburgerMorphing('#menu', {
size: 60,
color: '#333'
});
```
### Methods
#### `animateTo(shape)`
Animates the hamburger icon to the specified shape.
**Parameters:**
- `shape` (string): Target shape name
**Available shapes:**
- `'burger'` - Three horizontal lines (default)
- `'x'` - Close/X icon
- `'plus'` - Plus/add icon
- `'minus'` - Minus/subtract icon
- `'arrow_left'` - Left arrow
- `'arrow_right'` - Right arrow
- `'arrow_up'` - Up arrow
- `'arrow_down'` - Down arrow
- `'triangle_up'` - Triangle pointing up
- `'triangle_down'` - Triangle pointing down
- `'triangle_left'` - Triangle pointing left
- `'triangle_right'` - Triangle pointing right
- `'carrot_right'` - Carrot/play shape pointing right
- `'carrot_left'` - Carrot/play shape pointing left
- `'carrot_up'` - Carrot/play shape pointing up
- `'carrot_down'` - Carrot/play shape pointing down
**Example:**
```javascript
hamburger.animateTo('x');
hamburger.animateTo('arrow_right');
```
#### `getSvgCode()`
Returns the current SVG markup as a string.
**Returns:** (string) SVG markup
**Example:**
```javascript
const svgCode = hamburger.getSvgCode();
console.log(svgCode);
// Output: <svg viewBox="0 0 120 120" width="100px" height="100px">...
```
#### `destroy()`
Cleans up the hamburger instance and removes the SVG from the DOM.
**Example:**
```javascript
hamburger.destroy();
```
## Complete Example
```html
<!DOCTYPE html>
<html>
<head>
<title>Hamburger Menu Demo</title>
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
<style>
#menu-icon {
cursor: pointer;
margin: 20px;
}
button {
margin: 5px;
padding: 10px 20px;
}
</style>
</head>
<body>
<div id="menu-icon"></div>
<div>
<button onclick="changeShape('burger')">Hamburger</button>
<button onclick="changeShape('x')">X</button>
<button onclick="changeShape('plus')">Plus</button>
<button onclick="changeShape('minus')">Minus</button>
<button onclick="changeShape('arrow_left')">Arrow Left</button>
<button onclick="changeShape('arrow_right')">Arrow Right</button>
<button onclick="changeShape('arrow_up')">Arrow Up</button>
<button onclick="changeShape('arrow_down')">Arrow Down</button>
<button onclick="changeShape('triangle_up')">Triangle Up</button>
<button onclick="changeShape('triangle_down')">Triangle Down</button>
<button onclick="changeShape('triangle_left')">Triangle Left</button>
<button onclick="changeShape('triangle_right')">Triangle Right</button>
<button onclick="changeShape('carrot_right')">Carrot Right</button>
<button onclick="changeShape('carrot_left')">Carrot Left</button>
<button onclick="changeShape('carrot_up')">Carrot Up</button>
<button onclick="changeShape('carrot_down')">Carrot Down</button>
</div>
<script type="module">
import { HamburgerMorphing } from './lib/hamburger-morphing/hamburger.mjs';
// Create hamburger with custom options
const hamburger = new HamburgerMorphing('#menu-icon', {
size: 100,
color: '#007bff'
});
// Make it globally available for onclick handlers
window.changeShape = (shape) => {
hamburger.animateTo(shape);
};
</script>
</body>
</html>
```
## Browser Support
- Modern browsers that support ES modules
- Chrome 61+
- Firefox 60+
- Safari 10.1+
- Edge 16+
## Dependencies
- **SVG.js** (3.0+): Required for SVG manipulation and animations
## License
This project is open source and available under the [MIT License](LICENSE).
## Contributing
1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Test thoroughly
5. Submit a pull request
## Demo
Open `hamburger.html` in your browser to see all available shapes and animations in action.

190
hamburger.html
View File

@@ -21,9 +21,26 @@
flex-direction: row; flex-direction: row;
justify-content: center; justify-content: center;
align-items: center; align-items: center;
width: 100px; width: 300px;
height: 100px; height: 300px;
margin-bottom: 20px; margin-bottom: 20px;
border: 1px solid #000;
position: relative;
}
#divSvgOut::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-image:
radial-gradient(circle, #ff0000 1px, transparent 1px);
background-size: 33.333px 33.333px;
background-position: 0px 0px;
pointer-events: none;
z-index: 1;
} }
button { button {
margin: 5px; margin: 5px;
@@ -37,7 +54,7 @@
<h1>Hamburger Morphing</h1> <h1>Hamburger Morphing</h1>
<div id="divSvgOut"></div> <div id="divSvgOut"></div>
<div> <div>
<button onclick="animateTo('burger')">Hamburger</button> <button onclick="animateTo('burger')">Burger</button>
<button onclick="animateTo('x')">X</button> <button onclick="animateTo('x')">X</button>
<button onclick="animateTo('plus')">Plus</button> <button onclick="animateTo('plus')">Plus</button>
<button onclick="animateTo('minus')">Minus</button> <button onclick="animateTo('minus')">Minus</button>
@@ -45,134 +62,36 @@
<button onclick="animateTo('arrow_down')">Arrow Down</button> <button onclick="animateTo('arrow_down')">Arrow Down</button>
<button onclick="animateTo('arrow_up')">Arrow Up</button> <button onclick="animateTo('arrow_up')">Arrow Up</button>
<button onclick="animateTo('arrow_right')">Arrow Right</button> <button onclick="animateTo('arrow_right')">Arrow Right</button>
<button onclick="animateTo('triangle_up')">Triangle Up</button>
<button onclick="animateTo('triangle_down')">Triangle Down</button>
<button onclick="animateTo('triangle_left')">Triangle Left</button>
<button onclick="animateTo('triangle_right')">Triangle Right</button>
<button onclick="animateTo('carrot_right')">Carrot Right</button>
<button onclick="animateTo('carrot_left')">Carrot Left</button>
<button onclick="animateTo('carrot_up')">Carrot Up</button>
<button onclick="animateTo('carrot_down')">Carrot Down</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>
</div> </div>
<button onclick="renderSvg()" style="margin-top: 10px; padding: 10px 20px; font-size: 16px; cursor: pointer;">Render SVG</button> <button onclick="renderSvg()" style="margin-top: 10px; padding: 10px 20px; font-size: 16px; cursor: pointer;">Render SVG</button>
<script> <script type="module">
let draw; import { HamburgerMorphing } from './hamburger.mjs';
let line1;
let line2;
let line3;
let stroke = {
color: "#000",
width: 38,
linecap: "round",
linejoin: "round",
};
const svgDrawBurger = () => { let hamburger;
draw = SVG().addTo("#divSvgOut").size("100px", "100px").viewbox(0, 0, 120, 120);
line1 = draw.line(20, 20, 100, 19).fill("#fff").stroke(stroke); const animateTo = (shape) => {
line2 = draw.line(20, 60, 100, 60).fill("#fff").stroke(stroke); if (hamburger) {
line3 = draw.line(20, 100, 100, 101).fill("#fff").stroke(stroke); hamburger.animateTo(shape);
};
const animateTo = (svgType) => {
if (svgType == "x") {
try {
line1.animate(500, 0, "now").attr({ x1: 20, x2: 100, y1: 20, y2: 100 });
line2.animate(500, 0, "now").attr({ x1: 100, x2: 20, y1: 100, y2: 20 });
line3.animate(500, 0, "now").attr({ x1: 20, x2: 100, y1: 100, y2: 20 });
} catch (error) {}
updateSvgCode(); updateSvgCode();
return;
}
if (svgType == "plus") {
try {
line1.animate(500, 0, "now").attr({ x1: 20, x2: 100, y1: 60, y2: 60 });
line2.animate(500, 0, "now").attr({ x1: 60, x2: 60, y1: 20, y2: 100 });
line3.animate(500, 0, "now").attr({ x1: 60, x2: 60, y1: 60, y2: 60 });
} catch (error) {}
updateSvgCode();
return;
}
if (svgType == "minus") {
try {
line1.animate(500, 0, "now").attr({ x1: 20, x2: 100, y1: 60, y2: 60 });
line2.animate(500, 0, "now").attr({ x1: 60, x2: 60, y1: 60, y2: 60 });
line3.animate(500, 0, "now").attr({ x1: 60, x2: 60, y1: 60, y2: 60 });
} catch (error) {}
updateSvgCode();
return;
}
if (svgType == "burger") {
try {
line1.animate(500, 0, "now").attr({ x1: 20, x2: 100, y1: 20, y2: 20 });
line2.animate(500, 0, "now").attr({ x1: 20, x2: 100, y1: 60, y2: 60 });
line3.animate(500, 0, "now").attr({ x1: 20, x2: 100, y1: 100, y2: 100 });
} catch (error) {}
updateSvgCode();
return;
}
if (svgType == "arrow_left") {
try {
line1.animate(500, 0, "now").attr({ x1: 60, x2: 20, y1: 20, y2: 60 });
line2.animate(500, 0, "now").attr({ x1: 80, x2: 100, y1: 60, y2: 60 });
line3.animate(500, 0, "now").attr({ x1: 60, x2: 20, y1: 100, y2: 60 });
} catch (error) {}
updateSvgCode();
return;
}
if (svgType == "arrow_down") {
try {
line1.animate(500, 0, "now").attr({ x1: 20, x2: 60, y1: 60, y2: 100 });
line2.animate(500, 0, "now").attr({ x1: 60, x2: 60, y1: 20, y2: 40 });
line3.animate(500, 0, "now").attr({ x1: 100, x2: 60, y1: 60, y2: 100 });
} catch (error) {}
updateSvgCode();
return;
}
if (svgType == "arrow_up") {
try {
line1.animate(500, 0, "now").attr({ x1: 20, x2: 60, y1: 60, y2: 20 });
line2.animate(500, 0, "now").attr({ x1: 60, x2: 60, y1: 100, y2: 80 });
line3.animate(500, 0, "now").attr({ x1: 100, x2: 60, y1: 60, y2: 20 });
} catch (error) {}
updateSvgCode();
return;
}
if (svgType == "arrow_right") {
try {
line1.animate(500, 0, "now").attr({ x1: 60, x2: 100, y1: 20, y2: 60 });
line2.animate(500, 0, "now").attr({ x1: 20, x2: 40, y1: 60, y2: 60 });
line3.animate(500, 0, "now").attr({ x1: 60, x2: 100, y1: 100, y2: 60 });
} catch (error) {}
updateSvgCode();
return;
} }
}; };
const updateSvgCode = () => { const updateSvgCode = () => {
setTimeout(() => { setTimeout(() => {
const svgElement = document.querySelector('#divSvgOut svg'); if (hamburger) {
if (svgElement) { const svgCode = hamburger.getSvgCode();
// Get the current attributes of the lines
const lines = svgElement.querySelectorAll('line');
let svgCode = `<svg viewBox="0 0 120 120" width="100px" height="100px">\n`;
lines.forEach(line => {
const x1 = Math.round(line.getAttribute('x1'));
const y1 = Math.round(line.getAttribute('y1'));
const x2 = Math.round(line.getAttribute('x2'));
const y2 = Math.round(line.getAttribute('y2'));
const stroke = line.getAttribute('stroke') || '#000';
const strokeWidth = line.getAttribute('stroke-width') || '38';
const strokeLinecap = line.getAttribute('stroke-linecap') || 'round';
const strokeLinejoin = line.getAttribute('stroke-linejoin') || 'round';
const fill = line.getAttribute('fill') || '#fff';
svgCode += ` <line x1="${x1}" x2="${x2}" y1="${y1}" y2="${y2}" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-linecap="${strokeLinecap}" stroke-linejoin="${strokeLinejoin}" fill="${fill}"></line>\n`;
});
svgCode += `</svg>`;
document.getElementById('svgCode').value = svgCode; document.getElementById('svgCode').value = svgCode;
} }
}, 510); // Wait for animation to complete }, 510); // Wait for animation to complete
@@ -183,39 +102,12 @@
document.getElementById('divSvgOut').innerHTML = svgCode; document.getElementById('divSvgOut').innerHTML = svgCode;
}; };
const formatSvg = (svgString) => { // Make functions globally available for onclick handlers
// Round decimal values to integers window.animateTo = animateTo;
svgString = svgString.replace(/(\d+\.\d+)/g, (match) => Math.round(parseFloat(match))); window.renderSvg = renderSvg;
// Simple XML formatter // Initialize the hamburger morphing
let formatted = ''; hamburger = new HamburgerMorphing('#divSvgOut');
let indent = 0;
const indentStr = ' ';
// Split by tags
const parts = svgString.split(/(<[^>]*>)/);
for (let part of parts) {
if (part.trim() === '') continue;
if (part.startsWith('</')) {
indent--;
formatted += indentStr.repeat(indent) + part + '\n';
} else if (part.startsWith('<') && !part.endsWith('/>')) {
formatted += indentStr.repeat(indent) + part + '\n';
if (!part.includes('</')) indent++;
} else if (part.startsWith('<') && part.endsWith('/>')) {
formatted += indentStr.repeat(indent) + part + '\n';
} else {
formatted += indentStr.repeat(indent) + part.trim() + '\n';
}
}
return formatted.trim();
};
// Initialize the SVG
svgDrawBurger();
</script> </script>
</body> </body>
</html> </html>

212
hamburger.mjs Normal file
View File

@@ -0,0 +1,212 @@
/**
* Hamburger Morphing Animation Module
* A lightweight ES module for creating animated hamburger menu icons using SVG.js
*/
// Configuration constants - easily adjustable
const STROKE_WIDTH = 29;
const ANIMATION_DURATION = 500;
export class HamburgerMorphing {
/**
* Creates a new hamburger morphing animation instance
* @param {string} containerSelector - CSS selector for the container element
* @param {Object} options - Configuration options
* @param {number} [options.size=100] - Size of the SVG in pixels
* @param {string} [options.color="#000"] - Stroke color for the lines
*/
constructor(containerSelector, options = {}) {
this.container = document.querySelector(containerSelector);
if (!this.container) {
throw new Error(`Container element not found: ${containerSelector}`);
}
this.options = {
size: options.size || 100,
color: options.color || "#000"
};
this.draw = null;
this.line1 = null;
this.line2 = null;
this.line3 = null;
this.stroke = {
color: this.options.color,
width: STROKE_WIDTH,
linecap: "round",
linejoin: "round",
};
this.init();
}
/**
* Initializes the SVG drawing and creates the initial hamburger lines
*/
init() {
// Clear any existing content
this.container.innerHTML = '';
// Create SVG drawing - expand to fill container
this.draw = SVG().addTo(this.container).size('100%', '100%').viewbox(0, 0, 100, 100);
// Create the three lines
this.line1 = this.draw.line(20, 20, 80, 20).fill("#fff").stroke(this.stroke);
this.line2 = this.draw.line(20, 50, 80, 50).fill("#fff").stroke(this.stroke);
this.line3 = this.draw.line(20, 80, 80, 80).fill("#fff").stroke(this.stroke);
}
/**
* Animates the hamburger icon to a specified shape
* @param {string} shape - The target shape ('burger', 'x', 'plus', 'minus', 'arrow_left', 'arrow_right', 'arrow_up', 'arrow_down')
*/
animateTo(shape) {
if (!this.line1 || !this.line2 || !this.line3) {
throw new Error('HamburgerMorphing not properly initialized');
}
switch (shape) {
case 'x':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 80 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 80, y2: 20 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 20 });
break;
case 'plus':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 50 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 20, y2: 80 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50 });
break;
case 'minus':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 50 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 50, y2: 50 });
break;
case 'burger':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 20 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 50 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 80 });
break;
case 'arrow_left':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 20, y1: 20, y2: 50 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 65, x2: 80, y1: 50, y2: 50 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 20, y1: 80, y2: 50 });
break;
case 'arrow_down':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 50, y2: 80 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 20, y2: 35 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 50, y1: 50, y2: 80 });
break;
case 'arrow_up':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 50, y2: 20 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 50, y1: 80, y2: 65 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 50, y1: 50, y2: 20 });
break;
case 'arrow_right':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 20, y2: 50 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 35, y1: 50, y2: 50 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 80, y2: 50 });
break;
case 'triangle_up':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 80, y2: 20 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 20, y2: 80 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 80, y2: 80 });
break;
case 'triangle_down':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 20, y2: 80 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 80, y2: 20 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 20 });
break;
case 'triangle_left':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 20, y2: 50 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 80 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 80, y1: 20, y2: 80 });
break;
case 'triangle_right':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 50 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 50, y2: 80 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 20, y1: 20, y2: 80 });
break;
case 'carrot_right':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 20, y2: 50 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 50, y2: 80 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 50, y2: 80 });
break;
case 'carrot_left':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 80, x2: 20, y1: 20, y2: 50 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 80 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 80, y1: 50, y2: 80 });
break;
case 'carrot_up':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 80, y2: 20 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 20, y2: 80 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 20, y2: 80 });
break;
case 'carrot_down':
this.line1.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 20, x2: 50, y1: 20, y2: 80 });
this.line2.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 80, y2: 20 });
this.line3.animate(ANIMATION_DURATION, 0, "now").attr({ x1: 50, x2: 80, y1: 80, y2: 20 });
break;
default:
throw new Error(`Unknown shape: ${shape}`);
}
}
/**
* Returns the current SVG code as a string
* @returns {string} SVG markup
*/
getSvgCode() {
const svgElement = this.container.querySelector('svg');
if (!svgElement) return '';
const lines = svgElement.querySelectorAll('line');
let svgCode = `<svg viewBox="0 0 100 100" width="${this.options.size}px" height="${this.options.size}px">\n`;
lines.forEach(line => {
const x1 = Math.round(line.getAttribute('x1'));
const y1 = Math.round(line.getAttribute('y1'));
const x2 = Math.round(line.getAttribute('x2'));
const y2 = Math.round(line.getAttribute('y2'));
const stroke = line.getAttribute('stroke') || this.options.color;
const strokeWidth = line.getAttribute('stroke-width') || '38';
const strokeLinecap = line.getAttribute('stroke-linecap') || 'round';
const strokeLinejoin = line.getAttribute('stroke-linejoin') || 'round';
const fill = line.getAttribute('fill') || '#fff';
svgCode += ` <line x1="${x1}" x2="${x2}" y1="${y1}" y2="${y2}" stroke="${stroke}" stroke-width="${strokeWidth}" stroke-linecap="${strokeLinecap}" stroke-linejoin="${strokeLinejoin}" fill="${fill}"></line>\n`;
});
svgCode += `</svg>`;
return svgCode;
}
/**
* Destroys the hamburger morphing instance and cleans up the DOM
*/
destroy() {
if (this.draw) {
this.draw.remove();
this.draw = null;
}
this.line1 = null;
this.line2 = null;
this.line3 = null;
}
}