Beispiel:Shape-Morphing-1.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">
<style>svg {
min-height:250px; margin: 0 auto;
} path { fill: gold; stroke: steelblue; stroke-width: 2; }
</style> <title>Shape-Morphing 1</title>
</head>
<body> <svg viewBox="0 -20 400 180"> <path id="pentagon" d="M100,150 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="M100,150 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;
M100,150 l18,-60 l-48,-40 l60,0 l20,-60 l20,60 l60,0 l-48,38 l17,60 l-49,-38 l-49,38;
M100,150 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"></animate>
</path> </svg>
</body> </html>
