Added hover functionality

README.md

@@ -5,7 +5,7 @@ A lightweight ES module for creating animated hamburger menu icons that can morp
 ## Features
 
 - **Smooth Animations**: 500ms morphing animations between shapes
-- **Configurable**: Customize size and color
+- **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
@@ -43,7 +43,9 @@ git submodule add <repository-url> lib/hamburger-morphing
         // Create hamburger instance
         const hamburger = new HamburgerMorphing('#menu-icon', {
             size: 80,
-            color: '#ff6b6b'
+            foreground: '#ff6b6b',
+            background: '#ffffff',
+            hover: '#ff0000'
         });
 
         // Morph to different shapes
@@ -66,13 +68,16 @@ new HamburgerMorphing(containerSelector, options)
 - `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
+  - `foreground` (string, default: "#000000"): Foreground/stroke color for the lines
+  - `background` (string, default: "#ffffff"): Background color for cutout effects
+  - `hover` (string, default: "#ff0000"): Hover color for interactive effects
 
 **Example:**
 ```javascript
 const hamburger = new HamburgerMorphing('#menu', {
     size: 60,
-    color: '#333'
+    foreground: '#333333',
+    background: '#ffffff'
 });
 ```
 
@@ -102,6 +107,9 @@ Animates the hamburger icon to the specified shape.
 - `'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
 
 **Example:**
 ```javascript
@@ -170,6 +178,9 @@ hamburger.destroy();
         <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>
     </div>
 
     <script type="module">