Testbereich

<svg viewBox="0 0 600 700" id="bike-svg" width="600" height="700" author="Florian Gärtner"> <symbol transform="rotate (0 105 105)" id="reifen"> <g id="rotation_Reifen"> <circle cx="105" cy="105" r="100" stroke="black" fill="none" stroke-width="9"></circle> <symbol id="speiche"> <line x1="100" y1="115" x2="105" y2="195" stroke="#7e8182" stroke-width="5" stroke-linecap="round"> </line> </symbol> <use xlink:href="#speiche"></use> <use xlink:href="#speiche" transform="rotate (40 105 105)"></use> <use xlink:href="#speiche" transform="rotate (80 105 105)"></use> <use xlink:href="#speiche" transform="rotate (120 105 105)"></use> <use xlink:href="#speiche" transform="rotate (160 105 105)"></use> <use xlink:href="#speiche" transform="rotate (200 105 105)"></use> <use xlink:href="#speiche" transform="rotate (240 105 105)"></use> <use xlink:href="#speiche" transform="rotate (280 105 105)"></use> <use xlink:href="#speiche" transform="rotate (320 105 105)"></use> <use xlink:href="#speiche" transform="rotate (360 105 105)"></use> </g> </symbol> <symbol id="pedalenarm"> <line x1="25" y1="3" x2="55" y2="3" stroke="gray" stroke-width="6" stroke-linecap="round"></line> </symbol> <symbol> <g id="pedalen"> <line x1="45" y1="3" x2="65" y2="3" stroke="#69655a" stroke-width="6"> </line> </g> </symbol> <defs> <linearGradient id="verlauf-anmeldung" x1="0%" y1="0%" x2="100%" y2="100%"> <stop offset="0%" stop-color="#03fc66" /> <stop offset="100%" stop-color="#58b87a" /> </linearGradient> </defs> <g transform="translate (100 90)" id="banner"> <path id="banner_path" d="M 40, 100 c 200, 50 400, 50 600, 0 M 640, 100 c 200, -50 400, -50 600, 0 " fill="none"></path> <g transform="rotate (180 165 40)"> <rect x="30" y="20" height="60" width="300" fill="#0285cf" stroke="black"></rect> <text x="50" y="65" font-family="arial black" font-style="bold" font-size="40" fill="#7fb752" opacity="100">Stadtradeln</text> <circle cx="330" cy="20" r="10" fill="#0285cf" stroke="black"></circle> <rect x="320" y="20" width="20" height="50" fill="#0285cf" stroke="black"></rect> <rect x="320.5" y="19" width="19" height="2" fill="#0285cf"></rect> <circle cx="330" cy="70" r="10" fill="#0285cf" stroke="black"></circle> <rect x="310" y="70" width="20" height="9.5" fill="#0285cf"></rect> <circle cx="30" cy="30" r="10" fill="#0285cf" stroke="black"></circle> <circle cx="30" cy="80" r="10" fill="#0285cf" stroke="black"></circle> <rect x="20" y="30" width="20" height="50" fill="#0285cf" stroke="black"></rect> <rect x="30" y="20.5" width="11" height="59" fill="#0285cf"></rect> <rect x="21" y="29.5" width="10" height="1" fill="#0285cf" stroke="#0285cf" rect></rect> </g> <animateMotion rotate="auto" dur="10s" repeatCount="indefinite" path=" M 1240, 200 c -200, -50 -400, -50 -600, 0 M 640, 200 c -200, 50 -400, 50 -600, 0 " /> </g> <g transform=" translate(0 250), rotate(-30 100 40)" id="datum"> <polygon points="10, 10 100, 0 190, 10 190, 70 100, 80 10, 70 " fill="#61c0cf" stroke="black" stroke-linejoin="round" stroke-linecap="round"> </polygon> <text font-size="25" font-family="arial black" x="60" y="25">11.06.</text> <text x="90" y="43">bis</text> <text font-size="25" font-family="arial black" x="25" y="68"> 01.07.2022</text> </g> <g transform="translate(200 130)"> <path d="M 100, 100 l 200, 0 0, -40 100, 70 -100, 70 0, -40 -200,0 Z" fill="url(#verlauf-anmeldung)" stroke="black"> </path> <text font-family="arial black" font-size="40" x="110" y="145">Anmeldung</text> </g> <g transform="translate(0 200)" id="bike"> <g transform="rotate (0 265 315)" id="pedalen1"> <use transform="rotate (180 265 315)" x="265" y="312" xlink:href="#pedalen"></use> <use transform="rotate (180 265 315)" x="265" y="312" xlink:href="#pedalenarm"></use> </g> <use transform="rotate (0 105 105)" id="reifen1" y="200" xlink:href="#reifen"></use> <use x="350" y="200" xlink:href="#reifen"></use> <path transform="translate(-50,0)" d="M505, 305 L460,130 q -5 -20, -30, -20 " fill="none" stroke="black" stroke-width="15" stroke-linecap="round"> </path> <path d="M 105, 305 L 265, 315 L 415, 175 L 215, 185 Z" fill="none" stroke="black" stroke-width="15" stroke-linejoin="round" stroke-linecap="round"></path> <text transform="rotate (-42 300 290)" x="330" y="289" font-family="Arial Black" fill="white">FMSG</text> <path d="M 265, 315 L 215, 185 L 210, 150 l 40, -2" fill="none" stroke="black" stroke-width="15" stroke-linejoin="round" stroke-linecap="round"></path> <g transform="rotate (0 265 315)" id="pedalen2"> <use x="265" y="312" xlink:href="#pedalenarm"></use> <use x="265" y="312" xlink:href="#pedalen"></use> <circle cx="265" cy="315" r="25" fill="black"></circle> </g> </g> <desc>© Florian Gärtner</desc> <text x="450" y="650">© Florian Gärtner</text> </svg>
<script> var pedalen1 = document.querySelector("#pedalen1"); var pedalen2 = document.querySelector("#pedalen2"); var pedale = document.querySelector("#pedalen"); var bike = document.querySelector("#bike"); var reifen = document.querySelector("#rotation_Reifen"); var animation = true; var rpm_pedalen = 0; function start() { animation = true; } function stop() { animation = false; } function playAnimation() { setInterval(function () { if (animation == true) { rotatePedalen(); rotateReifen(); rpm_pedalen += 5; // +=5 } }, 20) } function rotatePedalen() { pedalen1.setAttribute("transform", "rotate(" + rpm_pedalen + ", 265, 315)"); pedalen2.setAttribute("transform", "rotate(" + rpm_pedalen + ", 265, 315)"); pedale.setAttribute("transform", "rotate(" + -rpm_pedalen + ", 55, 3)"); }; function rotateReifen() { reifen.setAttribute("transform", "rotate(" + rpm_pedalen * 2 + ", 105, 105)"); } playAnimation(); </script> <progress width="600px" id="file" value="32" max="50"> Hallo </progress>