Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                
<div id="wrap">
  
<svg id="bridge" viewBox="0 0 1000 400" xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" stroke-linecap="round" stroke-linejoin="round" stroke-miterlimit="1.5">
  <path d="M45.092-1.57l443.878.764-16.494 180.689-437.141-11.748L45.092-1.57z" fill="#626262"/>
  <path d="M254.35 85.898c27.952-5.133 55.155-12.806 79.286-30.893 17.523-4.566 31.097-27.523 38.772-15.108 13.347-.539 33.59-10.704 38.551-22.528 8.062-19.216 37.901-3.962 55.462-18.883l543.352-.614.278 212.612-686.141-8.795-69.56-115.791z" fill="#5c7c5c"/>
  <path d="M-1.32.238c46.102-3.55 83.06 1.317 105.435 19.61 19.385 1.506 66.428 7.698 62.732 16.386 0 0 56.723 20.301 63.218 18.89 7.846-1.704 65.146 41.528 69.852 38.001 3.581-2.685 40.562 10.292 44.508 16.117 9.234 13.629 47.639 26.833 43.345 29.037 30.478 6.544 53.662 7.697 65.791.675 21.814-11.671 41.939-20.402 54.414-15.815 59.903-3.65 77.483.012 86.482 5.158 19.179-2.883 59.567 33.144 90.879 44.384 19.695-.382 22.415 21.004 39.056 26.152l12.172 2.199 54.425-1.467 27.052-14.325 18 5 29.813-20.88c6.058-.652 11.558-1.838 16.501-3.557 4.867-1.692 5.217-13.213 12.978-6.628 6.789 5.759 12.481-12.291 15.769-21.262l24.911-16.649c4.813 1.729 8.277-.429 10.259-6.856 18.168-13.732 31.652-16.034 41.862-10.348l12.612-3.642-.736 302.35L.659 405.83-1.32.238z" fill="#55ab57"/>
  <path d="M437.772 206.499c-.678-5.97 2.939-7.533 11.738-3.775 1.043.425 3.145-11.432 15.555-5.879 3.698 1.655 20.28 3.159 20.28 3.159s-2.585 4.954.812 3.342c5.223-2.48 11.685-3.087 11.291 1.318 13.51-4.164 31.762-.739 17.434 1.957 5.384 1.316-12.105 2.981-5.683 2.815l-11.676 1.941-11.888-.273-11.708.617-12.738-.724-18.293.396c-6.013-1.362-14.757-1.895-5.124-4.894z" fill="#33583f"/>
  <path d="M168.926 306.161s-1.896-6.172.645-14.701c2.54-8.528 6.567-11.823 10.919-12.944 4.352-1.12 27.524-.009 33.917-5.292 6.393-5.282 6.988-6.851 9.636.567 2.648 7.419-1.164 14.878 2.517 18.294 3.681 3.417 12.326 4.161 15.333 12.246 3.007 8.086-23.546 17.793-23.546 17.793l-49.421-15.963z" fill="#376b3d"/>
  <path d="M10.068 225.457c26.268-3.574 38.996 11.731 34.923 75.699l-7.864.037c.838-44.441.231-65.382-27.059-75.736z" fill="#7b7b7b"/>
  <path d="M845.605 230.706c-30.625 2.239-29.464 17.786-25.391 81.754l3.49-2.147c-.838-44.441-5.389-69.252 21.901-79.607z" fill="#7b7b7b"/>
  <path d="M999.118 231.196c-30.625 2.239-36.436 7.625-32.363 71.592l7.217-1.367c-.837-44.44-.539-58.174 25.146-70.225z" fill="#7b7b7b"/>
  <path d="M924.318 231.841c-30.625 2.239-35.888 4.697-31.815 68.665l5.864.037c-.838-44.44-1.339-58.348 25.951-68.702z" fill="#7b7b7b"/>
  <path d="M83.753 225.245c33.471-1.381 38.261 18.214 34.188 82.181l-7.863.038c.837-44.441 4.789-72.115-26.325-82.219z" fill="#7b7b7b"/>
  <path d="M160.909 226.045c30.625 2.239 37.673 17.524 33.6 81.491l-7.863.037c.837-44.44 1.553-71.173-25.737-81.528z" fill="#7b7b7b"/>
  <path d="M423.589 317.466l12.756-8.157c1.555-11.598-2.82-12.457-13.029-11.523l17.775-11.048c-12.514-.968-15.464-3.669-2.995-7.78l-5.727-4.304c7.094.496 9.386-4.316 17.457-10.977-1.176 7.672-3.455 9.999 4.403 12.149l-6.195 7.08 13.262.93c-6.88 1.854-10.95 2.055-11.185 4.886l11.25 5.799c-3.498-.806-8.534.336-10.216 5.574l10.578 4.809c-6.951.998-11.051 3.305-10.035 7.961l11.769 3.259c-13.727 4.501-26.981 4.625-39.868 1.342z" fill="#537644"/>
  <path d="M39.889 189.164c7.727-2.054 7.754-10.625 7.754-10.625s7.863 5.015 12.284 5.454c3.179.033 14.354 1.566 13.942-.688-1.782-9.739.085-9.523 13.073-7.105 9.58 5.375-.919 7.316.246 9.247 4.028 6.682 10.364 2.498 12.163-10.14 3.759 5.723 7.617 9.899 12.178 3.241l4.432 6.984 4.605-6.176 10.312.497c10.029 5.085-.195 15.157 10.508 9.421 8.876-3.654 15.787-1.868 20.823 5.109 6.438 4.173 7.815 9.067 4.583 14.619-13.655 6.458-27.537 6.985-41.65 1.442-6.72-1.613-23.269-18.308-22.865-9.933.32 6.627-15.988 4.134-16.26 10.682-.525 12.633-5.817 1.791-8.742 2.947 0 0-30.685-8.387-34.04-5.409-3.356 2.978-3.346-19.567-3.346-19.567z" fill="#4f8d3d"/>
  <path d="M873.302 224.548l9.106-6.578c1.11-9.354-2.013-10.046-9.302-9.293l12.691-8.91c-8.935-.781-11.041-2.959-2.138-6.275l-4.09-3.47c5.065.4 6.702-3.481 12.463-8.853-.839 6.187-2.466 8.064 3.144 9.798l-4.423 5.709 9.469.75c-4.913 1.496-7.819 1.657-7.986 3.941l8.032 4.676c-2.498-.649-6.093.271-7.294 4.496l7.552 3.878c-4.962.805-7.889 2.665-7.164 6.421l8.402 2.628c-9.8 3.629-19.262 3.73-28.462 1.082z" fill="#537644"/>
  
  
  
  <g id="lok" transform="translate(0 173.2)  scale(0.1)">
    <path fill="#80623e" d="M516.299 326.727H189.217v-11.189H152.64v-18.996h-38.397v-53.437h541.583c-2.31 2.396-3.71 5.53-3.71 8.958v2.926c0 7.497 1.696 13.589 10.045 13.63h.981l-.703 49.906-6.706 8.202-12.247 21.215-118.187.038-9-21.253z"/>
  <g id="KuppelradH">
    <path fill="none" stroke="#464646" stroke-width="3" d="M141.135 318.786c-1.304-4.69-2-9.632-2-14.736 0-30.355 24.645-55 55-55s55 24.645 55 55c0 15.375-6.322 29.284-16.506 39.269l-38.607-38.632v-.017l47.418 27.396-47.418-27.397v-.013l52.898 14.192-52.898-14.193v-.01c27.265.009 54.531.018 54.813.016l-54.813-.017v-.01l52.907-14.16-52.907 14.158v-.012c23.603-13.617 47.191-27.226 47.435-27.368l-47.435 27.367v-.017c19.272-19.259 38.529-38.504 38.728-38.705L194.022 304.6v-.03c13.626-23.583 27.238-47.142 27.378-47.387l-27.378 47.385v-.084l14.16-52.781-14.16 52.777c.009-27.211.018-54.367.016-54.65l-.017 54.653-.042.159c-7.048-26.338-14.097-52.675-14.171-52.948l14.169 52.947a380749.049 380749.049 0 00-27.391-47.475l27.39 47.475a332562.6 332562.6 0 00-38.745-38.768l38.744 38.769c-23.607-13.64-47.213-27.279-47.458-27.419l47.458 27.419c-26.333-7.065-52.665-14.129-52.938-14.201l52.941 14.203-54.77-.017 54.767.018-52.84 14.141zm52.887-14.067v-.031l38.607 38.631a55.268 55.268 0 01-11.384 8.587l-27.223-47.187zm0 .086v-.084l27.223 47.185a54.672 54.672 0 01-13.184 5.363l-14.039-52.464zm-.018 54.245l.018-54.241 14.039 52.46a55.03 55.03 0 01-13.926 1.781h-.131zm.017-54.563v.083l-.041.071.041-.154zm0 .085v.029l-.04.041.04-.07zm0 .031v.016l-.039.023.039-.039zm0 .018v.012l-.039.01.039-.022zm0 .013v.01h-.039l.039-.01zm0 .011v.01l-.036-.01h.036zm0 .011v.012l-.039-.023.039.011zm0 .013v.017l-.039-.04.039.023zm0 .018v.03l-.04-.07.04.04zm0 .032v.082l-.041-.153.041.071zm-14.138 52.464l14.096-52.537.042.159-.017 54.245a54.987 54.987 0 01-14.121-1.867zm-13.124-5.428l27.218-47.107-14.094 52.535a54.716 54.716 0 01-13.124-5.428zm-11.3-8.615l38.517-38.492-27.217 47.107a55.32 55.32 0 01-11.3-8.615zm-8.745-11.227l47.261-27.266-38.516 38.493a55.305 55.305 0 01-8.745-11.227zm-5.579-13.127l52.84-14.14-47.261 27.267a54.678 54.678 0 01-5.579-13.127z"/>
    <path fill="none" stroke="#464646" stroke-linecap="butt" stroke-width="3" d="M134.135 304.05c0-33.115 26.885-60 60-60 33.115 0 60 26.885 60 60 0 33.115-26.885 60-60 60-33.115 0-60-26.885-60-60z"/>
    <path fill="none" stroke="#b8b8b8" stroke-linecap="butt" stroke-width="3" d="M136.365 304.05c0-31.916 25.886-57.828 57.77-57.828 31.884 0 57.77 25.912 57.77 57.828 0 31.917-25.886 57.828-57.77 57.828-31.884 0-57.77-25.911-57.77-57.828z"/>
    <path fill="#464646" stroke="#464646" stroke-linecap="butt" d="M178.635 304.05c0-8.554 6.945-15.5 15.5-15.5s15.5 6.946 15.5 15.5c0 8.555-6.945 15.5-15.5 15.5s-15.5-6.945-15.5-15.5z"/>
    <path id="helperCircle02" fill="#404040" d="M171.895 303.988c0-12.418 10.082-22.5 22.5-22.5s22.5 10.082 22.5 22.5-10.082 22.5-22.5 22.5-22.5-10.082-22.5-22.5z"/>
    <path fill="#b8b8b8" stroke="#464646" stroke-linecap="butt" d="M215.115 314.896c-2.747.756-15.141 5-21 5-8.554 0-15.5-6.945-15.5-15.5s6.946-15.5 15.5-15.5c5.859 0 17.805 4.264 21 5 3.32.764 8.5 4.705 8.5 10.5s-4.429 9.38-8.5 10.5z"/>
    <path fill="none" stroke="#464646" stroke-linecap="butt" stroke-width=".75" d="M187.135 304.05c0-3.863 3.136-7 7-7 3.863 0 7 3.137 7 7 0 3.864-3.137 7-7 7-3.864 0-7-3.136-7-7z"/>
    <path fill="none" stroke="#464646" stroke-linecap="butt" stroke-width=".75" d="M193.135 304.05a1 1 0 112 0 1 1 0 01-2 0z"/>
    <path fill="#b8b8b8" stroke="#464646" stroke-linecap="butt" stroke-width=".75" d="M162.267 347.314c-13.508-9.544-21.581-25.37-21.581-43.264 0-17.894 8.073-33.719 21.581-43.263v86.527z"/>
  </g>
  <g id="Treibrad">
    <path fill="none" d="M264.635 304.05c0-30.355 24.645-55 55-55s55 24.645 55 55c0 30.356-24.645 55-55 55s-55-24.644-55-55z"/>
    <clipPath id="_clip1">
      <path d="M264.635 304.05c0-30.355 24.645-55 55-55s55 24.645 55 55c0 30.356-24.645 55-55 55s-55-24.644-55-55z"/>
    </clipPath>
    <g clip-path="url(#_clip1)">
      <path fill="#b8b8b8" stroke="#464646" stroke-linecap="butt" d="M264.635 304.05c0-30.355 24.645-55 55-55s55 24.645 55 55c0 30.356-24.645 55-55 55s-55-24.644-55-55zm73.646-19.19c2.227 2.229 10.944.027 16.568-4.038 4.315-3.608-.226-7.952-2.453-10.181-2.226-2.229-7.296-7.504-10.908-3.192-4.07 5.619-5.434 15.182-3.207 17.411zm-.955 38.546c2.227-2.229 10.944-.026 16.568 4.039 4.315 3.608-.226 7.952-2.453 10.181-2.226 2.229-7.296 7.504-10.908 3.192-4.07-5.619-5.434-15.183-3.207-17.412zm-16.873-44.38c3.151 0 7.754-7.724 8.852-14.575.498-5.603-5.785-5.461-8.936-5.461-3.15 0-10.464-.142-9.967 5.461 1.098 6.851 6.9 14.575 10.051 14.575zm0 49.964c3.151 0 7.754 7.724 8.852 14.575.498 5.603-5.785 5.461-8.936 5.461-3.15 0-10.464.142-9.967-5.461 1.098-6.851 6.9-14.575 10.051-14.575zm-20.51-41.475c-2.211 2.245-10.944.106-16.597-3.918-4.341-3.576.168-7.954 2.378-10.199 2.211-2.245 7.241-7.556 10.885-3.271 4.111 5.589 5.544 15.143 3.334 17.388zm-.739 34.235c-2.229-2.227-10.944-.016-16.564 4.054-4.311 3.612.233 7.952 2.462 10.179 2.229 2.226 7.303 7.496 10.911 3.182 4.065-5.624 5.42-15.188 3.191-17.415z"/>
    </g>
    <path fill="none" stroke="#464646" stroke-linecap="butt" stroke-width="3" d="M264.635 304.05c0-30.355 24.645-55 55-55s55 24.645 55 55c0 30.356-24.645 55-55 55s-55-24.644-55-55z"/>
    <path fill="none" d="M264.64 304.05c0-30.355 24.62-55 54.944-55 30.325 0 54.945 24.645 54.945 55 0 30.356-24.62 55-54.945 55-30.324 0-54.944-24.644-54.944-55z"/>
    <clipPath id="_clip2">
      <path d="M264.64 304.05c0-30.355 24.62-55 54.944-55 30.325 0 54.945 24.645 54.945 55 0 30.356-24.62 55-54.945 55-30.324 0-54.944-24.644-54.944-55z"/>
    </clipPath>
    <g clip-path="url(#_clip2)">
      <path fill="#b8b8b8" stroke="#464646" stroke-linecap="butt" stroke-width=".75" d="M287.451 342.607c-2.73 11.736-23.908-22.213-22.961-38.249 1.602-27.15 25.436-53.65 26.231-41.269-6.813 24.277-13.451 46.474-3.27 79.518z"/>
    </g>
    <path fill="none" stroke="#464646" stroke-linecap="butt" stroke-width="3" d="M264.64 304.05c0-30.355 24.62-55 54.944-55 30.325 0 54.945 24.645 54.945 55 0 30.356-24.62 55-54.945 55-30.324 0-54.944-24.644-54.944-55z"/>
    <path fill="#464646" stroke="#464646" stroke-linecap="butt" d="M304.135 304.05c0-8.554 6.945-15.5 15.5-15.5s15.5 6.946 15.5 15.5c0 8.555-6.945 15.5-15.5 15.5s-15.5-6.945-15.5-15.5z"/>
    <path fill="#b8b8b8" stroke="#464646" stroke-linecap="butt" d="M340.615 314.896c-2.747.756-15.141 5-21 5-8.554 0-15.5-6.945-15.5-15.5s6.946-15.5 15.5-15.5c5.859 0 17.805 4.264 21 5 3.32.764 8.5 4.705 8.5 10.5s-4.429 9.38-8.5 10.5z"/>
    <path fill="none" stroke="#464646" stroke-linecap="butt" stroke-width=".75" d="M312.635 304.05c0-3.863 3.136-7 7-7 3.863 0 7 3.137 7 7 0 3.864-3.137 7-7 7-3.864 0-7-3.136-7-7z"/>
    <path fill="none" stroke="#464646" stroke-linecap="butt" stroke-width=".75" d="M318.635 304.05a1 1 0 112 0 1 1 0 01-2 0z"/>
    <path fill="none" stroke="#464646" stroke-linecap="butt" stroke-width="3" d="M259.635 304.05c0-33.115 26.885-60 60-60 33.115 0 60 26.885 60 60 0 33.115-26.885 60-60 60-33.115 0-60-26.885-60-60z"/>
    <path fill="none" stroke="#b8b8b8" stroke-linecap="butt" stroke-width="3" d="M261.843 304.05c0-31.928 25.896-57.85 57.792-57.85s57.791 25.922 57.791 57.85c0 31.929-25.895 57.85-57.791 57.85-31.896 0-57.792-25.921-57.792-57.85z"/>
    <path id="helperCircle" fill="none" d="M297.135 304.05c0-12.418 10.082-22.5 22.5-22.5s22.5 10.082 22.5 22.5-10.082 22.5-22.5 22.5-22.5-10.082-22.5-22.5z"/>
  </g>
  
  <g id="KuppelradV">
    <path fill="none" stroke="#464646" stroke-width="3" d="M392.135 318.786c-1.304-4.69-2-9.632-2-14.736 0-30.355 24.645-55 55-55s55 24.645 55 55c0 15.375-6.322 29.284-16.506 39.269l-38.607-38.632v-.017l47.418 27.396-47.418-27.397v-.013l52.898 14.192-52.898-14.193v-.01c27.265.009 54.531.018 54.813.016l-54.813-.017v-.01l52.907-14.16-52.907 14.158v-.012c23.603-13.617 47.191-27.226 47.435-27.368l-47.435 27.367v-.017c19.272-19.259 38.529-38.504 38.728-38.705L445.022 304.6v-.03c13.626-23.583 27.238-47.142 27.378-47.387l-27.378 47.385v-.084l14.16-52.781-14.16 52.777c.009-27.211.018-54.367.016-54.65l-.017 54.653-.042.159c-7.048-26.338-14.097-52.675-14.171-52.948l14.169 52.947a380749.049 380749.049 0 00-27.391-47.475l27.39 47.475a332562.6 332562.6 0 00-38.745-38.768l38.744 38.769c-23.607-13.64-47.213-27.279-47.458-27.419l47.458 27.419c-26.333-7.065-52.665-14.129-52.938-14.201l52.941 14.203-54.77-.017 54.767.018-52.84 14.141zm52.887-14.067v-.031l38.607 38.631a55.268 55.268 0 01-11.384 8.587l-27.223-47.187zm0 .086v-.084l27.223 47.185a54.672 54.672 0 01-13.184 5.363l-14.039-52.464zm-.018 54.245l.018-54.241 14.039 52.46a55.03 55.03 0 01-13.926 1.781h-.131zm.017-54.563v.083l-.041.071.041-.154zm0 .085v.029l-.04.041.04-.07zm0 .031v.016l-.039.023.039-.039zm0 .018v.012l-.039.01.039-.022zm0 .013v.01h-.039l.039-.01zm0 .011v.01l-.036-.01h.036zm0 .011v.012l-.039-.023.039.011zm0 .013v.017l-.039-.04.039.023zm0 .018v.03l-.04-.07.04.04zm0 .032v.082l-.041-.153.041.071zm-14.138 52.464l14.096-52.537.042.159-.017 54.245a54.987 54.987 0 01-14.121-1.867zm-13.124-5.428l27.218-47.107-14.094 52.535a54.716 54.716 0 01-13.124-5.428zm-11.3-8.615l38.517-38.492-27.217 47.107a55.32 55.32 0 01-11.3-8.615zm-8.745-11.227l47.261-27.266-38.516 38.493a55.305 55.305 0 01-8.745-11.227zm-5.579-13.127l52.84-14.14-47.261 27.267a54.678 54.678 0 01-5.579-13.127z"/>
    <path fill="none" stroke="#464646" stroke-linecap="butt" stroke-width="3" d="M385.135 304.05c0-33.115 26.885-60 60-60 33.115 0 60 26.885 60 60 0 33.115-26.885 60-60 60-33.115 0-60-26.885-60-60z"/>
    <path fill="none" stroke="#b8b8b8" stroke-linecap="butt" stroke-width="3" d="M387.365 304.05c0-31.916 25.886-57.828 57.77-57.828 31.884 0 57.77 25.912 57.77 57.828 0 31.917-25.886 57.828-57.77 57.828-31.884 0-57.77-25.911-57.77-57.828z"/>
    <path fill="#464646" stroke="#464646" stroke-linecap="butt" d="M422.635 304.05c0-12.418 10.082-22.5 22.5-22.5s22.5 10.082 22.5 22.5-10.082 22.5-22.5 22.5-22.5-10.082-22.5-22.5z"/>
    <path fill="#b8b8b8" stroke="#464646" stroke-linecap="butt" d="M466.115 314.896c-2.747.756-15.141 5-21 5-8.554 0-15.5-6.945-15.5-15.5s6.946-15.5 15.5-15.5c5.859 0 17.805 4.264 21 5 3.32.764 8.5 4.705 8.5 10.5s-4.429 9.38-8.5 10.5z"/>
    <path fill="none" stroke="#464646" stroke-linecap="butt" stroke-width=".75" d="M438.135 304.05c0-3.863 3.136-7 7-7 3.863 0 7 3.137 7 7 0 3.864-3.137 7-7 7-3.864 0-7-3.136-7-7z"/>
    <path fill="none" stroke="#464646" stroke-linecap="butt" stroke-width=".75" d="M444.135 304.05a1 1 0 112 0 1 1 0 01-2 0z"/>
    <path fill="#b8b8b8" stroke="#464646" stroke-linecap="butt" stroke-width=".75" d="M413.267 347.314c-13.508-9.544-21.581-25.37-21.581-43.264 0-17.894 8.073-33.719 21.581-43.263v86.527z"/>
  </g>
  
  <g class='small'>
  <path fill="none" stroke="#464646" stroke-width="1.5" d="M530.824 313.851a23.749 23.749 0 016.371-.865c13.123 0 23.777 10.665 23.777 23.801 0 13.137-10.654 23.802-23.777 23.802-6.647 0-12.66-2.736-16.977-7.143l16.701-16.707h.008l-11.844 20.52 11.844-20.52h.006l-6.135 22.891 6.135-22.891h.005c-.004 11.799-.008 23.598-.007 23.72l.007-23.72h.005l6.121 22.895-6.121-22.895h.005l11.832 20.527-11.831-20.527h.007l16.733 16.759-16.732-16.759h.013c10.195 5.896 20.38 11.787 20.486 11.847l-20.485-11.847h.036l22.818 6.127-22.816-6.127 23.626.007-23.627-.008-.069-.018 22.89-6.133-22.889 6.132 20.524-11.853-20.525 11.853c8.338-8.34 16.674-16.681 16.76-16.767l-16.76 16.766 11.854-20.538-11.854 20.538 6.139-22.909-6.14 22.91.007-23.702-.007 23.701-6.114-22.867zm6.082 22.888h.013l-16.701 16.707a23.906 23.906 0 01-3.712-4.927l20.4-11.78zm-.038 0h.037l-20.399 11.78a23.666 23.666 0 01-2.318-5.705l22.68-6.075zm-23.451-.008l23.45.008-22.679 6.075a23.813 23.813 0 01-.771-6.027v-.056zm23.589.007h-.036l-.031-.018.067.018zm-.037 0h-.012l-.018-.017.03.017zm-.013 0h-.007l-.01-.017.017.017zm-.008 0h-.005l-.005-.017.01.017zm-.005 0h-.005v-.017l.005.017zm-.005 0h-.005l.005-.015v.015zm-.005 0h-.005l.01-.017-.005.017zm-.006 0h-.007l.017-.017-.01.017zm-.008 0h-.012l.03-.017-.018.017zm-.013 0h-.036l.067-.018-.031.018zm-22.681-6.118l22.712 6.1-.069.018-23.451-.007a23.82 23.82 0 01.808-6.111zm2.346-5.679l20.365 11.778-22.711-6.099a23.696 23.696 0 012.346-5.679zm3.725-4.891l16.641 16.669-20.366-11.778a23.92 23.92 0 013.725-4.891zm4.853-3.784l11.788 20.452-16.641-16.668a23.885 23.885 0 014.853-3.784zm5.675-2.415l6.113 22.867-11.788-20.452a23.663 23.663 0 015.675-2.415z"/>
  <circle cx="537.195" cy="336.787" r="25" fill="none" stroke="#b8b8b8" stroke-linecap="butt" stroke-width="3"/>
  <ellipse cx="537.195" cy="336.787" fill="#b8b8b8" stroke="#464646" stroke-linecap="butt" rx="6.701" ry="6.708"/>
  <ellipse cx="537.195" cy="336.787" fill="none" stroke="#464646" stroke-linecap="butt" stroke-width=".75" rx="3.026" ry="3.029"/>
  <ellipse cx="537.195" cy="336.787" fill="none" stroke="#464646" stroke-linecap="butt" stroke-width=".75" rx=".432" ry=".433"/>
  <circle cx="537.195" cy="336.787" r="22.5" fill="none" stroke="#464646" stroke-linecap="butt" stroke-width="1.5"/>
  <circle cx="537.195" cy="336.787" r="27" fill="none" stroke="#464646" stroke-linecap="butt" stroke-width="1.5"/>
  </g>
  <g class='small'>
  <path fill="none" stroke="#464646" stroke-width="1.5" d="M628.824 313.851a23.749 23.749 0 016.371-.865c13.123 0 23.777 10.665 23.777 23.801 0 13.137-10.654 23.802-23.777 23.802-6.647 0-12.66-2.736-16.977-7.143l16.701-16.707h.008l-11.844 20.52 11.844-20.52h.006l-6.135 22.891 6.135-22.891h.005c-.004 11.799-.008 23.598-.007 23.72l.007-23.72h.005l6.121 22.895-6.121-22.895h.005l11.832 20.527-11.831-20.527h.007l16.733 16.759-16.732-16.759h.013c10.195 5.896 20.38 11.787 20.486 11.847l-20.485-11.847h.036l22.818 6.127-22.816-6.127 23.626.007-23.627-.008-.069-.018 22.89-6.133-22.889 6.132 20.524-11.853-20.525 11.853c8.338-8.34 16.674-16.681 16.76-16.767l-16.76 16.766 11.854-20.538-11.854 20.538 6.139-22.909-6.14 22.91.007-23.702-.007 23.701-6.114-22.867zm6.082 22.888h.013l-16.701 16.707a23.906 23.906 0 01-3.712-4.927l20.4-11.78zm-.038 0h.037l-20.399 11.78a23.666 23.666 0 01-2.318-5.705l22.68-6.075zm-23.451-.008l23.45.008-22.679 6.075a23.813 23.813 0 01-.771-6.027v-.056zm23.589.007h-.036l-.031-.018.067.018zm-.037 0h-.012l-.018-.017.03.017zm-.013 0h-.007l-.01-.017.017.017zm-.008 0h-.005l-.005-.017.01.017zm-.005 0h-.005v-.017l.005.017zm-.005 0h-.005l.005-.015v.015zm-.005 0h-.005l.01-.017-.005.017zm-.006 0h-.007l.017-.017-.01.017zm-.008 0h-.012l.03-.017-.018.017zm-.013 0h-.036l.067-.018-.031.018zm-22.681-6.118l22.712 6.1-.069.018-23.451-.007a23.82 23.82 0 01.808-6.111zm2.346-5.679l20.365 11.778-22.711-6.099a23.696 23.696 0 012.346-5.679zm3.725-4.891l16.641 16.669-20.366-11.778a23.92 23.92 0 013.725-4.891zm4.853-3.784l11.788 20.452-16.641-16.668a23.885 23.885 0 014.853-3.784zm5.675-2.415l6.113 22.867-11.788-20.452a23.663 23.663 0 015.675-2.415z"/>
  <circle cx="635.195" cy="336.787" r="25" fill="none" stroke="#b8b8b8" stroke-linecap="butt" stroke-width="3"/>
  <ellipse cx="635.195" cy="336.787" fill="#b8b8b8" stroke="#464646" stroke-linecap="butt" rx="6.701" ry="6.708"/>
  <ellipse cx="635.195" cy="336.787" fill="none" stroke="#464646" stroke-linecap="butt" stroke-width=".75" rx="3.026" ry="3.029"/>
  <ellipse cx="635.195" cy="336.787" fill="none" stroke="#464646" stroke-linecap="butt" stroke-width=".75" rx=".432" ry=".433"/>
  <circle cx="635.195" cy="336.787" r="22.5" fill="none" stroke="#464646" stroke-linecap="butt" stroke-width="1.5"/>
  <circle cx="635.195" cy="336.787" r="27" fill="none" stroke="#464646" stroke-linecap="butt" stroke-width="1.5"/>
  </g>
  
  
  <g id="Kuppelstange" fill="#b8b8b8" stroke="#464646" stroke-linecap="butt">
    <path d="M461.82 299.288a7.49 7.49 0 015.857-2.816c4.139 0 7.5 3.36 7.5 7.5 0 4.139-3.361 7.5-7.5 7.5a7.488 7.488 0 01-5.857-2.817l-239.251.088a7.488 7.488 0 01-5.856 2.816c-4.14 0-7.5-3.36-7.5-7.5 0-4.139 3.36-7.5 7.5-7.5 2.368 0 4.481 1.1 5.856 2.817l239.251-.088z"/>
    <circle cx="216.648" cy="304.099" r="5"/>
    <circle cx="216.648" cy="304.099" r="3"/>
    <circle cx="467.709" cy="304.098" r="5"/>
    <circle cx="467.709" cy="304.098" r="3"/>
  </g>
  <g id="treibstange" stroke="#464646" stroke-linecap="butt">
    <path fill="#f70909" stroke-width=".75" d="M354.428 308.225c-1.715 5.175-6.596 8.912-12.344 8.912-7.174 0-13-5.825-13-13 0-7.174 5.826-13 13-13 5.748 0 10.629 3.738 12.344 8.913h168.403v8.175H354.428z"/>
    <path fill="#f70909" stroke-width=".75" d="M357.043 301.849h170.325v4.578H357.043z"/>
    <circle cx="342.084" cy="304.137" r="7.5" fill="none" stroke-width=".7"/>
    <circle cx="342.084" cy="304.137" r="3" fill="none" stroke-width=".7"/>
  </g>
  <g fill="#b8b8b8" stroke="#464646" stroke-linecap="butt">
    <path d="M561.403 285.575V291H451.045v-3.493c.616.065 1.253.1 1.905.1 3.136 0 5.932-.795 7.741-2.032h100.712zM560.97 322v-5.425H450.611v3.493a17.93 17.93 0 011.905-.1c3.136 0 5.933.794 7.742 2.032H560.97z"/>
    <g id="Kolbenstange">
      <path d="M639.145 302.071a1.814 1.814 0 00-1.813-1.813H529.336c-1 0-1.813.812-1.813 1.813v3.626c0 1.001.813 1.813 1.813 1.813h107.996c1 0 1.813-.812 1.813-1.813v-3.626zM487.465 313.858h43.409v5.859h-43.409zM487.465 287.858h43.409v5.859h-43.409z"/>
      <path d="M518.855 290.604v2.4c0 1.371 1.202 2.485 2.683 2.485h9.758v16.506h-9.758c-1.481 0-2.683 1.113-2.683 2.485v2.684h-21.367v-26.56h21.367z"/>
      <path d="M531.213 296.486h4.982v14.796h-4.982z"/>
    </g>
  </g>
  <path id="Dampfzylinder" fill="#b8b8b8" stroke="#464646" stroke-linecap="butt" stroke-width="1" d="M609.406 252.854c3.809 0 6.902 3.443 6.902 7.682V272.9c0 3.765-2.439 6.902-5.653 7.556v50.289c0 .564-.412 1.023-.919 1.023h-47.285c-.507 0-.919-.459-.919-1.023v-50.289c-3.214-.654-5.653-3.791-5.653-7.556v-12.364c0-4.239 3.093-7.682 6.902-7.682h46.625z"/>
  <g id="aufbau">
    <path fill="#679662" d="M536.994 126.442H263.7c-64.123 8.593-33.411 63.404-7 117.69h280.294v-117.69z"/>
    <path fill="#679662" stroke="#a5a11a" stroke-linecap="butt" stroke-width="4" d="M254.779 247.326h-48.141c-.14 10.555-.402 15.09-4.559 17.069h-96.223V77.12h148.923v170.206z"/>
    <path fill="#679662" stroke="#a5a11a" stroke-linecap="butt" stroke-width="4" d="M178.959 110.423c0-8.057-6.541-14.598-14.598-14.598h-29.196c-8.056 0-14.598 6.541-14.598 14.598v120.869c0 8.057 6.542 14.598 14.598 14.598h29.196c8.057 0 14.598-6.541 14.598-14.598V110.423z"/>
    <path fill="#a5a11a" d="M168.088 186.109c2.414-.013 2.573-2.653-.146-2.638h-13.561c-.788 0-1.638 3.224.461 3.894l13.246-1.256z"/>
    <path fill="#464646" d="M238.171 107.547a7.771 7.771 0 00-7.768-7.767h-15.535a7.771 7.771 0 00-7.768 7.767v41.025a7.772 7.772 0 007.768 7.768h15.535a7.772 7.772 0 007.768-7.768v-41.025zM171.73 110.977c0-6.18-5.017-11.197-11.197-11.197h-22.395c-6.179 0-11.197 5.017-11.197 11.197v51.974c0 6.18 5.018 11.197 11.197 11.197h22.395c6.18 0 11.197-5.017 11.197-11.197v-51.974zM288.228 63.958v14.488c0 3.992-2.674 7.233-5.969 7.233H96.112c-3.294 0-5.968-3.241-5.968-7.233V63.958h198.084zM663.8 137.767c0-2.8-2.273-5.073-5.072-5.073h-2.995a5.075 5.075 0 00-5.072 5.073v91.59c0 2.8 2.273 5.073 5.072 5.073h2.995a5.075 5.075 0 005.072-5.073v-91.59z"/>
    <path fill="#0c7e3e" d="M656.954 121.458c.94 0 1.841.168 2.675.475v122.709a7.728 7.728 0 01-2.675.474H540.516a7.759 7.759 0 01-7.755-7.755V129.214a7.76 7.76 0 017.755-7.756h116.438z"/>
    <path fill="none" stroke="#1e6e21" stroke-linecap="butt" stroke-width="7" d="M101.339 266.208l72.593-.142c31.594-.415 32.404 1.593 32.707-18.74h446.236c-1.482 27.528 8.552 23.883 17.923 24.009"/>
    <g fill="none" stroke="#a5a11a">
      <path stroke-width="5.5" d="M131.183 253.52v83.861M171.027 253.52v83.861"/>
      <path stroke-linecap="butt" stroke-width="3.5" d="M132.676 320.81h38.351M132.676 305.41h38.351M132.676 290.01h38.351M132.676 274.61h38.351M132.573 335.626h38.351M132.676 259.21h38.351"/>
    </g>
    <g fill="#679662" stroke="#464646" stroke-linecap="butt" stroke-width=".9">
      <path d="M636.67 121.831c.131.33.198.667.198 1.008 0 4.696-12.751 8.508-28.458 8.508-15.706 0-28.458-3.812-28.458-8.508 0-.341.068-.678.199-1.008h56.519z"/>
      <path d="M588.923 121.581l-1.308.162s3.886-.778 3.898-4.002V81.649h33.647v36.092c0 1.99 1.766 4.105 3.747 4.105l-1.015-.352c-6.964 3.647-32.121 3.571-38.969.087z"/>
      <path d="M626.933 81.101c0-.757-.614-1.371-1.371-1.371h-34.304a1.371 1.371 0 000 2.741h34.304c.757 0 1.371-.614 1.371-1.37z"/>
    </g>
    <path fill="none" stroke="#a5a11a" stroke-width="3.5" d="M189.18 175.209v96.126"/>
    <text x="202.998" y="231.179" fill="#464646" font-family="Krungthep" font-size="10">
      GSAP 3.0
    </text>
    <path fill="#679662" stroke="#464646" d="M480.266 98.346c0-5.258-4.772-5.949-10.65-5.949h-21.3c-5.878 0-10.651.691-10.651 5.949v27.142c-.267 10.923 42.419 11.242 42.601 0V98.346z"/>
  </g>
  </g>
  
  
  
  <path d="M-1.32 209.273l1001.62.191.344 22.042c-24.718-1.112-32.056 19.219-32.481 32.371-.416 12.849-.156 38.566-.156 38.566l-8.569.364.61-39.077c-7.927-39.985-61.072-45.189-64.78.139l.326 37.397-7.487.116-1.35-35.029c-10.263-47.506-68.568-47.04-67.923.151l2.399 45.825-6.762.898-3.022-46.599c-5.719-46.191-63.413-50.726-65.452-1.632l.571 73.099-8.434.173-1.41-73.984c-5.12-47.547-62.492-46.705-65.232-1.61l1.472 74.282-22.541.7 1.32-75.904c-.926-44.035-65.878-47.208-67.831 1.494l1.748 75.815-11.613.624-3.211-76.097c2.462-46.424-60.609-50.855-61.817-3.602l1.768 75.623-13.224-.046 1.092-75.714c-3.67-41.548-59.704-48.379-61.603-.086l2.145 74.288-13.971-.031.832-74.219c-1.205-43.501-63.843-44.652-64.942.854l2.7 71.989-11.947.655-1.03-71.685c2.794-44.346-58.885-49.187-62.654-.507l1.91 63.402-17.601-.073-3.932-62.919c-3.402-44.178-63.42-50.581-65.855.197l2.139 45.436-10.919-.178-.583-45.213c2.889-37.775-56.239-56.355-65.228-.131l.353 46.152-11.455.757.574-47.459c3.78-42.973-58.862-52.723-64.544.958l.969 39.471-8.487.354-.446-39.414c-2.129-37.748-56.888-61.539-51.08 2.805l4.675-55.979z" fill="#4b4b4b"/>
  <path d="M805.048 309.301l3.938-4.97c.35.56.117 6.409 4.254-.973.959-1.712 7.771-2.608 7.771-2.608s-1.155 2.458.272 4.399c1.021 1.389 3.234.309 3.789 1.736 3.209 1.107 3.454 2.406-.963 4.01 1.807 1.733 4.773-.519 6.927-.737l-5.939 5.564-3.989-.358-3.929.812-4.274-.954-6.138.522c7.181-3.107-4.952-2.495-1.719-6.443z" fill="#537644"/>
  <path d="M157.723 366.209c-10.026 5.603-26.766 10.26-.022 21.048.768-2.156 17.825.389 28.126 1.494 1.327.143 11.211.951 11.211.951s10.196-4.317 11.505-3.414c4.961 3.42 12.859-.016 13.744-.004 9.868.136 13.993 4.173 13.993 4.173s5.025-3.002 9.567-3.865c9.234-1.755 16.004 2.606 16.004 2.606s.354-2.74 1.995-3.742c2.068-1.263 5.391-1.927 8.131-3.787 7.136-4.844 2.238-.137 3.335-.178 9.288-.35 17.429.291 20.975-6.156.49-.892 6.991-6.129 15.112-1.348 5.485 3.23 12.801-2.61 13.99-1.33 2.056 2.211 14.256-2.192 15.018-5.027 1.571-5.848 23.731 4.285 22.112 5.084 2.093-4.243 5.352-6.781 12.26-3.983 6.43-5.375 8.496-16.819 1.357-17.584-5.677-.609 3.09-5.649 1.856-8.034-7.194-12.835-15.804-15.757-26.07-7.097l-9.319 1.938-184.88 28.255" fill="#363636"/>
  <path d="M378.688 369.68s-9.69-7.832-1.357-11.061c5.275-2.043 11.585-2.088 10.655-4.878-.649-1.944 5.207-.216 7.376-2.281 2.169-2.065 13.206-1.794 8.353-5.554-4.714-3.65 10.475-4.51 10.475-4.51s-2.959 1.873.428-4.725c.956-1.861-1.258-8.263 2.729-4.934 3.275 2.733 5.38-5.19 12.515-3.071 4.289 1.274 12.368 8.746 10.078 2.59-1.24-3.336 5.893 1.971 8.605 4.835 3.588 3.789 2.495 10.764 4.851 8.101 2.045-2.313 2.23 1.56 4.349 2.467 2.204.944 5.394-2.436 5.519 2.129.126 4.616 6.446 1.736 9.332 3.714 2.017 1.382-17.95 3.305-4.717 4.882 3.482.416-6.176 3.259-4.85 4.606 2.072 2.106 7.914 7.639 3.007 6.595-1.613-.344-.646 3.274-1.803 4.794-2.105 2.764.145 9.01.898 11.725.753 2.716-.396 6.935-.396 6.935l-.105 8.817s-46.161 3.577-50.635 1.32c-4.473-2.256-20.441-.156-26.856-.266-6.415-.111-10.792-11.694-11.667-16.025-.876-4.331 3.216-16.205 3.216-16.205z" fill="#758c74"/>
  <path d="M265.069 324.216c4.242.056 11.158-.659 15.343-2.423 2.634-1.109 11.246 2.357 13.85.297.495-7.124 9.581-9.908 18.043-13.006 3.15-4.943 6.358-8.531 9.97-2.631.093 3.792 6.659 4.544 5.465 8.048-1.182 3.468 6.629 2.543 10.662 3.354-.83 2.617-2.515 3.551-1.357 5.617 1.368 2.441 5.913 5.923 9.157 7.844-1.546 1.708 7.831-8.326 11.446-2.884 2.67 4.02 15.116-4.857 17.279 6.883-1.237 1.796-3.085 15.474-9.256 16.518-5.835.987-11.538 9.329-13.345 8.336-3.905-2.149-17.138-3.02-21.335-2.069 0 0-6.009 3.453-12.404 8.143-6.012 4.408-23.458-11.175-24.122-12.591-6.201 5.921-12.172 4.885-18.092 2.325l-11.304-31.761z" fill="#486f30"/>
  <path d="M555.51 323.97c4.242.056 11.158-.659 15.343-2.423 2.634-1.109 11.246 2.357 13.85.297.495-7.124 7.224-3.3 15.686-6.399 3.15-4.943 4.734 5.897 8.346 11.796.092 3.793 3.457-19.38 9.446-12.986 3.129 3.341 6.016-1.204 10.049-.394-.831 2.617-1.902 7.298-.744 9.365 1.368 2.441 5.913 5.923 9.157 7.844-1.546 1.708 7.831-8.326 11.446-2.884 2.67 4.019 15.116-4.857 17.279 6.883-.605.879 21.491-2.545 28.291.994 7.1 3.696-1.132 14.353-4.284 14.886-2.644.447-27.352-1.587-27.352-1.587s-18.268 11.104-19.255 10.56c-3.906-2.148-15.44-10.245-19.637-9.293 0 0-7.708 10.678-14.103 15.367-6.012 4.409-23.458-11.174-24.122-12.59-6.201 5.921-12.172 4.885-18.092 2.325-6.541-7.478-31.177-3.634-26.504-6.009 25.79-13.105-.679-15.198 15.2-25.752z" fill="#486f30"/>
  <path d="M18.473 306.341c.605-2.831 3.685-4.974 18.687-3.801 9.48.079 7.57-8.313 25.194-5.727l11.573-.656 10.323 9.422c9.352 3.737 18.896 5.059 28.878.843 8.277-2.686 14.722-1.373 19.419 3.755 6.004 3.067 7.288 6.664 4.274 10.745-12.734 4.746-25.68 5.134-38.843 1.059-11.966-2.262-35.954-9.553-36.487.551-.49 9.285-5.425 1.316-8.152 2.166 0 0-28.617-6.164-31.746-3.976-3.129 2.189-3.12-14.381-3.12-14.381z" fill="#486f30"/>
  <path d="M166.365 383.746c-11.119-1.835-3.807-4.162-14.555-3.588-10.748.574-15.493 9.536-21.696-.292-6.203-9.828-15.278-22.746-9.837-21.206 8.547 2.418 3.994-2.776 5.852-8.064 2.479-7.057 5.057-7.681 8.14-11.52 3.083-3.84 3.863-4.387-.463-7.18-4.326-2.794-11.344-8.7-4.445-13.733 6.9-5.034 10.868-8.85 17.608-8.285 7.914.664 12.949-1.251 12.67-10.686-.185-6.261-2.429-10.937 5.945-1.49 8.373 9.447 9.822 2.008 15.699 5.5 5.877 3.491 4.479.572 13.585.054 9.106-.517 13.348 3.84 17.447 4.966 4.098 1.126-1.626 6.619 10.285 2.657 11.911-3.962 14.267-4.572 19.92.683 5.652 5.256 7.562 2.271 14.247 8.797 6.684 6.525 11.99 8.552 17.601 12.615 5.611 4.064 12.161 2.036 11.14 9.455-1.02 7.418-9.263 7.733-5.906 10.943 3.357 3.209 5.944 2.629 10.407 7.733 4.463 5.105 7.155 14.083-9.695 14.63-16.849.547-19.814-1.682-24.778 3.207-4.964 4.89-6.702 7.144-22.068 2.672-15.365-4.472-18.205-7.588-27.338-1.52-9.133 6.068-34.198 8.532-32.022 4.627 2.176-3.905 3.377.86-7.743-.975z" fill="#1c533f"/>
  <path d="M903.532 344.702c-4.032 2.49-14.507 2.645-24.296 1.993-10.061-.671-20.384-1.957-25.26-1.715-3.815.189-10.38-6.604-9.184-4.16 5.36 10.949-6.886 8.851-10.237 3.917-1.206-1.776 2.2-8.211-.034-7.808-8.001 1.443-12.583-10.836-8.771-9.833 7.651 2.012 3.575-2.309 5.238-6.708.825-2.185 15.566-.927 13.056-3.374-2.873-2.8-6.2-5.525-6.2-5.525s5.425 2.032 8.891.552c2.45-1.046 3.077-5.776 3.837-5.717 3.016.236 14.427 5.646 13.174 1.665-1.044-3.318 2.666-1.537 5.344-3.353 1.987-1.347 3.066-6.301 3.005-8.22-.057-1.804 3.128 5.498 6.586 7.471 2.217 1.265 4.135-8.222 6.732-2.414 2.095 4.685 9.939-4.183 12.21-2.929 5.26 2.904.408 4.284 8.559 3.853 2.674-.141 3.561 3.236 5.247 3.522 3.451.585 6.517-1.458 8.982-.828 1.698.434 3.554-10.852 1.058-7.134-3.337 4.972-10.878.719-10.878.719s3.707-10.389 6.749-11.329c3.49-1.079 8.051 6.037 10.518 5.391 5.068-1.326 6.412-9.229 7.312-4.822 2.1 10.288 17.153 4.298 17.153 4.298s-5.254 4.945-6.218 7.751c-1.271 3.704 5.737 4.558 8.234-1.351 1.519-3.595 8.123.464 9.576 1.783 3.249 2.947 6.16-3.069 11.895-6.129 2.164-1.154 6.804 4.513 6.804 4.513s6.821-6.076 8.088-5.223c5.022 3.38 9.025 5.763 8.112 11.935-.258 1.741-14.816 6.136-14.816 6.136s10.627 1.627 3.257 5.436c-4.015 2.075 4.207 7.322 5.765 8.706 3.005 2.67-19.337-.887-15.342 3.359 2.204 2.343 8.66 12.774 6.395 10.767-5.286-4.685-10.503 5.525-15.073 1.404-3.148-2.84-12.035-4.291-14.696-4.348-6.287-.134-4.361 4.158-7.483 7.016-3.711 3.397-3.913-4.091-12.384-5.735-1.672-.325-5.103 8.57-7.369 7.957-13.754-3.72-15.361-6.537-23.536-1.489z" fill="#1c533f"/>
  <path d="M.663 341.719c1.439-3.138 27.51-1.663 37.032 2.852 6.261 2.088 4.955 2.657 15.698 9.354-12.237-16.38 13.616-.186 13.616-.186 4.835 6.282 12.13-.897 20.297-3.657-.434 1.868 19.79-3.532 20.222.721.532 5.235-18.045 19.947-10.164 18.417 2.86 4.803 2.393 9.223-1.101 13.295-6.889 1.889-8.715-4.793-14.261-7.582-2.655-1.335-9.552 3.04-11.895.62-7.11-5.131-20.352-18.596-24.408-7.053-3.727 10.608-8.658-6.436-10.779-6.031 0 0-16.697 10.259-19.861 10.537-20.208 1.776-22.044-29.65-14.396-31.287z" fill="#486f30"/>
  <path d="M852.04 349.487c.536-11.148 9.537-5.838 11.913-6.984 1.545-.745 3.528-7.067 3.528-7.067s5.785 3.941 7.646 5.371c.579.425 1.747-11.432 8.64-5.879 2.054 1.655 11.266 3.159 11.266 3.159s-1.436 4.954.45 3.341c2.902-2.479 6.491-3.086 6.273 1.319 7.504-4.164 17.643-.739 9.684 1.957 2.99 1.316-6.724 2.981-3.157 2.815l-6.486 1.941-6.604-.273-6.503.617-7.075-.724-10.162.396c-1.184-.482-10.489-2.256-10.489-2.256s-12.379 4.203-8.924 2.267z" fill="#537644"/>
