Beispiel:SVG-cogwheel-2.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!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>Zahnräder</title>

<style> svg { 

 --ani-duration: 20s;

}

svg:hover .animated { 

   animation: turn var(--ani-duration) infinite linear;

}

@keyframes turn { 

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

}

  1. gear2 .animated {
 animation-duration: calc(var(--ani-duration) * .25);
 animation-direction: reverse;

}

  1. gear3 .animated {
 animation-duration: calc(var(--ani-duration) * .5);

}

  1. gear4 .animated {
 animation-duration: calc(var(--ani-duration) * .375);
 animation-direction: reverse;

}

  1. gear5 .animated {
 animation-duration: calc(var(--ani-duration) * .5);

}

.wood { 

 fill: #996600;
 stroke: #663300;
 stroke-width: 2;

}

.box { 

 fill: var(--accent1color);
 stroke: #333;
 stroke-width: 2;

}

marker, marker path { 

 fill: var(--accent3color);
 stroke: var(--accent3color);
 stroke-width: 1;
 orient: auto;

}

  1. arrow {
 fill: none;
 stroke: var(--accent3color);
 stroke-width: 5;

}

svg { 

 --bgcolor: #fff;
 --primarycolor: #337599;
 --accent1color: gold;
 --accent2color: #c82f04;
 --accent3color: #8db243;

} </style> </head> <body>

Zahnräder

In welche Richtung dreht sich das rote Zahnrad? Bewege die Maus über die Zahnräder!

<svg viewBox="-30 -20 720 320">

<defs> 

 <marker id="markerPfeil" markerWidth="13" markerHeight="13" refx="2" refy="4" orient="auto">
   <path d="M2,2 v4 l4,-2z " />
 </marker>

</defs>

<rect id="frame" x="0" y="0" height="100%" width="100%" style="fill:none;stroke:none;stroke-width:1;"/>

