Beispiel:Shape-Morphing-2.html

Aus SELFHTML-Wiki

Wechseln zu: Navigation, Suche

<!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:210px;

margin: 0 auto; } path { fill: gold; stroke: steelblue; stroke-width: 2; }

circle { fill: skyblue; stroke:steelblue; stroke-width: 2;

}

 </style>
 <title>Shape-Morphing 2</title>

</head>

<body> <svg viewBox="0 0 600 200"> <path id="form"> <animate attributeName="d" dur="5s" values="M 100,10 0,100 70,50 130,150 200,100 z; M 100,10 0,100 70,150 130, 50 200,100 z; M 100,10 0,100 70,50 130,150 200,100 z" repeatCount="indefinite" /> </path> <line id="L" x1="70" x2="70" y2="180" stroke="#c32e04" stroke-width="6"> <animate attributeName="y1" dur="5s" values="65;165;65" repeatCount="indefinite" /> </line> <line id="L" x1="130" x2="130" y2="180" stroke="#c32e04" stroke-width="6"> <animate attributeName="y1" dur="5s" values="165;65;165" repeatCount="indefinite" /> </line> <g> <animateTransform attributeName="transform" type="translate" dur="5s" values="0,50;0,150;0,50 " repeatCount="indefinite" /> <circle cx="70" cy="0" r="4" /> </g> <g> <animateTransform attributeName="transform" type="translate" dur="5s" values="0,150;0,50;0,150 " repeatCount="indefinite" /> <circle cx="130" cy="0" r="4" /> </g> </svg>

</body> </html>

Abgerufen am 7.08.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:Shape-Morphing-2.html"