116 lines
4.2 KiB
HTML
116 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Hamburger Menu Morphing Demo</title>
|
|
<script src="https://cdn.jsdelivr.net/npm/@svgdotjs/svg.js@3.0/dist/svg.min.js"></script>
|
|
<style>
|
|
body {
|
|
font-family: Arial, sans-serif;
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
height: 100vh;
|
|
margin: 0;
|
|
|
|
}
|
|
#divSvgOut {
|
|
display: flex;
|
|
flex-direction: row;
|
|
justify-content: center;
|
|
align-items: center;
|
|
width: 300px;
|
|
height: 300px;
|
|
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 {
|
|
margin: 5px;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
<h1>Hamburger Morphing</h1>
|
|
<div id="divSvgOut"></div>
|
|
<div>
|
|
<button onclick="animateTo('burger')">Burger</button>
|
|
<button onclick="animateTo('x')">X</button>
|
|
<button onclick="animateTo('plus')">Plus</button>
|
|
<button onclick="animateTo('minus')">Minus</button>
|
|
<button onclick="animateTo('arrow_left')">Arrow Left</button>
|
|
<button onclick="animateTo('arrow_down')">Arrow Down</button>
|
|
<button onclick="animateTo('arrow_up')">Arrow Up</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>
|
|
<button onclick="animateTo('circle')">Circle</button>
|
|
<button onclick="animateTo('doughnut')">Doughnut</button>
|
|
<button onclick="animateTo('moon')">Moon</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>
|
|
</div>
|
|
<button onclick="renderSvg()" style="margin-top: 10px; padding: 10px 20px; font-size: 16px; cursor: pointer;">Render SVG</button>
|
|
|
|
<script type="module">
|
|
import { HamburgerMorphing } from './hamburger.mjs';
|
|
|
|
let hamburger;
|
|
|
|
const animateTo = (shape) => {
|
|
if (hamburger) {
|
|
hamburger.animateTo(shape);
|
|
updateSvgCode();
|
|
}
|
|
};
|
|
|
|
const updateSvgCode = () => {
|
|
setTimeout(() => {
|
|
if (hamburger) {
|
|
const svgCode = hamburger.getSvgCode();
|
|
document.getElementById('svgCode').value = svgCode;
|
|
}
|
|
}, 510); // Wait for animation to complete
|
|
};
|
|
|
|
const renderSvg = () => {
|
|
const svgCode = document.getElementById('svgCode').value;
|
|
document.getElementById('divSvgOut').innerHTML = svgCode;
|
|
};
|
|
|
|
// Make functions globally available for onclick handlers
|
|
window.animateTo = animateTo;
|
|
window.renderSvg = renderSvg;
|
|
|
|
// Initialize the hamburger morphing
|
|
hamburger = new HamburgerMorphing('#divSvgOut');
|
|
</script>
|
|
</body>
|
|
</html> |