<g id="gear1" transform="translate(150,150) scale(1.30,1.30)" > 

 <path class="wood animated" d="m 73.156,-2.845 0.58,-0.023 2.617,0.368 3.21,0.999 0,3.002 -3.21,0.999 -2.617,0.368 -0.58,-0.023 -0.255,3.883 0.578,0.053 2.548,0.707 3.052,1.409 -0.392,2.977 -3.313,0.57 -2.644,0.024 -0.571,-0.098 -0.759,3.816 0.565,0.128 2.434,1.033 2.842,1.795 -0.777,2.901 -3.359,0.133 -2.624,-0.322 -0.554,-0.171 -1.251,3.684 0.544,0.201 2.278,1.342 2.583,2.151 -1.149,2.774 -3.347,-0.307 -2.56,-0.661 -0.527,-0.243 -1.72,3.49 0.513,0.27 2.083,1.628 2.28,2.47 -1.501,2.6 -3.279,-0.741 -2.451,-0.99 -0.491,-0.309 -2.161,3.235 0.473,0.335 1.853,1.886 1.939,2.746 -1.828,2.382 -3.154,-1.162 -2.302,-1.301 -0.446,-0.371 -2.565,2.925 0.426,0.394 1.591,2.112 1.563,2.975 -2.123,2.123 -2.975,-1.563 -2.112,-1.591 -0.394,-0.426 -2.925,2.565 0.371,0.446 1.301,2.302 1.162,3.154 -2.382,1.828 -2.746,-1.939 -1.886,-1.853 -0.335,-0.473 -3.235,2.161 0.309,0.491 0.99,2.451 0.741,3.279 -2.6,1.501 -2.47,-2.28 -1.628,-2.083 -0.27,-0.513 -3.49,1.72 0.243,0.527 0.661,2.56 0.307,3.347 -2.774,1.149 -2.151,-2.583 -1.342,-2.278 -0.201,-0.544 -3.684,1.251 0.171,0.554 0.322,2.624 -0.133,3.359 -2.901,0.777 -1.795,-2.842 -1.033,-2.434 -0.128,-0.565 -3.816,0.759 0.098,0.571 -0.024,2.644 -0.57,3.313 -2.977,0.392 -1.409,-3.052 -0.707,-2.548 -0.053,-0.578 -3.883,0.255 0.023,0.58 -0.368,2.617 -0.999,3.21 -3.002,0 -0.999,-3.21 -0.368,-2.617 0.023,-0.58 -3.883,-0.255 -0.053,0.578 -0.707,2.548 -1.409,3.052 -2.977,-0.392 -0.57,-3.313 -0.024,-2.644 0.098,-0.571 -3.816,-0.759 -0.128,0.565 -1.033,2.434 -1.795,2.842 -2.901,-0.777 -0.133,-3.359 0.322,-2.624 0.171,-0.554 -3.684,-1.251 -0.201,0.544 -1.342,2.278 -2.151,2.583 -2.774,-1.149 0.307,-3.347 0.661,-2.56 0.243,-0.527 -3.49,-1.72 -0.27,0.513 -1.628,2.083 -2.47,2.28 -2.6,-1.501 0.741,-3.279 0.99,-2.451 0.309,-0.491 -3.235,-2.161 -0.335,0.473 -1.886,1.853 -2.746,1.939 -2.382,-1.828 1.162,-3.154 1.301,-2.302 0.371,-0.446 -2.925,-2.565 -0.394,0.426 -2.112,1.591 -2.975,1.563 -2.123,-2.123 1.563,-2.975 1.591,-2.112 0.426,-0.394 -2.565,-2.925 -0.446,0.371 -2.302,1.301 -3.154,1.162 -1.828,-2.382 1.939,-2.746 1.853,-1.886 0.473,-0.335 -2.161,-3.235 -0.491,0.309 -2.451,0.99 -3.279,0.741 -1.501,-2.6 2.28,-2.47 2.083,-1.628 0.513,-0.27 -1.72,-3.49 -0.527,0.243 -2.56,0.661 -3.347,0.307 -1.149,-2.774 2.583,-2.151 2.278,-1.342 0.544,-0.201 -1.251,-3.684 -0.554,0.171 -2.624,0.322 -3.359,-0.133 -0.777,-2.901 2.842,-1.795 2.434,-1.033 0.565,-0.128 -0.759,-3.816 -0.571,0.098 -2.644,-0.024 -3.313,-0.57 -0.392,-2.977 3.052,-1.409 2.548,-0.707 0.578,-0.053 -0.255,-3.883 -0.58,0.023 -2.617,-0.368 -3.21,-0.999 0,-3.002 3.21,-0.999 2.617,-0.368 0.58,0.023 0.255,-3.883 -0.578,-0.053 -2.548,-0.707 -3.052,-1.409 0.392,-2.977 3.313,-0.57 2.644,-0.024 0.571,0.098 0.759,-3.816 -0.565,-0.128 -2.434,-1.033 -2.842,-1.795 0.777,-2.901 3.359,-0.133 2.624,0.322 0.554,0.171 1.251,-3.684 -0.544,-0.201 -2.278,-1.342 -2.583,-2.151 1.149,-2.774 3.347,0.307 2.56,0.661 0.527,0.243 1.72,-3.49 -0.513,-0.27 -2.083,-1.628 -2.28,-2.47 1.501,-2.6 3.279,0.741 2.451,0.99 0.491,0.309 2.161,-3.235 -0.473,-0.335 -1.853,-1.886 -1.939,-2.746 1.828,-2.382 3.154,1.162 2.302,1.301 0.446,0.371 2.565,-2.925 -0.426,-0.394 -1.591,-2.112 -1.563,-2.975 2.123,-2.123 2.975,1.563 2.112,1.591 0.394,0.426 2.925,-2.565 -0.371,-0.446 -1.301,-2.302 -1.162,-3.154 2.382,-1.828 2.746,1.939 1.886,1.853 0.335,0.473 3.235,-2.161 -0.309,-0.491 -0.99,-2.451 -0.741,-3.279 2.6,-1.501 2.47,2.28 1.628,2.083 0.27,0.513 3.49,-1.72 -0.243,-0.527 -0.661,-2.56 -0.307,-3.347 2.774,-1.149 2.151,2.583 1.342,2.278 0.201,0.544 3.684,-1.251 -0.171,-0.554 -0.322,-2.624 0.133,-3.359 2.901,-0.777 1.795,2.842 1.033,2.434 0.128,0.565 3.816,-0.759 -0.098,-0.571 0.024,-2.644 0.57,-3.313 2.977,-0.392 1.409,3.052 0.707,2.548 0.053,0.578 3.883,-0.255 -0.023,-0.58 0.368,-2.617 0.999,-3.21 3.002,0 0.999,3.21 0.368,2.617 -0.023,0.58 3.883,0.255 0.053,-0.578 0.707,-2.548 1.409,-3.052 2.977,0.392 0.57,3.313 0.024,2.644 -0.098,0.571 3.816,0.759 0.128,-0.565 1.033,-2.434 1.795,-2.842 2.901,0.777 0.133,3.359 -0.322,2.624 -0.171,0.554 3.684,1.251 0.201,-0.544 1.342,-2.278 2.151,-2.583 2.774,1.149 -0.307,3.347 -0.661,2.56 -0.243,0.527 3.49,1.72 0.27,-0.513 1.628,-2.083 2.47,-2.28 2.6,1.501 -0.741,3.279 -0.99,2.451 -0.309,0.491 3.235,2.161 0.335,-0.473 1.886,-1.853 2.746,-1.939 2.382,1.828 -1.162,3.154 -1.301,2.302 -0.371,0.446 2.925,2.565 0.394,-0.426 2.112,-1.591 2.975,-1.563 2.123,2.123 -1.563,2.975 -1.591,2.112 -0.426,0.394 2.565,2.925 0.446,-0.371 2.302,-1.301 3.154,-1.162 1.828,2.382 -1.939,2.746 -1.853,1.886 -0.473,0.335 2.161,3.235 0.491,-0.309 2.451,-0.99 3.279,-0.741 1.501,2.6 -2.28,2.47 -2.083,1.628 -0.513,0.27 1.72,3.49 0.527,-0.243 2.56,-0.661 3.347,-0.307 1.149,2.774 -2.583,2.151 -2.278,1.342 -0.544,0.201 1.251,3.684 0.554,-0.171 2.624,-0.322 3.359,0.133 0.777,2.901 -2.842,1.795 -2.434,1.033 -0.565,0.128 0.759,3.816 0.571,-0.098 2.644,0.024 3.313,0.57 0.392,2.977 -3.052,1.409 -2.548,0.707 -0.578,0.053 z"