</svg>
  
<p class="green">powered by GSAP scrollTrigger</p>
  
</div>


              
            
!

CSS

              
                
body{
  margin:0;
  height:10000px;
  background-color:grey;
}
#wrap{
  position:relative;
  width:100%;
  height:100vh;

}
#bridge{
  position:absolute;
  top:0;
  left:0;
  height:100vh;
  visibility:hidden;
  will-change: transform;
}
#lok{
  will-change: transform;
}
.green{
  position: relative;
  font-family: sans-serif;
  color: #0c3c0c;
  font-weight: 600;
  font-size: 14px;
  padding: 5px;
  margin: 0;
  float: right;
}


              
            
!

JS

              
                console.clear();

gsap.set('#bridge', {autoAlpha:1});

MorphSVGPlugin.convertToPath("circle, rect, ellipse, line, polygon, polyline");

var treibstange = document.querySelector("#treibstange"),
    Kuppelstange = document.querySelector("#Kuppelstange"),
    kolbenStange = document.querySelector("#Kolbenstange"),
    duration = 1,
    umfang = Math.PI *22.5, 
    radius = 22.5;

gsap.set('#helperCircle, #helperCircle02', {rotation:180, transformOrigin:'center'})

function theLoc(rep) {
var loc = gsap.timeline({repeat:rep})

.to('#Treibrad, #KuppelradH, #KuppelradV', {
  rotation: 360, transformOrigin:'center',
  duration: duration, ease: 'none'
}, 0)
.to('.small', {
  rotation: 360*2.4, transformOrigin:'center',
  duration: duration, ease: 'none'
}, 0)

.to(kolbenStange, {
  duration: duration / 2,
  x: -radius ,
  ease: "sine.inOut",
  repeat: 1,
  yoyo: true
}, 0)
.to(treibstange, {
  motionPath: {
    path: "#helperCircle",
    align: "#helperCircle",
    offsetX:-13.1, 
    offsetY:-13.0,
  },
  duration:duration, ease: 'none',
  onUpdate: function() {
    let prog = this.progress();  
    gsap.set(treibstange, {rotation: Math.sin(prog * Math.PI * 2) * - 6.5, transformOrigin:'left center'}); // ???
  }
},0)

.to(Kuppelstange, {
  motionPath: {
    path: "#helperCircle02",
    align: "#helperCircle02",
    offsetX:-7.5,
    offsetY:-7.5,
  },
  duration:duration, ease: 'none'
},0)

return loc;
}


var svgWidth = document.querySelector("#bridge").getBoundingClientRect().width,
    ww = window.innerWidth;

console.log(svgWidth, umfang);

var action = gsap.timeline({
    scrollTrigger: {
      trigger: "#wrap",
      scrub: 1, 
      pin: true, 
      start: "top top",
      end:"+=4000",
    }
  })
.to('#bridge', {x:-svgWidth + ww, duration:30, ease:'none'} )
.to('#lok', {x:1000, duration:45, ease:'none'},0)
.from('#bridge', {attr:{viewBox:'0 140 1000 80'}, duration:27, ease:'none'},3 )
.add(theLoc(45), 0)

// =============================
document.body.addEventListener('pointerdown', horn)

function horn(){
  new Audio('https://assets.codepen.io/174563/pfeife.mp3').play();
}



              
            
!
999px

Console