Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026
in Halle (Saale)
Beispiel:SVG-Rube-Goldberg-1.html
Aus SELFHTML-Wiki
<!DOCTYPE html>
<html>
<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">
<title>Rube-Goldberg-Machine von Alberto Pacheco, 2007</title>
<style>
.wood {
fill: #996600;
stroke: #663300;
stroke-width: 2;
}
.domino {
fill: #444444;
stroke: #000;
stroke-width: 1;
}
#ramp {
fill: #009;
stroke: black;
stroke-width: 2;
}
circle {
stroke: black;
stroke-width: 2;
}
#ballBlue {
fill: #337599;
}
</style>
</head>
<body>
<svg width="800" height="600" viewBox="-5 0 795 600">
<path id="ramp" d='M0,0 L100,30 L0,60 z' transform='translate(36,90),rotate(17)' >
<animateTransform attributeName='transform' type='scale' fill='freeze' begin='1.5s' dur='0.3s' from='1,1' to='1,.4' additive='sum' />
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='1.5s' dur='0.3s' from='1' to='.4' additive='sum' />
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='1.5s' dur='0.3s' from='0,0' to='0,80' additive='sum' />
<animateTransform attributeName='transform' type='rotate' fill='freeze' begin='1.5s' dur='0.3s' from='0' to='-17' additive='sum' />
</path>
<rect id="tableTopLeft" class="wood" x='0' y='150' width='250' height='15' rx='' ry='' >
</rect>
<rect x='10' y='30' width='20' height='100' rx='4' ry='4' fill='#660000' transform='translate(0,140),rotate(180)' >
<animateTransform attributeName='transform' type='rotate' fill='freeze' begin='1s' dur='0.7s' from='0' to='98' additive='sum' />
</rect>
<!-- Error: %% Libro -->
<rect id="tableTopRight" class="wood" x='500' y='180' width='200' height='15' rx='' ry='' />
<path id="paperPlane" d='M20,4 L125,19 L0,57 L5,34 L13,30 L9,25 z M9,25 L125,19 L5,34 M13,30 L125,19 L98,32 L67,37' fill='white' transform='translate(120,90)' stroke='black' stroke-width='2px'>
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='1.7s' dur='1s' from='0,0' to='400,40' additive='sum' />
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='2.7s' dur='0.5s' from='0,0' to='40,0' additive='sum' />
</path>
<circle id="ballBlue" cx='670' cy='150' r='30'>
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='2.7s' dur='0.3s' from='0,0' to='40,0' additive='sum' />
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='3s' dur='0.2s' from='0,0' to='22,22' additive='sum' />
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='3.2s' dur='0.7s' from='0,0' to='20,240' additive='sum' />
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='3.9s' dur='0.3s' from='0,0' to='0,60' additive='sum' />
</circle>
<!-- Error: %% Pelota azul oscuro -->
<circle id="wippeAuflage" cx='641' cy='492' r='15' fill='#666666' />
<path id="wippe" class="wood" d='M-150,-5 L150,-5 L150,5 L-150,5 z' transform='translate(640,470),rotate(-10)' >
<animateTransform attributeName='transform' type='rotate' fill='freeze' begin='3.9s' dur='0.3s' from='0' to='30' additive='sum' />
</path>
<circle id="ballGreen" cx='500' cy='481' r='7' fill='#5a9900' >
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='3.9s' dur='0.3s' from='0,0' to='40,-180' additive='sum' />
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='4.2s' dur='0.4s' from='0,0' to='40,380' additive='sum' />
</circle>
<rect id="tableCentral" class="wood" x='0' y='0' width='550' height='15' transform='translate(40,360),rotate(-10)' />
<circle cx='540' cy='270' r='2' />
<rect id="woodleft" class="wood" x='0' y='400' width='5' height='100' />
<circle id="ballOrange" cx='546' cy='260' r='10' fill='#df6c20' >
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='4.25s' dur='0.1s' from='0,0' to='-9,-5' additive='sum' />
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='4.35s' dur='0.1s' from='0,0' to='-9,8' additive='sum' />
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='4.45s' dur='1.5s' from='0,0' to='-495,88' additive='sum' />
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='5.95s' dur='0.05s' from='0,0' to='-5,5' additive='sum' />
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='6s' dur='0.2s' from='0,0' to='-11,60' additive='sum' />
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='6.2s' dur='0.2s' from='0,0' to='12,55' additive='sum' />
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='6.4s' dur='0.8s' from='0,0' to='-40,200' additive='sum' />
</circle>
<rect id="dominoTable" class="wood" x='40' y='480' width='150' height='15' />
<rect class="domino" x='0' y='0' width='8' height='28' rx='3' ry='3' transform='translate(50,480),rotate(180)' >
<animateTransform attributeName='transform' type='rotate' fill='freeze' begin='6.4s' dur='5.2s' from='0' to='180' additive='sum' />
</rect>
<rect class="domino" x='0' y='0' width='8' height='28' rx='3' ry='3' transform='translate(70,480),rotate(180)' >
<animateTransform attributeName='transform' type='rotate' fill='freeze' begin='6.5s' dur='0.2s' from='0' to='70' additive='sum' />
</rect>
<rect class="domino" x='0' y='0' width='8' height='28' rx='3' ry='3' transform='translate(90,480),rotate(180)' >
<animateTransform attributeName='transform' type='rotate' fill='freeze' begin='6.6s' dur='0.2s' from='0' to='70' additive='sum' />
</rect>
<rect class="domino" x='0' y='0' width='8' height='28' rx='3' ry='3' transform='translate(110,480),rotate(180)' >
<animateTransform attributeName='transform' type='rotate' fill='freeze' begin='6.7s' dur='0.2s' from='0' to='70' additive='sum' />
</rect>
<rect class="domino" x='0' y='0' width='8' height='28' rx='3' ry='3' transform='translate(130,480),rotate(180)' >
<animateTransform attributeName='transform' type='rotate' fill='freeze' begin='6.8s' dur='0.2s' from='0' to='70' additive='sum' />
</rect>
<rect class="domino" x='0' y='0' width='8' height='28' rx='3' ry='3' transform='translate(150,480),rotate(180)' >
<animateTransform attributeName='transform' type='rotate' fill='freeze' begin='6.9s' dur='0.2s' from='0' to='70' additive='sum' />
</rect>
<rect class="domino" x='0' y='0' width='8' height='28' rx='3' ry='3' transform='translate(170,480),rotate(180)' >
<animateTransform attributeName='transform' type='rotate' fill='freeze' begin='7s' dur='0.25s' from='0' to='90' additive='sum' />
</rect>
<rect class="domino" x='0' y='0' width='8' height='28' rx='3' ry='3' transform='translate(190,480),rotate(180)' >
<animateTransform attributeName='transform' type='translate' fill='freeze' begin='7.1s' dur='0.2s' from='0,0' to='-10,-5' additive='sum' />
<animateTransform attributeName='transform' type='rotate' fill='freeze' begin='7.1s' dur='0.2s' from='0' to='180' additive='sum' />
<animate attributeName='y' fill='freeze' begin='7.4s' dur='0.2s' from='0' to='46' />
</rect>
<rect id="LampTable" class="wood" x='170' y='560' width='300' height='15' />
<line id="cable" x1='183' y1='555' x2='380' y2='555' fill='black' stroke='black' stroke-width='3px'/>
<rect x='183' y='540' width='15' height='20' rx='' ry='' fill='#999999' stroke='black' stroke-width='2px'>
</rect>
<!-- Error: %% Conector 1 de la lampara -->
<rect x='210' y='540' width='15' height='20' rx='' ry='' fill='#999999' stroke='black' stroke-width='2px'>
</rect>
<!-- Error: %% Conector 2 de la lampara -->
<rect x='380' y='480' width='50' height='80' rx='6' ry='6' fill='#33cc99' stroke='black' stroke-width='2px'>
</rect>
<!-- Error: %% Cuerpo de la lampara -->
<rect x='400' y='470' width='10' height='10' rx='3' ry='3' fill='black'>
</rect>
<!-- Error: %% Base del foco de la lampara -->
<circle cx='405' cy='460' r='12' fill='#ffff00'>
</circle>
<!-- Error: %% El foco de la lampara -->
<path id="lampShade" d='M40,0 L100,0 L140,80 L0,80 z' fill='#337599' opacity='0.7' transform='translate(335,420)' stroke='black' stroke-width='2px'>
<animate attributeName='opacity' fill='freeze' begin='7.6s' dur='0.2s' from='0.75' to='0.5' />
<animate attributeName='fill' fill='freeze' begin='7.6s' dur='0.2s' from='#337599' to='#fdfcf3' />
</path>
</svg>
<p>SLOGO ver 0.9, Alberto Pacheco, alberto@acm.org, 2007</p>
</body>
</html>