/> 

 <circle r="20" style="fill:none; stroke:black; stroke-width:2"/>

</g>

<path id="arrow" d=" m50,225 a 125,125,0 0 1 0,-150" style="marker-end: url(#markerPfeil);" />

<g id="gear2" transform="translate(265,92) scale(1.30,1.30)"> 

 <path class="box animated" d="m 15.766,-2.174 2.509,-0.346 0.66,0.027 3.313,1.267 0,2.452 L 18.935,2.493 18.275,2.52 15.766,2.174 14.741,6 l 2.346,0.955 0.558,0.354 2.235,2.753 -1.226,2.124 -3.502,-0.56 -0.586,-0.306 -1.999,-1.554 -2.801,2.801 1.554,1.999 0.306,0.586 0.56,3.502 L 10.062,19.88 7.309,17.645 6.955,17.087 6,14.741 l -3.826,1.025 0.346,2.509 -0.027,0.66 -1.267,3.313 -2.452,0 -1.267,-3.313 -0.027,-0.66 0.346,-2.509 -3.826,-1.025 -0.955,2.346 -0.354,0.558 -2.753,2.235 -2.124,-1.226 0.56,-3.502 0.306,-0.586 1.554,-1.999 -2.801,-2.801 -1.999,1.554 -0.586,0.306 -3.502,0.56 -1.226,-2.124 2.235,-2.753 0.558,-0.354 2.346,-0.955 -1.025,-3.826 -2.509,0.346 -0.66,-0.027 -3.313,-1.267 0,-2.452 3.313,-1.267 0.66,-0.027 2.509,0.346 1.025,-3.826 -2.346,-0.955 -0.558,-0.354 -2.235,-2.753 1.226,-2.124 3.502,0.56 0.586,0.306 1.999,1.554 2.801,-2.801 -1.554,-1.999 -0.306,-0.586 -0.56,-3.502 2.124,-1.226 2.753,2.235 0.354,0.558 0.955,2.346 3.826,-1.025 -0.346,-2.509 0.027,-0.66 1.267,-3.313 2.452,0 1.267,3.313 0.027,0.66 -0.346,2.509 3.826,1.025 0.955,-2.346 0.354,-0.558 2.753,-2.235 2.124,1.226 -0.56,3.502 -0.306,0.586 -1.554,1.999 2.801,2.801 1.999,-1.554 0.586,-0.306 3.502,-0.56 1.226,2.124 -2.235,2.753 -0.558,0.354 L 14.741,-6 z"/>
 <circle r="10"/>

