Beispiel:Shape-Morphing-4.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 { 

width: 100%;
min-height: 240px;

} path { 

 fill: #c82f04;
 stroke: #333;
 stroke-width: 2;

}

  1. heart {
     marker-start: url(#markerKreis); marker-mid: url(#markerKreis); marker-end: url(#markerKreis);

} </style> 

 <title>Beispiel: Shape-Morphing 4</title>

</head>

<body> <svg viewBox="0 80 600 240"> <defs> 

     <marker id="markerKreis" markerWidth="6" markerHeight="6" refX="3" refY="3">
       <circle cx="3" cy="3" r="2"></circle>
     </marker>

</defs> <desc>a nearly perfect heart made of one line and two arcs</desc>

<path id="heart" d="M300,300 l-100,-100 a50,50 90 0,1 100,-75 a50,50 90 0,1 100,75 z"> 

 <animate attributeName="d" values="M300,300 l-100,-100 a50,50 90 0,1 100,-75 a50,50 90 0,1 100,75 z;
              M300,300 l-100,-100 a50,50 90 0,1 95,-75 a60,60 90 0,1 120,75 z;
              M300,300 l-100,-100 a50,50 90 0,1 100,-75 a50,50 90 0,1 100,75 z;
              M300,300 l-100,-100 a50,50 90 0,1 100,-75 a50,50 90 0,1 100,75 z;" dur="1s" repeatCount="indefinite">
 </animate>
 <animate attributeName="fill"
          values="#c82f04;hotpink;#c82f04"
          dur="1s"
          repeatCount="indefinite"/>

</path> </svg>


</body> </html>

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