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, foreground, background, and hover colors
- 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:
git submodule add <repository-url> lib/hamburger-morphing
Manual Installation
- Download
hamburger.mjsfrom this repository - Include SVG.js in your project (CDN or npm)
- Import the module in your JavaScript
Quick Start
<!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,
foreground: '#ff6b6b',
background: '#ffffff',
hover: '#ff0000'
});
// Morph to different shapes
hamburger.animateTo('x'); // Close/X icon
hamburger.animateTo('burger'); // Back to hamburger
</script>
</body>
</html>
API Reference
Constructor
new HamburgerMorphing(containerSelector, options)
Parameters:
containerSelector(string): CSS selector for the container elementoptions(object, optional): Configuration optionssize(number, default: 100): Size of the SVG in pixelsforeground(string, default: "#000000"): Foreground/stroke color for the linesbackground(string, default: "#ffffff"): Background color for cutout effectshover(string, default: "#ff0000"): Hover color for interactive effects
Example:
const hamburger = new HamburgerMorphing('#menu', {
size: 60,
foreground: '#333333',
background: '#ffffff'
});
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'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:
hamburger.animateTo('x');
hamburger.animateTo('arrow_right');
getSvgCode()
Returns the current SVG markup as a string.
Returns: (string) SVG markup
Example:
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:
hamburger.destroy();
Complete Example
<!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>
<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">
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.
Contributing
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- Submit a pull request
Demo
Open hamburger.html in your browser to see all available shapes and animations in action.