</g>

<g id="gear3" transform="translate(355,85)"> 

 <path id="gear3path" class="wood animated" d="m55.8-4.5 1.4-0.1 3.7 0.6 5.2 2.2v3.6l-5.2 2.2-3.7 0.6-1.4-0.1-0.7 5.6 1.4 0.3 3.5 1.6 4.5 3.4-0.9 3.5-5.6 0.8-3.8-0.4-1.3-0.5-2.2 5.2 1.3 0.6 2.9 2.4 3.4 4.5-1.8 3.2-5.6-0.7-3.5-1.3-1.2-0.8-3.4 4.5 1.1 0.9 2.2 3.1 2.1 5.2-2.6 2.6-5.2-2.1-3.1-2.2-0.9-1.1-4.5 3.4 0.8 1.2 1.3 3.5 0.7 5.6-3.2 1.8-4.5-3.4-2.4-2.9-0.6-1.3-5.2 2.2 0.5 1.3 0.4 3.8-0.8 5.6-3.5 0.9-3.4-4.5-1.6-3.5-0.3-1.4-5.6 0.7 0.1 1.4-0.6 3.7-2.2 5.2h-3.6l-2.2-5.2-0.6-3.7 0.1-1.4-5.6-0.7-0.3 1.4-1.6 3.5-3.4 4.5-3.5-0.9-0.8-5.6 0.4-3.8 0.5-1.3-5.2-2.2-0.6 1.3-2.4 2.9-4.5 3.4-3.2-1.8 0.7-5.6 1.3-3.5 0.8-1.2-4.5-3.4-0.9 1.1-3.1 2.2-5.2 2.1-2.6-2.6 2.1-5.2 2.2-3.1 1.1-0.9-3.4-4.5-1.2 0.8-3.5 1.3-5.6 0.7-1.8-3.2 3.4-4.5 2.9-2.4 1.3-0.6-2.2-5.2-1.3 0.5-3.8 0.4-5.6-0.8-0.9-3.5 4.5-3.4 3.5-1.6 1.4-0.3-0.7-5.6-1.4 0.1-3.7-0.6-5.2-2.2v-3.6l5.2-2.2 3.7-0.6 1.4 0.1 0.7-5.6-1.4-0.3-3.5-1.6-4.5-3.4 0.9-3.5 5.6-0.8 3.8 0.4 1.3 0.5 2.2-5.2-1.3-0.6-2.9-2.4-3.4-4.5 1.8-3.2 5.6 0.7 3.5 1.3 1.2 0.8 3.4-4.5-1.1-0.9-2.2-3.1-2.1-5.2 2.6-2.6 5.2 2.1 3.1 2.2 0.9 1.1 4.5-3.4-0.8-1.2-1.3-3.5-0.7-5.6 3.2-1.8 4.5 3.4 2.4 2.9 0.6 1.3 5.2-2.2-0.5-1.3-0.4-3.8 0.8-5.6 3.5-0.9 3.4 4.5 1.6 3.5 0.3 1.4 5.6-0.7-0.1-1.4 0.6-3.7 2.2-5.2h3.6l2.2 5.2 0.6 3.7-0.1 1.4 5.6 0.7 0.3-1.4 1.6-3.5 3.4-4.5 3.5 0.9 0.8 5.6-0.4 3.8-0.5 1.3 5.2 2.2 0.6-1.3 2.4-2.9 4.5-3.4 3.2 1.8-0.7 5.6-1.3 3.5-0.8 1.2 4.5 3.4 0.9-1.1 3.1-2.2 5.2-2.1 2.6 2.6-2.1 5.2-2.2 3.1-1.1 0.9 3.4 4.5 1.2-0.8 3.5-1.3 5.6-0.7 1.8 3.2-3.4 4.5-2.9 2.4-1.3 0.6 2.2 5.2 1.3-0.5 3.8-0.4 5.6 0.8 0.9 3.5-4.5 3.4-3.5 1.6-1.4 0.3z"/>
 <circle r="5"/>

