Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026 in Halle (Saale)

Rube-Goldberg-Maschinen

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

Der Ausdruck Rube-Goldberg-Maschine geht auf den US-amerikanischen Cartoonisten Reuben „Rube“ L. Goldberg zurück, der Comics über einen Professor Lucifer Gorgonzola Butts zeichnete, der unnötig komplizierte Maschinen konstruierte, bei denen eine eigentlich triviale Aktion durch eine Kette nacheinander ablaufender Aktionen ausgelöst wird.[1]

Auch im Film "Zurück in die Zukunft" gibt es in der Eingangsszene einen solchen Mechanismus, mit dem Doc Emmet Brown seinen Hund während seiner Abwesenheit allmorgendlich mit Futter versorgt.

Dieser Artikel stellt vor, wie man solche Maschinen mit SVG und Web Animations erstellen und dann kombinieren kann.

Das Vorbild

2007 stellte Alberto Pacheco vom Chihuahua Institute of Technology den Interpreter SLOGO vor, der aus PHP SVG-Markup ausgab. Berühmtestes Beispiel war die SVG-Animation einer Rube-Goldberg-Maschine.[2]

Rube-Goldberg-Machine von Alberto Pacheco, 2007 ansehen …

Starte die Animation, indem du die Seite neu lädst.

Die Animationen werden mit SMIL realisiert, was damals ungeahnte Möglichkeiten bot. Allerdings sind die Animation im SVG-Markup integriert.

Im Folgenden sollen die Animationen mit Web Animations neu aufgebaut und dann snychronisiert werden.

Warum???


Einfache Maschinen

Hinter der Idee der Rube-Goldberg-Maschinen steckt die Anwendung Einfacher Maschinen[3], die zur Umwandlung einer Kraft dienen, um diese möglichst zweckmäßig zur Verrichtung von Arbeit einzusetzen. Beispiele für einfache Maschinen sind das Seil, der Hebel, die Rolle und die schiefe Ebene (Keil), die in irgendeiner Kombination in fast jeder Kraftmaschine vorkommen.

Die schiefe Ebene

Eine schiefe, schräge oder geneigte Ebene ist in der Mechanik eine ebene Fläche, die gegen die Horizontale geneigt ist. Sie wird verwendet, um den Kraftaufwand zur Höhenveränderung einer Masse zu verringern – der Arbeitsaufwand bleibt jedoch unverändert.

Bei Kugelbahnen und Rube-Goldberg-Maschinen wird sie meist zum Herabrollen verwendet.


Schiefe Ebene ansehen …
@keyframes roll {
    0% { translate: 0 0;          animation-timing-function: linear; }
   80% { translate: 600px -200px; animation-timing-function: ease-in; }
  100% { translate: 0 0; }
}
      
circle {
  animation: roll 6s infinite ease-in;	
}

In diesem Beispiel wird die Kugel (ein circle-Element) zuerst langsam linear hochgeschoben und rollt dann von oben immer schneller (ease-in) nach unten. Dies wird über eine Verschiebung der Kugel mit transform:translate() erreicht.

Beachte: Während das SVG-transform-Attribut von dimensionslosen Einheiten ausgeht und einen reinen Zahlenwert verarbeiten kann, benötigt die CSS-transform-Eigenschaft eine Einheit - hier px.

Hebel

Ein Hebel ist in der Physik und Technik ein mechanischer Kraftwandler bestehend aus einem starren Körper, der um einen Drehpunkt drehbar ist.

Da die folgende Animation aus drei Teilschritten besteht, müssen die einzelnen Schritte getaktet werden. Mit custom properties kann die Dauer und die Anteile der drei Teilanimationen zentral festgelegt werden, daraus werden für die Teile Dauer und Verzögerung berechnet.

  1. die Box 1 fliegt von oben auf die Wippe
  2. sobald sie auf dem Hebel liegt, macht sie eine Kreisbewegung mit dem Drehpunkt der Wippe als Zentrum
  3. die rechte Box 2 hebt sich zusammen mit der Wippe und fliegt dann weiter nach oben
Zweiseitiger Hebel ansehen …
svg {
  --total-duration: 3s;
  --step1-ratio: 0.32;
  --step2-ratio: 0.2;
  --step3-ratio: 0.48;

  --step1-duration: calc(var(--total-duration) * var(--step1-ratio));
  --step2-duration: calc(var(--total-duration) * var(--step2-ratio));
  --step3-duration: calc(var(--total-duration) * var(--step3-ratio));
  --step2-delay: var(--step1-duration);
  --step3-delay: calc(var(--step1-duration) + var(--step2-duration));

  --pivot-x: 300px;
  --pivot-y: 300px;
}

#lever {
  transform: translate(var(--pivot-x), var(--pivot-y)) rotate(20deg);
  transform-origin: 0 0;
}
@keyframes leverTurn {
  0%   { transform: translate(var(--pivot-x), var(--pivot-y)) rotate(20deg); }
  100% { transform: translate(var(--pivot-x), var(--pivot-y)) rotate(-20deg); }
}

