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>
