Beispiel:SVG-Rube-Goldberg-5.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>Kugelstoßpendel</title> <style>
line {
stroke-width: 2px;
stroke: steelBlue;
}
circle {
fill: steelBlue;
stroke: black;
}
.left{
transform-origin: 120px 5px;
animation: leftSwing 4s infinite;
}
.right{
transform-origin: 280px 5px;
animation: rightSwing 4s infinite;
}
@keyframes leftSwing{
0% {
transform: rotate(0deg);
animation-timing-function: ease-out;
}
25% {
transform: rotate(30deg);
animation-timing-function: ease-in;
}
50%,
100% {
transform: rotate(0deg);
}
}
@keyframes rightSwing{
0%,
100% {
transform: rotate(0deg);
}
50% {
transform: rotate(0deg);
animation-timing-function: ease-out;
}
75% {
transform: rotate(-30deg);
animation-timing-function: ease-in;
}
}
</style> </head> <body> <svg viewBox="0 0 400 180">
<g class="left"> <line x1="120" y1="5" x2="120" y2="140"/> <circle cx="120" cy="155" r="20"/> </g> <line x1="160" y1="5" x2="160" y2="140"/> <circle cx="160" cy="155" r="20"/> <line x1="200" y1="5" x2="200" y2="140"/> <circle cx="200" cy="155" r="20"/> <line x1="240" y1="5" x2="240" y2="140"/> <circle cx="240" cy="155" r="20"/> <g class="right"> <line x1="280" y1="5" x2="280" y2="140"/> <circle cx="280" cy="155" r="20"/> </g> <line style="stroke-width: 4px;" x1="20" y1="5" x2="380" y2="5"/> <circle cx="120" cy="5" r="2" /> <circle cx="160" cy="5" r="2" /> <circle cx="200" cy="5" r="2" /> <circle cx="240" cy="5" r="2" /> <circle cx="280" cy="5" r="2" />
</svg> </body> </html>