#box1 {
  transform: translate(84px, -50px) rotate(20deg);
}
@keyframes box1Motion {
  0% { transform: translate(84px, -50px) rotate(20deg);}
  32% { transform: translate(var(--pivot-x), var(--pivot-y)) rotate(20deg) translate(-225px, -26px); }
  52%, 100% { transform: translate(var(--pivot-x), var(--pivot-y)) rotate(-20deg) translate(-225px, -26px); }
}

Pendel

Eine andere Form der Rotation sind Pendel.

CSS-Animation Pendel ansehen …
 @keyframes swing {
 	0% {
 		rotate: -30deg;
 	}
 	100% {
 		rotate: 30deg;
 	}
 }
    
#pendulum {
    animation: swing 2s infinite alternate ease-in-out;	 
    rotate: -30deg;           
}

Das Pendel besteht aus einer Gruppierung mit einem Ball, der an einem Faden hängt. Auf einen externen Drehpunkt wird verzichtet, das Pendel rotiert um die Aufhängung des Fadens, dem Ursprung (0|0).

Pendel aus Grundformen ansehen …
<g id="pendulum">
    <line id="thread" y2="200"/>
    <circle id="ball" cx="0" cy="200" r="30" />
</g>

Das line-Element enthält nur ein Attribut für den Y-Wert des Endpunkts, für alle anderen Werte wird 0 angenommen.

Das Pendel wird von einer weiteren Gruppierung umschlossen, um es mit einem transform-Attribut an den richtigen Platz zu verschieben.

Kugelstoßpendel

Ein Kugelstoßpendel ist eine Anordnung von identischen elastischen Kugeln, die in einer Reihe aufgehängt sind.Wenn eine der äußeren Kugeln abgehoben wird und gegen die Reihe der anderen Kugeln zurückfällt, bewirkt der Anprall, dass genau eine Kugel gegenüberliegend abgestoßen wird, während die anderen Kugeln in Ruhe bleiben. Pendelt diese Kugel zurück und prallt auf, wird durch den Stoß wieder die äußerste Kugel auf der anderen Seite abgestoßen – das System „schwingt“.

Auch dies lässt sich mit CSS animieren, aufgeteilt in Viertel:

Das linke Pendel startet bei 0% plötzlich (ease-out) nach außen bis es langsam stehen bleibt, bei 25% schwingt es langsam (ease-in) zurück bis es abrupt stoppt. Das rechte Pendel startet in diesem Moment bei 50% schnell (ease-out) nach rechts und wird langsamer, bei 75% schwingt es langsam (ease-in) wieder zurück und beschleunigt, bis es anschlägt.

Kugelstoßpendel ansehen …
 @keyframes leftSwing {
    0%  { transform: rotate(0deg); animation-timing-function: ease-out;
    }
    25% { transform: rotate(30deg); animation-timing-function: ease-in;
    } …
  }
  @keyframes rightSwing { …
    50% { transform: rotate(0deg); animation-timing-function: ease-out;
    }
    75% { transform: rotate(-30deg); animation-timing-function: ease-in;
    }
  }

Davon abgeleitet lassen sich auch je 2 Pendel bewegen:

Mit transform-origin wird der Ursprung für Transformationen eines Elements zusätzlich für die beiden inneren Pendel definiert, die Animation ist die selbe wie für die beiden äußeren.

Kugelstoßpendel mit je 2 sich bewegenden Pendeln ansehen …
 .left2 {
  transform-origin: 160px 5px;
}
.left1, 
.left2 {
  animation: leftSwing 4s infinite;
}

Zahnräder

Zahnräder (englisch: cog wheels) sorgen ähnlich wie Flaschenzüge für die Über- oder Untersetzung von Bewegung. Mit SVG lässt sich der Effekt eines drehenden Zahnrads leicht erzeugen:[4]

Zahnräder mit stroke-dashoffset ansehen …
<circle cx="140" cy="100" r="50" stroke-dasharray="12,12">
	<animate attributeName="stroke-dashoffset" repeatCount="indefinite" values="24;1" dur="0.5s"  />
</circle>

<circle cx="250" cy="100" r="50" stroke-dasharray="12,12" >
	<animate attributeName="stroke-dashoffset" repeatCount="indefinite" values="12;36" dur="0.5s"  />
</circle>

In diesem Beispiel drehen sich aber nicht die Räder selbst, sondern nur die Randlinie (stroke). Selbst diese wird nicht rotiert, sondern verändert nur ihre Strichelung. Besser wäre es natürlich, wenn sich das gesamte Zahnrad drehen würde.


Peter Collingridge schuf Zahnräder, die er dann mit animateTransform um sich selbst rotieren ließ.[5]. Wir nehmen seine Idee auf, zentrieren jedoch alle Zahnräder um den Ursprung (0|0), was eine spätere Drehung vereinfacht und verschieben sie erst nach der Rotation:

