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

190
hamburger.html
View File

@@ -21,9 +21,26 @@
flex-direction: row;
justify-content: center;
align-items: center;
width: 100px;
height: 100px;
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;
@@ -37,7 +54,7 @@
<h1>Hamburger Morphing</h1>
<div id="divSvgOut"></div>
<div>
<button onclick="animateTo('burger')">Hamburger</button>
<button onclick="animateTo('burger')">Burger</button>
<button onclick="animateTo('x')">X</button>
<button onclick="animateTo('plus')">Plus</button>
<button onclick="animateTo('minus')">Minus</button>
@@ -45,134 +62,36 @@
<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>
</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>
let draw;
let line1;
let line2;
let line3;
let stroke = {
color: "#000",
width: 38,
linecap: "round",
linejoin: "round",
};
<script type="module">
import { HamburgerMorphing } from './hamburger.mjs';
const svgDrawBurger = () => {
draw = SVG().addTo("#divSvgOut").size("100px", "100px").viewbox(0, 0, 120, 120);
let hamburger;
line1 = draw.line(20, 20, 100, 19).fill("#fff").stroke(stroke);
line2 = draw.line(20, 60, 100, 60).fill("#fff").stroke(stroke);
line3 = draw.line(20, 100, 100, 101).fill("#fff").stroke(stroke);
};
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) {}
const animateTo = (shape) => {
if (hamburger) {
hamburger.animateTo(shape);
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 = () => {
setTimeout(() => {
const svgElement = document.querySelector('#divSvgOut svg');
if (svgElement) {
// 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>`;
if (hamburger) {
const svgCode = hamburger.getSvgCode();
document.getElementById('svgCode').value = svgCode;
}
}, 510); // Wait for animation to complete
@@ -183,39 +102,12 @@
document.getElementById('divSvgOut').innerHTML = svgCode;
};
const formatSvg = (svgString) => {
// Round decimal values to integers
svgString = svgString.replace(/(\d+\.\d+)/g, (match) => Math.round(parseFloat(match)));
// Make functions globally available for onclick handlers
window.animateTo = animateTo;
window.renderSvg = renderSvg;
// Simple XML formatter
let formatted = '';
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();
// Initialize the hamburger morphing
hamburger = new HamburgerMorphing('#divSvgOut');
</script>
</body>
</html>