Beispiel:SVG-Rube-Goldberg-4.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">
<title>Pendel</title>
<style>
@keyframes swing {
0% {
rotate:-30deg;
}
100% {
rotate: 30deg;
}
}
#pendulum #thread {
fill: none;
stroke: steelBlue;
stroke-width: 2;
}
#pendulum #ball {
fill: steelBlue;
stroke: black;
stroke-width: 2;
}
#pendulum {
animation: swing 2s infinite alternate ease-in-out;
rotate: -30deg;
}
</style>
</head>
<body>Pendel
<svg width="800" height="600" viewBox="0 0 800 600"> <g transform="translate(200,100)"> <g id="pendulum"> <line id="thread" y2="200" /> <circle id="ball" cx="0" cy="200" r="30" /> <circle id="center" r="3" />
</g>
</g> </svg> </body> </html