komplexere Zahnräder ansehen …
svg {
  --ani-duration:20s;
}  

svg:hover .animated {
    animation: turn var(--ani-duration) infinite linear;
}

@keyframes turn {
    0% {transform: rotate(0deg);}
  100% {transform: rotate(360deg);}
}

#gear2 .animated {
	animation-duration: calc(var(--ani-duration) * 0.25);
	animation-direction: reverse;
}

Jedes Zahnrad besteht aus einer Gruppierung, die das um den Ursprung zentrierte Zahnrad als path-Element und ein circle als Radnabe enthält. Diese Gruppierung wird dann mit einer SVG-Transformation an die passende Stelle verschoben.

Beachte: Eine Verschiebung an den richtigen Ort und eine dort folgende Rotation für das gleiche Element sind nicht möglich, weil die erste Transformation von der zweiten überschrieben würde. Es wäre möglich Verschiebung und Rotation innerhalb der @keyframes-Regel zu kombinieren, dann wäre sie aber nicht mehr universell einsetzbar.

Über Klassen werden die path-Elemente der Zahnräder farbig formatiert und animiert. Für jedes rotierende Element muss die richtige Umdrehungsdauer festgelegt werden. Hier wird die Variable --ani-duration verwendet und mit der calc()-Funktion passend berechnet.

Empfehlung: Das Zeichnen von Zahnrädern ist nicht trivial - da die Zähne unterschiedlich großer Zahnräder ja eineinander greifen müssen.
Es wäre zu überlegen, mit JavaScript einen gegebenen Zahnrad-Radius mit passenden Zähnen zu berechenen und ein path-Element zu generieren. Über den Radius kann dann der Umfang und so die nötige Drehgeschwindigkeit für jedes Zahnrad berechnet werden.[6]

Zahnräder optimiert für einfache Verwendung.

Hier noch eine Variante, welche die Verwendung möglichst vereinfacht:

  • Das Zahnrad wird nur 1 Mal gezeichnet und als Symbol definiert.
  • Dieses Zahnrad besitzt 12 Zähne für die einfache Teilung von 360 Grad.
  • Jede Verwendung (use) des Zahnrades wird in eine Gruppe gekapselt, damit diese in grafischen Editoren per Maus bewegt werden kann.
  • Diese Gruppe um jedes 2. Zahnrad wird 15 Grad gedreht, damit die Zähne ineinander passen.
einfachere Zahnräder ansehen …
<g transform="matrix(0.966, 0.258, -0.258, 0.966, 1114, -16)">
  <use href="#gear" class="animated" width="447" height="447"/>
</g>

Flaschenzug

Diese Seilzug-Animation veranschaulicht die Bewegung durch rotierende Räder und wandernde Muster auf dem Seil. Damit die Muster auf den 5 Seil-Teilstücken zusammenpassen, habe ich die 5 Variablen "--phase_…" definiert: Diese manipulierte ich, bis die Darstellung in Chrome und Firefox (Safari interpretiert die Anweisungen anders) sauber aussah.

Seilzug Animation ansehen …
svg {
  --hub: 80px;
  --dauer: 4s;
  --drehwinkel: 90deg;
  --seil_dicke: 8;
  
  --seil_farbe: #bb6f27;
  --seil_hell: #dfa873;
  --rolle: steelblue;
  --beschriftung: red;
  
  --muster_strich: 12;
  --muster_luecke: 10;
  
  --phase_oben_fest: 5px;
  --phase_bogen_unten: 10px;
  --phase_mitte: 1px;
  --phase_bogen_oben: 14px;
  --phase_ende: 8px;
}

Ideen

  • Gewicht an Seil
  • Schere schneidet Seil
  • Kerze brennt (https://codepen.io/akhil_001/pen/mzNQoM)
  • Becher – Wasser – Gewicht
  • Blasebalg – Segelboot / Ball
  • Archimedische Schraube
  • Gaußsche Kanone / Impulskanone
  • Mausefalle / Katapult

Automaten des Heron

Die Automaten des Heron von Alexandria (1. Jh. n. Chr.) wirkten auf die Zeitgenossen wie Magie, wenn sich Tempeltüren vor einer Feier wie von Geisterhand öffneten.

Dabei waren sie technische Geräte, die auf physikalischen Prinzipien basierten und mehrere „einfache Maschinen“ kombinierten.

Weblinks

  1. ↑ Wikipedia: Rube-Goldberg-Maschine
  2. ↑ SLOGO: A Vector Graphic Application Prototyping Language von Alberto Pacheco, Instituto Tecnológico de Chihuahua
  3. ↑ Wikipedia: Einfache Maschine
  4. ↑ cs.sru.edu: Timing von David Dailey, 2011
  5. ↑ Peter Collingridge: SVG animation: Rotating elements Zahnräder erzeugen und rotieren
  6. ↑ MSDN SVG-Animation für Anfänger

Abgerufen am 1.02.2026
von "http://wiki.selfhtml.org/wiki/Rube-Goldberg-Maschinen"