Beispiel:SVG-Shape-Morphing-02.html
Aus SELFHTML-Wiki
<!DOCTYPE html> <html lang="de"> <head>
<meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:SELFHTML-Beispiel-Grundlayout.css"> <style>
path {
fill: #dfac20; stroke: #337599; stroke-width: 3;
}
</style> <title>Shape-Morphing 2</title>
</head>
<body> <svg viewBox="0 0 650 260"> <path id="pentagon" d="M50,200 l-15,-50 l-15,-50 l40,-30 l40,-30 l40,30 l40,30 l-15,50 l-15,50 l-51,0 l-51,0">
<animate attributeName="d" values="M50,200 l-15,-50 l-15,-50 l40,-30 l40,-30 l40,30 l40,30 l-15,50 l-15,50 l-51,0 l-51,0; M50,200 l18,-60 l-48,-40 l60,0 l20,-60 l20,60 l60,0 l-48,38 l17,60 l-49,-38 l-49,38; M50,200 l-15,-50 l-15,-50 l40,-30 l40,-30 l40,30 l40,30 l-15,50 l-15,50 l-51,0 l-51,0;" dur="2s" repeatCount="indefinite" />
</path>
<path id="hexagon" d="M250,200 l-40,-80 l40,-80 h100 l40,80 l-40,80Z">
<animate attributeName="d" values="M250,200 l-40,-80 l40,-80 h100 l40,80 l-40,80Z; M230,200 l0,-80 l0,-80 h140 l0,80 l0,80Z; M250,200 l-40,-80 l40,-80 h100 l40,80 l-40,80Z;" begin="hexagon.mouseover" end="hexagon.click" dur="2s" repeatCount="indefinite" />
</path>
</svg>
</body> </html>