Beispiel:SVG-Shape-Morphing-CSS-2.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:Grundlayout.css">
<style>
#heart {
fill: #c82f04;
stroke: #333;
stroke-width: 3;
d: path('M300,230 l-100,-100 a50,50 90 0,1 100,-75 a50,50 90 0,1 100,75 z');
}
@media (prefers-reduced-motion: no-preference) {
#heart {
animation: heartbeat 1s infinite;
}
}
@keyframes heartbeat {
0% {
d: path('M300,230 l-100,-100 a50,50 90 0,1 100,-75 a50,50 90 0,1 100,75 z');
}
33% {
d: path('M300,230 l-100,-100 a50,50 90 0,1 95,-75 a60,60 90 0,1 120,75 z');
}
66% {
d: path('M300,230 l-100,-100 a50,50 90 0,1 100,-75 a50,50 90 0,1 100,75 z');
}
100% {
d: path('M300,230 l-100,-100 a50,50 90 0,1 100,-75 a50,50 90 0,1 100,75 z');
}
}
</style>
<title>Shape-Morphing 7</title>
</head>
<body>
<svg viewBox="0 0 600 250">
<rect width="100%" height="100%" style="fill:none;stroke:#132c39; stroke-width:1" />
<desc>a nearly perfect heart made of one line and two arcs</desc>
<path id="heart"/>
</svg>
<p>Dieses Beispiel funktioniert in Chrome, Edge, Opera und Firefox 97+, aber (noch) <strong style="color:#c82f04">nicht</strong> im Safari!</p>
</body>
</html>