</g>

<g id="gear4" transform="translate(466,85)"> 

 <path class="animated"

d="m1.7-50.9-3.5 0-2.3 5.3-0.4 2.8 0.2 2.3-5.8 1-0.6-2.3-1.3-2.5-3.9-4.2-3.3 1.2-0.3 5.7 0.6 2.8 1 2.1-5.1 2.9-1.3-1.9-2.1-1.9-5.1-2.6-2.7 2.2 1.6 5.5 1.5 2.4 1.7 1.6-3.8 4.5-1.9-1.3-2.6-1.1-5.7-0.7-1.7 3 3.4 4.6 2.2 1.8 2.1 0.9-2 5.6-2.3-0.7-2.8-0.1-5.5 1.3-0.6 3.4 4.7 3.2 2.7 0.9 2.3 0.2 0 5.9-2.3 0.2-2.7 0.9-4.8 3.2 0.6 3.4 5.5 1.3 2.8-0.1 2.2-0.7 2 5.6-2.1 0.9-2.2 1.8-3.4 4.6 1.8 3 5.6-0.7 2.7-1.1 1.9-1.4 3.8 4.5-1.7 1.6-1.5 2.4-1.6 5.5 2.7 2.2 5.1-2.6 2.1-1.9 1.3-1.9 5.1 2.9-1 2.1-0.6 2.8 0.3 5.7 3.3 1.2 3.9-4.1 1.3-2.5 0.6-2.3 5.8 1-0.2 2.3 0.4 2.8 2.3 5.2 3.5 0 2.3-5.2 0.4-2.8-0.2-2.3 5.8-1 0.6 2.3 1.3 2.5 3.9 4.2 3.3-1.2 0.3-5.7-0.6-2.8-1-2.1 5.1-3 1.3 1.9 2.1 1.9 5.1 2.5 2.6-2.2-1.6-5.5-1.5-2.4-1.7-1.6 3.8-4.5 1.9 1.4 2.6 1.1 5.7 0.6 1.7-3-3.4-4.6-2.2-1.7-2.1-1 2-5.5 2.2 0.6 2.8 0.1L49.8 10.5 50.4 7.1 45.7 4 43 3.1 40.7 2.9l0-5.9 2.3-0.2 2.7-0.9 4.8-3.1-0.6-3.4-5.5-1.3-2.8 0.1-2.2 0.6-2-5.5 2.1-1 2.2-1.8 3.4-4.6-1.7-3-5.7 0.7-2.6 1.1-1.9 1.3-3.8-4.5 1.7-1.6 1.5-2.4 1.6-5.5-2.7-2.2-5.1 2.6-2.1 1.9-1.3 1.9-5.1-2.9 1-2.1 0.6-2.8-0.3-5.7-3.3-1.2-3.9 4.2-1.3 2.5-0.6 2.3-5.8-1 0.2-2.3-0.4-2.8-2.3-5.3zm-5.4 17.1 0.1 20.7c-4.7 1.3-8.3 5-9.5 9.6l-20.7 0.1c1.5-16 14.2-28.8 30.1-30.5zm7 0C19.3-32.3 32.1-19.6 33.8-3.7L13-3.6C11.8-8.2 8.1-11.8 3.4-13zM1.1-6.4c3.5 0.6 5.9 4 5.3 7.5-0.6 3.5-4 5.9-7.5 5.3-3.5-0.6-5.9-4-5.3-7.5 0.6-3.5 4-5.9 7.5-5.3zM-33.8 3.7-13 3.6c1.3 4.6 4.9 8.3 9.6 9.5l0.1 20.8C-19.3 32.3-32 19.7-33.8 3.7zM13 3.4 33.8 3.3C32.3 19.3 19.7 32.1 3.7 33.8L3.6 13C8.2 11.7 11.8 8.1 13 3.4z" style="fill:var(--accent2color);stroke:#222"/> </g>

<g id="gear5" transform="translate(577,85)"> 

 <use href="#gear3path" class="animated"/>

</g>

</svg> </body> </html>

Abgerufen am 1.01.2026
von "http://wiki.selfhtml.org/wiki/Beispiel:SVG-cogwheel-2.html"