Beispiel:Shape-Morphing-ABC.html
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <style>
svg { width: 10em; aspect-ratio: 1; border: thin dotted; }
path { fill: none; stroke: steelBlue; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
</style> <script>
document.addEventListener('DOMContentLoaded', function () { const forms = document.querySelectorAll("defs path"); const letter = document.querySelector("#letter"); const morph = document.querySelector("#morph");
const caption = document.querySelector("#caption"); const previous = document.querySelector("#previous"); const next = document.querySelector("#next");
let current = 0;
function update() {
const form = forms[current];
caption.textContent =
`${form.dataset.title} – ${form.dataset.lang}`;
previous.disabled = current === 0; next.disabled = current === forms.length - 1;
}
function morphTo(index) {
const from = forms[current].getAttribute("d");
const to = forms[index].getAttribute("d");
morph.setAttribute("values", `${from};${to}`);
morph.beginElement();
current = index; update();
}
previous.addEventListener("click", () => {
if (current > 0) {
morphTo(current - 1);
}
});
next.addEventListener("click", () => {
if (current < forms.length - 1) {
morphTo(current + 1);
}
});
letter.setAttribute("d", forms[0].getAttribute("d")); update(); }); </script>
<title>Von der Hieroglyphe zum Buchstaben</title>
</head>
<body> <figure class="letter-morph"> <svg viewBox="0 0 64 64"> <defs>
<path data-title="Ochsenkopf" data-lang="Proto-Semitisch" id="proto"
d="m12,7 c -3,14 45,20 40,1 m-22,12 l-18,33 5,5 30-20 0,-20 m-13,8 l0,3"/>
<path data-title="Aleph" data-lang="Phönizisch" id="phoen"
d="m12,7 c -0,0 45,40 45,40 m-25,-35 l-15,46 0,0 40-28 0,0 m-0,0 l0,0"/>
<path data-title="Alpha" data-lang="Altgriechisch" id="greek"
d="m42,37 c -0,0 0,0 -21,12 m-4,10 l16,-47 0,0 16,46 0,0 m-0,0 l0,0"/>
<path data-title="A" data-lang="Latein" id="latin"
d="m42,37 c -0,0 0,0 -17,0 m-8,21 l16,-46 0,0 16,46 0,0 m-0,0 l0,0"/> </defs>
<path id="letter" d="">
<animate id="morph"
attributeName="d"
dur="800ms"
begin="indefinite"
fill="freeze"/>
</path> </svg> <figcaption id="caption"></figcaption> </figure>
<button id="previous">◀ Zurück</button> <button id="next">Weiter ▶</button>
</svg>
</body> </html>
