Herzlich willkommen zum SELF-Treffen 2026
vom 24.04. – 26.04.2026
in Halle (Saale)
Beispiel:SVG-cogwheel-3.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">
<link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css">
<title>Zahnräder</title>
<style>
svg {
--rotation-duration: 5s;
--rotations: 2;
--lift: 350px;
width: min(800px, 100%);
}
.is-running #arrow,
.is-running #question {
display: none;
}
.animated {
transform-box: fill-box;
transform-origin: 50% 50%;
}
.ornament {
transform-origin: 0px 0px;
}
.is-running .animated,
.is-running .ornament {
animation: turn var(--rotation-duration) linear var(--rotations);
}
.is-running .animated.reverse,
.is-running .ornament.reverse {
animation: turn-rev var(--rotation-duration) linear var(--rotations);
}
@keyframes turn {from {transform: rotate(0deg)} to {transform: rotate(360deg)}}
@keyframes turn-rev {from {transform: rotate(0deg)}to{transform: rotate(-360deg)}}
.is-running #weightBody {
animation: weight-lift calc(var(--rotation-duration) * var(--rotations)) linear forwards;
}
.is-running #weightLine {
animation: rope-animation calc(var(--rotation-duration) * var(--rotations)) linear forwards;
}
@keyframes weight-lift {
from {transform: translateY(0)}
to {transform: translateY(calc(-1 * var(--lift)))}
}
@keyframes rope-animation {
from {transform: translateY(258px) scaleY(1) translateY(-258px)}
to {transform: translateY(258px) scaleY(0.4) translateY(-258px)}
}
</style>
</head>
<body>
<h1>Zahnräder</h1>
<p>Die blaue Kurbel wird im Uhrzeigersinn gedreht: Wird das Gewicht dadurch angehoben oder abgesenkt? Klicke auf die Taste: <button id="startBtn" type="button">Start</button></p>
<svg viewBox="0 0 2200 1870">
<defs>
<symbol id="gear" viewBox="0 0 447 447">
<path d="m 381,202 25,-4 7,1 33,12 v 25 l -33,12 -7,1 -25,-4 -10,39 23,9 6,4 22,27 -12,21 -35,-5 -6,-3 -20,-16 -28,28 16,20 3,6 5,35 -21,12 -28,-22 -3,-6 -10,-23 -38,10 4,25 -1,7 -12,33 h -25 l -13,-33 v -7 l 4,-25 -39,-10 -9,23 -4,6 -27,22 -21,-12 5,-35 3,-6 16,-20 -28,-28 -20,16 -6,3 -35,5 -12,-21 22,-27 6,-4 23,-9 -10,-39 -25,4 -7,-1 -33,-12 v -25 l 33,-12 7,-1 25,4 10,-39 -23,-9 -6,-4 -22,-27 12,-21 35,5 6,3 20,16 28,-28 -16,-20 -3,-6 -5,-35 21,-12 27,22 4,6 9,23 39,-10 -4,-25 V 34 L 211,1 h 25 l 12,33 1,7 -4,25 38,10 10,-23 3,-6 28,-22 21,12 -5,35 -3,6 -16,20 28,28 20,-16 6,-3 35,-5 12,21 -22,27 -6,4 -23,9 z" stroke="#333" stroke-width="2" style="stroke-width: 2;" fill="#c40000"/>
<circle cx="223" cy="224" r="100" fill="#aaa"/>
<circle cx="223" cy="224" r="20" fill="#333"/>
</symbol>
</defs>
<g transform="translate(1114,-16) rotate(15)">
<use href="#gear" class="animated" width="447" height="447"/>
</g>
<g transform="translate(1384 228)">
<use href="#gear" class="animated reverse" width="447" height="447"/>
</g>
<g transform="translate(1785,371) rotate(15)">
<use href="#gear" class="animated" width="447" height="447"/>
</g>
<g transform="translate(1720 809)">
<use href="#gear" class="animated reverse" width="447" height="447"/>
</g>
<g transform="translate(1786,1147) rotate(15)">
<use href="#gear" class="animated" width="447" height="447"/>
</g>
<g transform="translate(1385 1391)">
<use href="#gear" class="animated reverse" width="447" height="447"/>
</g>
<g transform="translate(1075,1240) rotate(15)">
<use href="#gear" class="animated" width="447" height="447"/>
</g>
<g transform="translate(636 1390)">
<use href="#gear" class="animated reverse" width="447" height="447"/>
</g>
<g transform="translate(316,1341) rotate(15)">
<use href="#gear" class="animated" width="447" height="447"/>
</g>
<g transform="translate(350 1017)">
<use href="#gear" class="animated reverse" width="447" height="447"/>
</g>
<g transform="translate(316,594) rotate(15)">
<use href="#gear" class="animated" width="447" height="447"/>
</g>
<g id="question" style="fill: #4dd100;">
<text style="font-family: sans-serif; font-size: 300px; font-weight: 700; text-anchor: middle;" x="1050" y="1034">?</text>
<polygon style="stroke: none;" points="983 718 1052 655 1119 718 1073 718 1073 779 1029 779 1029 718"/>
<polygon style="stroke: none;" points="984 1130 1052 1193 1120 1130 1075 1130 1075 1071 1029 1071 1029 1130"/>
</g>
<g id="weight">
<line id="weightLine" x1="1241" y1="258" x2="1245" y2="844" style="fill: none; stroke: #000; stroke-width: 4" vector-effect="non-scaling-stroke" transform-origin="0 0"/>
<circle cx="1272" cy="257" r="35"/>
<g id="weightBody" style="stroke: #000; fill: #7c7c7c">
<rect x="1232" y="833" width="24" height="24"/>
<path d="m 1180,857 h 130 l 50,203 h -230 z" style=" stroke-width: 1;"/>
</g>
</g>
<path id="arrow" d="M 72,670 C 37,337 306,86 633,239 l -5,-84 135,173 -201,63 45,-80 C 305,183 112,431 172,651 Z" style="stroke: none; fill: #12d8f6; "/>
<g id="crank" transform="translate(473 868)">
<g class="ornament" stroke-width="2">
<rect x="-32" y="-396" width="64" height="431" rx="30" fill="#13d8f6" stroke="#000"/>
<circle cx="0" cy="-360" r="52" fill="#007d90" stroke="#000"/>
<circle cx="0" cy="0" r="20" fill="#007d90" stroke="#000"/>
</g>
</g>
</svg>
</body>
<script>
document.addEventListener("DOMContentLoaded", () => {
const btn = document.getElementById("startBtn");
const weight = document.getElementById("weightBody");
const startAnimation = () => {
btn.disabled = true;
document.body.classList.remove("is-running");
requestAnimationFrame(() => {
requestAnimationFrame(() => {
document.body.classList.add("is-running");
});
});
};
weight.addEventListener("animationend", (e) => {
if (e.animationName !== "weight-lift") return;
btn.disabled = false;
document.body.classList.remove("is-running");
});
btn.addEventListener("click", startAnimation);
});
</script>
</html>
