123

Pen Settings

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

You're using npm packages, so we've auto-selected Babel for you here, which we require to process imports and make it all work. If you need to use a different JavaScript preprocessor, remove the packages in the npm tab.

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

Use npm Packages

We can make npm packages available for you to use in your JavaScript. We use webpack to prepare them and make them available to import. We'll also process your JavaScript with Babel.

⚠️ This feature can only be used by logged in users.

Code Indentation

     

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div id="voiture_anim">

  <div id="fond"></div>

  <svg id="nuage0" class="nuage" xmlns="http://www.w3.org/2000/svg" width="115" height="62">
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M1 40c.154.463.338.92.455 1.39 1.396 5.569 4.846 9.673 10.566 12.063 3.31 1.382 6.797 1.697 10.355.872a32.27 32.27 0 0 0 2.906-.828c.469-.155.727-.075 1.015.278 2.99 3.649 6.947 5.984 11.827 6.89 4.477.831 8.875.48 12.988-1.464 1.414-.668 2.729-1.529 4.035-2.373.521-.339.909-.457 1.49-.148 2.86 1.521 5.972 2.422 9.225 2.887 3.537.506 7.08.494 10.629-.047a31.872 31.872 0 0 0 8.289-2.455c1.118-.502 2.294-1.064 3.135-1.867.998-.951 1.878-.577 2.848-.244 2.608.896 5.288 1.098 8.049.844 2.663-.246 5.107-1.035 7.39-2.266 2.037-1.098 3.714-2.576 5.074-4.336 1.849-2.393 2.726-5.072 2.684-7.997-.048-3.468-1.348-6.511-3.886-9.079-3.474-3.514-7.857-5.23-13.037-5.25a25.676 25.676 0 0 0-2.896.137c-.544.06-.751-.052-.899-.538-.977-3.22-2.887-5.95-5.567-8.186-3.591-2.995-7.834-4.704-12.72-5.129a26.727 26.727 0 0 0-10.248 1.064c-.156-.3-.322-.621-.492-.94-1.367-2.58-3.16-4.896-5.477-6.825-3.324-2.768-7.159-4.661-11.605-5.558-4.895-.987-9.68-.683-14.317.921-5.228 1.807-9.304 4.973-12.296 9.289-1.788 2.579-2.897 5.392-3.485 8.379-.099.496-.433.571-.832.626-5.583.782-9.628 3.574-12.527 7.897-1.365 2.034-2.133 4.246-2.528 6.583-.016.09-.097.17-.148.254V40z"/>
            </svg>
  <svg id="nuage1" class="nuage" xmlns="http://www.w3.org/2000/svg" width="180" height="86">
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M178.92 37.338c-.39-2.494-1.146-4.854-2.49-7.025-2.856-4.614-6.843-7.594-12.343-8.429-.394-.06-.723-.14-.819-.669-.579-3.188-1.672-6.19-3.434-8.942-2.947-4.606-6.964-7.985-12.114-9.915-4.569-1.711-9.283-2.037-14.106-.983-4.38.957-8.158 2.978-11.434 5.932-2.281 2.059-4.047 4.53-5.396 7.284-.167.341-.331.684-.485 1.003a24.426 24.426 0 0 0-10.097-1.135c-4.812.454-8.993 2.278-12.53 5.475-2.642 2.386-4.523 5.3-5.486 8.736-.146.519-.349.638-.885.574a23.437 23.437 0 0 0-2.854-.146c-4.357.018-8.136 1.368-11.28 4.092-1.527-2.542-3.481-4.833-5.968-6.761-3.812-2.954-8.21-4.974-13.31-5.932-5.615-1.054-11.102-.729-16.422.983-5.995 1.929-10.671 5.308-14.103 9.914-2.051 2.753-3.322 5.755-3.997 8.943-.113.529-.495.609-.954.669-6.402.835-11.042 3.815-14.368 8.429-1.566 2.171-2.446 4.53-2.899 7.025-.018.095-.111.181-.168.271v5.503c.176.493.386.98.521 1.482 1.602 5.943 5.557 10.323 12.119 12.875 3.794 1.475 7.795 1.812 11.877.931a39.715 39.715 0 0 0 3.333-.883c.537-.167.833-.081 1.164.297 3.429 3.894 7.968 6.385 13.565 7.353 5.136.887 10.178.513 14.896-1.562 1.623-.714 3.131-1.633 4.627-2.535.599-.36 1.044-.487 1.71-.157 3.28 1.624 6.849 2.584 10.579 3.08 4.058.54 8.122.528 12.191-.05a38.615 38.615 0 0 0 9.508-2.62c1.281-.535 2.63-1.136 3.595-1.992 1.144-1.016 2.153-.617 3.266-.26 2.992.956 6.064 1.171 9.23.899 3.055-.264 5.859-1.104 8.477-2.417a17.981 17.981 0 0 0 5.82-4.629c2.013-2.423 3.008-5.126 3.064-8.064 3.813 1.722 7.854 2.011 11.966 1.184 4.809-.967 8.707-3.458 11.652-7.353.284-.378.539-.464 1-.297.938.337 1.895.64 2.863.883 3.506.881 6.942.545 10.202-.931 5.637-2.551 9.034-6.931 10.41-12.875.116-.501.297-.988.448-1.482v-5.503c-.046-.088-.126-.173-.141-.27z"/>
            </svg>
  <svg id="nuage2" class="nuage" xmlns="http://www.w3.org/2000/svg" width="115" height="62">
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M1 40c.154.463.338.92.455 1.39 1.396 5.569 4.846 9.673 10.566 12.063 3.31 1.382 6.797 1.697 10.355.872a32.27 32.27 0 0 0 2.906-.828c.469-.155.727-.075 1.015.278 2.99 3.649 6.947 5.984 11.827 6.89 4.477.831 8.875.48 12.988-1.464 1.414-.668 2.729-1.529 4.035-2.373.521-.339.909-.457 1.49-.148 2.86 1.521 5.972 2.422 9.225 2.887 3.537.506 7.08.494 10.629-.047a31.872 31.872 0 0 0 8.289-2.455c1.118-.502 2.294-1.064 3.135-1.867.998-.951 1.878-.577 2.848-.244 2.608.896 5.288 1.098 8.049.844 2.663-.246 5.107-1.035 7.39-2.266 2.037-1.098 3.714-2.576 5.074-4.336 1.849-2.393 2.726-5.072 2.684-7.997-.048-3.468-1.348-6.511-3.886-9.079-3.474-3.514-7.857-5.23-13.037-5.25a25.676 25.676 0 0 0-2.896.137c-.544.06-.751-.052-.899-.538-.977-3.22-2.887-5.95-5.567-8.186-3.591-2.995-7.834-4.704-12.72-5.129a26.727 26.727 0 0 0-10.248 1.064c-.156-.3-.322-.621-.492-.94-1.367-2.58-3.16-4.896-5.477-6.825-3.324-2.768-7.159-4.661-11.605-5.558-4.895-.987-9.68-.683-14.317.921-5.228 1.807-9.304 4.973-12.296 9.289-1.788 2.579-2.897 5.392-3.485 8.379-.099.496-.433.571-.832.626-5.583.782-9.628 3.574-12.527 7.897-1.365 2.034-2.133 4.246-2.528 6.583-.016.09-.097.17-.148.254V40z"/>
            </svg>
  <svg id="nuage3" class="nuage" xmlns="http://www.w3.org/2000/svg" width="105" height="62">
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M104.086 40.5c-.141.463-.308.92-.415 1.39-1.272 5.569-4.415 9.673-9.628 12.063-3.016 1.382-6.193 1.697-9.437.872a27.412 27.412 0 0 1-2.647-.828c-.427-.155-.662-.075-.925.278-2.725 3.649-6.33 5.984-10.776 6.89-4.08.831-8.087.48-11.835-1.464-1.289-.668-2.487-1.529-3.677-2.373-.476-.339-.829-.457-1.358-.148-2.606 1.521-5.441 2.422-8.405 2.887a30.068 30.068 0 0 1-9.686-.047 27.154 27.154 0 0 1-7.553-2.455c-1.019-.502-2.09-1.064-2.856-1.867-.909-.951-1.711-.577-2.595-.244-2.377.896-4.818 1.098-7.334.844-2.427-.246-4.654-1.035-6.733-2.266-1.856-1.098-3.385-2.576-4.624-4.336-1.685-2.393-2.483-5.072-2.445-7.997.044-3.468 1.229-6.511 3.541-9.079 3.165-3.514 7.159-5.23 11.879-5.25.88-.003 1.767.031 2.639.137.496.06.685-.052.819-.538.891-3.22 2.631-5.95 5.073-8.186 3.272-2.995 7.139-4.704 11.59-5.129a22.302 22.302 0 0 1 9.338 1.064c.143-.3.295-.621.449-.94 1.246-2.58 2.88-4.896 4.99-6.825 3.028-2.768 6.523-4.661 10.574-5.558 4.461-.987 8.82-.683 13.047.921 4.764 1.807 8.478 4.973 11.204 9.289 1.629 2.579 2.64 5.392 3.176 8.379.09.496.394.571.758.626 5.087.782 8.773 3.574 11.415 7.897 1.244 2.034 1.943 4.246 2.304 6.583.014.09.088.17.134.254l-.001 5.156z"/>
            </svg>
  <svg id="nuage4" class="nuage" xmlns="http://www.w3.org/2000/svg" width="115" height="62">
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M1 40c.154.463.338.92.455 1.39 1.396 5.569 4.846 9.673 10.566 12.063 3.31 1.382 6.797 1.697 10.355.872a32.27 32.27 0 0 0 2.906-.828c.469-.155.727-.075 1.015.278 2.99 3.649 6.947 5.984 11.827 6.89 4.477.831 8.875.48 12.988-1.464 1.414-.668 2.729-1.529 4.035-2.373.521-.339.909-.457 1.49-.148 2.86 1.521 5.972 2.422 9.225 2.887 3.537.506 7.08.494 10.629-.047a31.872 31.872 0 0 0 8.289-2.455c1.118-.502 2.294-1.064 3.135-1.867.998-.951 1.878-.577 2.848-.244 2.608.896 5.288 1.098 8.049.844 2.663-.246 5.107-1.035 7.39-2.266 2.037-1.098 3.714-2.576 5.074-4.336 1.849-2.393 2.726-5.072 2.684-7.997-.048-3.468-1.348-6.511-3.886-9.079-3.474-3.514-7.857-5.23-13.037-5.25a25.676 25.676 0 0 0-2.896.137c-.544.06-.751-.052-.899-.538-.977-3.22-2.887-5.95-5.567-8.186-3.591-2.995-7.834-4.704-12.72-5.129a26.727 26.727 0 0 0-10.248 1.064c-.156-.3-.322-.621-.492-.94-1.367-2.58-3.16-4.896-5.477-6.825-3.324-2.768-7.159-4.661-11.605-5.558-4.895-.987-9.68-.683-14.317.921-5.228 1.807-9.304 4.973-12.296 9.289-1.788 2.579-2.897 5.392-3.485 8.379-.099.496-.433.571-.832.626-5.583.782-9.628 3.574-12.527 7.897-1.365 2.034-2.133 4.246-2.528 6.583-.016.09-.097.17-.148.254V40z"/>
            </svg>
  <svg id="nuage5" class="nuage" xmlns="http://www.w3.org/2000/svg" width="180" height="86">
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#FFF" d="M178.92 37.338c-.39-2.494-1.146-4.854-2.49-7.025-2.856-4.614-6.843-7.594-12.343-8.429-.394-.06-.723-.14-.819-.669-.579-3.188-1.672-6.19-3.434-8.942-2.947-4.606-6.964-7.985-12.114-9.915-4.569-1.711-9.283-2.037-14.106-.983-4.38.957-8.158 2.978-11.434 5.932-2.281 2.059-4.047 4.53-5.396 7.284-.167.341-.331.684-.485 1.003a24.426 24.426 0 0 0-10.097-1.135c-4.812.454-8.993 2.278-12.53 5.475-2.642 2.386-4.523 5.3-5.486 8.736-.146.519-.349.638-.885.574a23.437 23.437 0 0 0-2.854-.146c-4.357.018-8.136 1.368-11.28 4.092-1.527-2.542-3.481-4.833-5.968-6.761-3.812-2.954-8.21-4.974-13.31-5.932-5.615-1.054-11.102-.729-16.422.983-5.995 1.929-10.671 5.308-14.103 9.914-2.051 2.753-3.322 5.755-3.997 8.943-.113.529-.495.609-.954.669-6.402.835-11.042 3.815-14.368 8.429-1.566 2.171-2.446 4.53-2.899 7.025-.018.095-.111.181-.168.271v5.503c.176.493.386.98.521 1.482 1.602 5.943 5.557 10.323 12.119 12.875 3.794 1.475 7.795 1.812 11.877.931a39.715 39.715 0 0 0 3.333-.883c.537-.167.833-.081 1.164.297 3.429 3.894 7.968 6.385 13.565 7.353 5.136.887 10.178.513 14.896-1.562 1.623-.714 3.131-1.633 4.627-2.535.599-.36 1.044-.487 1.71-.157 3.28 1.624 6.849 2.584 10.579 3.08 4.058.54 8.122.528 12.191-.05a38.615 38.615 0 0 0 9.508-2.62c1.281-.535 2.63-1.136 3.595-1.992 1.144-1.016 2.153-.617 3.266-.26 2.992.956 6.064 1.171 9.23.899 3.055-.264 5.859-1.104 8.477-2.417a17.981 17.981 0 0 0 5.82-4.629c2.013-2.423 3.008-5.126 3.064-8.064 3.813 1.722 7.854 2.011 11.966 1.184 4.809-.967 8.707-3.458 11.652-7.353.284-.378.539-.464 1-.297.938.337 1.895.64 2.863.883 3.506.881 6.942.545 10.202-.931 5.637-2.551 9.034-6.931 10.41-12.875.116-.501.297-.988.448-1.482v-5.503c-.046-.088-.126-.173-.141-.27z"/>
            </svg>

  <svg id="arbre1" class="arbre" xmlns="http://www.w3.org/2000/svg" width="180" height="221">
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#924214" stroke="#773413" stroke-miterlimit="10" d="M115.347 148.671c-1.97 5.604-5.688 9.663-10.91 12.412-.586.308-1.29.863-1.452 1.44-3.006 10.666-5.394 21.451-5.177 32.623.091 4.639.878 9.167 3.011 13.374 1.79 3.535 4.708 5.738 8.268 7.227 1.28.537 2.545 1.119 3.816 1.679-.039.169-.079.339-.116.51-1.856-.297-3.748-.45-5.56-.916-6.137-1.58-12.022-.884-17.752 1.675-2.45 1.096-4.9 1.128-7.514.431-3.95-1.056-7.938-2.198-11.978-2.614-3.418-.351-6.937.275-10.41.479-.638.037-1.273.129-2.087-.214.552-.416 1.086-.861 1.662-1.244 12.07-7.995 19.769-18.966 22.001-33.394 1.49-9.633-3.394-28.099-3.653-27.814-4.103 4.515 8.241-1.294 11.768.302 6.182 2.8 12.078 1.972 17.718-1.444 5.041-3.054 8.781-5.693 8.365-4.512z"/>
                <path fill="#008D36" stroke="#065629" stroke-miterlimit="10" d="M18.141 57.307S12.115 23.54 44.958 32.505c0 0-3.917-14.044 11.751-23.307 15.667-9.264 32.24-.299 32.24-.299s13.558-10.159 26.515-5.378c12.956 4.781 14.464 20.02 14.464 20.02s12.956-7.171 22.296-2.39c9.341 4.781 8.438 19.124 8.438 19.124s11.847.395 16.953 13.857c5.105 13.462-10.324 24.391-10.324 24.391s12.315 4.017 8.829 31.436c-3.488 27.419-26.306 27.729-26.306 27.729s.651 11.053-11.804 14.017c-12.454 2.964-20.738-3.857-20.738-3.857s-.434 12.379-13.884 16.702c-13.45 4.322-24.985-8.334-24.985-8.334s-9.389 13.522-33.176 5.247c-23.787-8.274-18.348-28.556-18.348-28.556s-15.651 1.26-21.754-12.82c-6.102-14.081 6.389-29.611 6.389-29.611S5.873 76.24 7.242 69.2c1.37-7.041 10.899-11.893 10.899-11.893z"/>
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#055629" d="M149.331 135.087c-1.22 8.801-7.409 14.356-16.086 14.849-5.563.315-10.496-1.351-15.072-4.363-.349-.228-.708-.438-1.2-.744-.381 1.335-.664 2.562-1.079 3.744-1.97 5.601-5.688 9.663-10.91 12.41-.586.309-23.414 1.962-25.909-7.565-.419.323-.773.521-1.032.809-4.104 4.513-9.315 6.661-15.279 7.094-8.293.601-16.074-1.315-23.319-5.291-6.446-3.537-10.339-8.912-10.854-16.446a14.238 14.238 0 0 1 .231-3.686c2.009 8.153 7.641 12.565 14.987 15.342 7.949 3.007 16.031 4.605 24.457 2.354 3.906-1.045 7.437-2.872 10.191-5.93.906-1.005 1.411-.91 2.291.075 2.555 2.861 5.536 5.19 9.062 6.788 6.183 2.801 12.078 1.971 17.719-1.445 5.042-3.054 8.46-7.393 9.878-13.208.07-.288.211-.56.402-1.059 1.461.742 2.84 1.46 4.233 2.15 7.202 3.566 14.352 3.796 21.407-.396 3.746-2.226 6.062-5.487 6.729-9.823.163-1.061.612-1.453 1.628-1.571 10.131-1.192 17.241-6.437 21.148-15.945.015-.037.106-.039.373-.128-1.292 5.985-3.802 11.147-8.21 15.305-4.421 4.168-9.78 6.159-15.786 6.68zM17.488 83.559c-3.241-3.723-5.004-7.485-4.869-12.015.183-6.098 3.122-10.284 8.891-12.166 1.883-.614 1.773-1.688 1.619-3.049-.425-3.729-.019-7.368 1.343-10.855 2.276-5.824 6.67-9.06 12.786-9.608 3.075-.275 6.234.076 9.325.409 1.472.158 1.757-.221 1.563-1.516-.921-6.171.427-11.882 4.447-16.577 5.95-6.951 13.589-10.939 22.819-11.595 4.93-.35 9.361 1.049 13.542 3.611.59.362 1.887.085 2.592-.339 8.774-5.278 17.711-5.141 26.562-.519 5.854 3.057 7.866 8.622 8.275 14.905.045.674.058 1.35.106 2.024.007.101.13.193.162.238 2.702-1.125 5.344-2.367 8.078-3.334 7.288-2.578 15.169-.051 19.16 6.167 2.333 3.633 2.86 7.701 1.969 11.877-.328 1.536-.154 2.231 1.401 2.893 4.612 1.961 8.556 4.818 10.836 9.494 2.39 4.902 2.638 13.397-1.624 17.54-.264.255-.474.592-.776.779-2.379 1.469-4.774 2.913-7.434 4.526.162-.559.166-.927.348-1.141 4.092-4.769 5.037-10.447 4.438-16.426-.49-4.917-3.756-7.918-8.051-9.676-1.996-.817-2.894-1.47-2.68-3.936.516-5.935-1.611-10.85-6.873-14.074-3.657-2.241-7.689-2.531-11.731-1.732-2.979.588-5.881 1.651-8.757 2.672-1.426.506-1.784.134-2.001-1.259-.964-6.176-4.176-10.827-9.427-14.249-7.23-4.712-14.394-3.661-21.704-.339-.941.428-2.346.673-3.217.283-6.091-2.729-12.229-2.247-18.333-.373-2.792.857-5.556 2.028-8.077 3.498-6.285 3.666-9.13 9.539-9.759 16.606-.157 1.753-.024 3.533-.024 5.564-.816-.197-1.354-.25-1.828-.453-6.32-2.704-12.648-.43-17.232 3.879-3.167 2.978-5.482 6.439-5.965 10.879-.138 1.27-.089 2.564-.054 3.846.027.976-.191 1.513-1.294 1.816-4.487 1.234-7.054 4.43-8.906 8.585-1.859 4.175-1.339 8.079.342 12.051.066.151.012.346.012 1.089z"/>
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#055629" d="M89.116 87.062c.584-1.194.922-2.636 1.812-3.522 1.274-1.269 2.896-2.23 4.475-3.136 1.47-.844 3.11-1.384 4.62-2.163 5.119-2.635 12.194-1.985 16.355 1.908 1.399 1.309 2.117 3.351 2.989 4.8 2.708.238 5.521.175 8.174.793 3.937.918 6.67 3.537 8.085 7.377.467 1.27 1.1 2.125 2.386 2.785 4.694 2.412 7.976 8.583 6.092 13.831-.286.797.023 1.903.296 2.794 1.105 3.591 1.338 7.02-1.477 10.006-.317.336-.722.585-1.459 1.171-.178-3.288-2.362-5.725-.701-9.104 1.986-4.045-.482-9.755-4.966-12.712-1.435-.947-2.351-1.938-2.943-3.66-1.739-5.044-7.312-8.767-12.232-8.367-1.538.125-3.037.732-4.213 1.031-.992-1.86-1.638-3.835-2.891-5.28-3.887-4.478-12.666-5.464-17.798-1.355-1.753 1.404-3.95 2.25-5.945 3.352-.219-.181-.44-.365-.659-.549zM44.689 83.592c-6.441 1.097-9.198 6.066-6.941 12.018.465 1.227.703 2.542 1.079 3.94-1.895-.315-3.37-2.201-3.74-4.414a268.4 268.4 0 0 0-.731-4.163c-.845-4.629 1.927-8.993 6.339-10.153.498-.131 1.117-.892 1.179-1.42.504-4.32 2.523-6.575 6.798-7.568.789-.183 1.606-.633 2.204-1.185 2.876-2.655 5.995-3.249 9.63-1.654 1 .439 2.324.076 3.409.395 1.304.385 2.543 1.047 3.735 1.723.282.161.393.875.326 1.291-.03.186-.696.361-1.081.378-1.644.073-3.151.004-4.67-1.074-2.031-1.441-5.552-.622-7.705 1.151-.838.689-1.94 1.246-3 1.441-4.208.776-6.927 3.987-6.833 8.308.008.299.002.597.002.986zM132.219 51.424c-2.236-5.671-8.084-7.288-12.997-3.811-1.012.715-2.202 1.176-3.311 1.754l-.533-.451c.34-.691.505-1.595 1.047-2.039 3.177-2.609 6.697-4.625 10.962-4.262 3.246.276 5.823 1.82 6.856 5.229 4.975-.784 8.552.942 10.619 5.601.245.55.908.955 1.444 1.33 2.896 2.017 4.16 4.662 3.55 8.247-.186 1.086.187 2.284.384 3.416.439 2.504-.1 3.991-2.362 5.295-.257-1.661-.951-3.264-.636-4.632 1.016-4.42.377-6.496-3.364-9.143a3.545 3.545 0 0 1-1.19-1.519c-1.65-4.215-5.137-6.123-9.487-5.124-.291.068-.597.069-.982.109zM5.487 108.264c1.22 8.609 6.309 13.459 14.58 15.143 2.918.594 5.897.887 8.847 1.325.348.05.689.152 1.173.263-.35 1.563-.631 3.058-1.054 4.511-.093.32-.698.72-1.049.701-5.956-.302-11.705-1.34-16.479-5.305-4.523-3.757-6.401-9.087-6.018-16.638zM100.239 48.805c-1.388-.734-2.821-1.166-3.559-2.862-.989-2.273-3.775-3.375-6.196-2.867-.663.139-1.477.164-2.078-.095-3.882-1.671-6.673-.833-8.896 2.782-.097.157-.191.315-.15.247-7.916-2.637-9.628 2.794-11.173 8.458l-.46-.097c-.231-.54-.717-1.112-.654-1.614.468-3.681 1.209-7.279 4.589-9.554 1.715-1.155 3.558-1.49 5.606-.894.497.145 1.386-.174 1.745-.585 2.1-2.409 4.657-2.945 7.646-2.232.919.219 1.9.39 2.831.316 3.012-.239 5.594.257 7.214 3.211.31.564 1.158.845 1.781 1.216 1.778 1.061 2.364 2.484 1.754 4.57z"/>
            </svg>

  <svg id="arbre2" class="arbre" xmlns="http://www.w3.org/2000/svg" width="180" height="221">
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#924214" stroke="#773413" stroke-miterlimit="10" d="M115.347 148.671c-1.97 5.604-5.688 9.663-10.91 12.412-.586.308-1.29.863-1.452 1.44-3.006 10.666-5.394 21.451-5.177 32.623.091 4.639.878 9.167 3.011 13.374 1.79 3.535 4.708 5.738 8.268 7.227 1.28.537 2.545 1.119 3.816 1.679-.039.169-.079.339-.116.51-1.856-.297-3.748-.45-5.56-.916-6.137-1.58-12.022-.884-17.752 1.675-2.45 1.096-4.9 1.128-7.514.431-3.95-1.056-7.938-2.198-11.978-2.614-3.418-.351-6.937.275-10.41.479-.638.037-1.273.129-2.087-.214.552-.416 1.086-.861 1.662-1.244 12.07-7.995 19.769-18.966 22.001-33.394 1.49-9.633-3.394-28.099-3.653-27.814-4.103 4.515 8.241-1.294 11.768.302 6.182 2.8 12.078 1.972 17.718-1.444 5.041-3.054 8.781-5.693 8.365-4.512z"/>
                <path fill="#008D36" stroke="#065629" stroke-miterlimit="10" d="M18.141 57.307S12.115 23.54 44.958 32.505c0 0-3.917-14.044 11.751-23.307 15.667-9.264 32.24-.299 32.24-.299s13.558-10.159 26.515-5.378c12.956 4.781 14.464 20.02 14.464 20.02s12.956-7.171 22.296-2.39c9.341 4.781 8.438 19.124 8.438 19.124s11.847.395 16.953 13.857c5.105 13.462-10.324 24.391-10.324 24.391s12.315 4.017 8.829 31.436c-3.488 27.419-26.306 27.729-26.306 27.729s.651 11.053-11.804 14.017c-12.454 2.964-20.738-3.857-20.738-3.857s-.434 12.379-13.884 16.702c-13.45 4.322-24.985-8.334-24.985-8.334s-9.389 13.522-33.176 5.247c-23.787-8.274-18.348-28.556-18.348-28.556s-15.651 1.26-21.754-12.82c-6.102-14.081 6.389-29.611 6.389-29.611S5.873 76.24 7.242 69.2c1.37-7.041 10.899-11.893 10.899-11.893z"/>
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#055629" d="M149.331 135.087c-1.22 8.801-7.409 14.356-16.086 14.849-5.563.315-10.496-1.351-15.072-4.363-.349-.228-.708-.438-1.2-.744-.381 1.335-.664 2.562-1.079 3.744-1.97 5.601-5.688 9.663-10.91 12.41-.586.309-23.414 1.962-25.909-7.565-.419.323-.773.521-1.032.809-4.104 4.513-9.315 6.661-15.279 7.094-8.293.601-16.074-1.315-23.319-5.291-6.446-3.537-10.339-8.912-10.854-16.446a14.238 14.238 0 0 1 .231-3.686c2.009 8.153 7.641 12.565 14.987 15.342 7.949 3.007 16.031 4.605 24.457 2.354 3.906-1.045 7.437-2.872 10.191-5.93.906-1.005 1.411-.91 2.291.075 2.555 2.861 5.536 5.19 9.062 6.788 6.183 2.801 12.078 1.971 17.719-1.445 5.042-3.054 8.46-7.393 9.878-13.208.07-.288.211-.56.402-1.059 1.461.742 2.84 1.46 4.233 2.15 7.202 3.566 14.352 3.796 21.407-.396 3.746-2.226 6.062-5.487 6.729-9.823.163-1.061.612-1.453 1.628-1.571 10.131-1.192 17.241-6.437 21.148-15.945.015-.037.106-.039.373-.128-1.292 5.985-3.802 11.147-8.21 15.305-4.421 4.168-9.78 6.159-15.786 6.68zM17.488 83.559c-3.241-3.723-5.004-7.485-4.869-12.015.183-6.098 3.122-10.284 8.891-12.166 1.883-.614 1.773-1.688 1.619-3.049-.425-3.729-.019-7.368 1.343-10.855 2.276-5.824 6.67-9.06 12.786-9.608 3.075-.275 6.234.076 9.325.409 1.472.158 1.757-.221 1.563-1.516-.921-6.171.427-11.882 4.447-16.577 5.95-6.951 13.589-10.939 22.819-11.595 4.93-.35 9.361 1.049 13.542 3.611.59.362 1.887.085 2.592-.339 8.774-5.278 17.711-5.141 26.562-.519 5.854 3.057 7.866 8.622 8.275 14.905.045.674.058 1.35.106 2.024.007.101.13.193.162.238 2.702-1.125 5.344-2.367 8.078-3.334 7.288-2.578 15.169-.051 19.16 6.167 2.333 3.633 2.86 7.701 1.969 11.877-.328 1.536-.154 2.231 1.401 2.893 4.612 1.961 8.556 4.818 10.836 9.494 2.39 4.902 2.638 13.397-1.624 17.54-.264.255-.474.592-.776.779-2.379 1.469-4.774 2.913-7.434 4.526.162-.559.166-.927.348-1.141 4.092-4.769 5.037-10.447 4.438-16.426-.49-4.917-3.756-7.918-8.051-9.676-1.996-.817-2.894-1.47-2.68-3.936.516-5.935-1.611-10.85-6.873-14.074-3.657-2.241-7.689-2.531-11.731-1.732-2.979.588-5.881 1.651-8.757 2.672-1.426.506-1.784.134-2.001-1.259-.964-6.176-4.176-10.827-9.427-14.249-7.23-4.712-14.394-3.661-21.704-.339-.941.428-2.346.673-3.217.283-6.091-2.729-12.229-2.247-18.333-.373-2.792.857-5.556 2.028-8.077 3.498-6.285 3.666-9.13 9.539-9.759 16.606-.157 1.753-.024 3.533-.024 5.564-.816-.197-1.354-.25-1.828-.453-6.32-2.704-12.648-.43-17.232 3.879-3.167 2.978-5.482 6.439-5.965 10.879-.138 1.27-.089 2.564-.054 3.846.027.976-.191 1.513-1.294 1.816-4.487 1.234-7.054 4.43-8.906 8.585-1.859 4.175-1.339 8.079.342 12.051.066.151.012.346.012 1.089z"/>
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#055629" d="M89.116 87.062c.584-1.194.922-2.636 1.812-3.522 1.274-1.269 2.896-2.23 4.475-3.136 1.47-.844 3.11-1.384 4.62-2.163 5.119-2.635 12.194-1.985 16.355 1.908 1.399 1.309 2.117 3.351 2.989 4.8 2.708.238 5.521.175 8.174.793 3.937.918 6.67 3.537 8.085 7.377.467 1.27 1.1 2.125 2.386 2.785 4.694 2.412 7.976 8.583 6.092 13.831-.286.797.023 1.903.296 2.794 1.105 3.591 1.338 7.02-1.477 10.006-.317.336-.722.585-1.459 1.171-.178-3.288-2.362-5.725-.701-9.104 1.986-4.045-.482-9.755-4.966-12.712-1.435-.947-2.351-1.938-2.943-3.66-1.739-5.044-7.312-8.767-12.232-8.367-1.538.125-3.037.732-4.213 1.031-.992-1.86-1.638-3.835-2.891-5.28-3.887-4.478-12.666-5.464-17.798-1.355-1.753 1.404-3.95 2.25-5.945 3.352-.219-.181-.44-.365-.659-.549zM44.689 83.592c-6.441 1.097-9.198 6.066-6.941 12.018.465 1.227.703 2.542 1.079 3.94-1.895-.315-3.37-2.201-3.74-4.414a268.4 268.4 0 0 0-.731-4.163c-.845-4.629 1.927-8.993 6.339-10.153.498-.131 1.117-.892 1.179-1.42.504-4.32 2.523-6.575 6.798-7.568.789-.183 1.606-.633 2.204-1.185 2.876-2.655 5.995-3.249 9.63-1.654 1 .439 2.324.076 3.409.395 1.304.385 2.543 1.047 3.735 1.723.282.161.393.875.326 1.291-.03.186-.696.361-1.081.378-1.644.073-3.151.004-4.67-1.074-2.031-1.441-5.552-.622-7.705 1.151-.838.689-1.94 1.246-3 1.441-4.208.776-6.927 3.987-6.833 8.308.008.299.002.597.002.986zM132.219 51.424c-2.236-5.671-8.084-7.288-12.997-3.811-1.012.715-2.202 1.176-3.311 1.754l-.533-.451c.34-.691.505-1.595 1.047-2.039 3.177-2.609 6.697-4.625 10.962-4.262 3.246.276 5.823 1.82 6.856 5.229 4.975-.784 8.552.942 10.619 5.601.245.55.908.955 1.444 1.33 2.896 2.017 4.16 4.662 3.55 8.247-.186 1.086.187 2.284.384 3.416.439 2.504-.1 3.991-2.362 5.295-.257-1.661-.951-3.264-.636-4.632 1.016-4.42.377-6.496-3.364-9.143a3.545 3.545 0 0 1-1.19-1.519c-1.65-4.215-5.137-6.123-9.487-5.124-.291.068-.597.069-.982.109zM5.487 108.264c1.22 8.609 6.309 13.459 14.58 15.143 2.918.594 5.897.887 8.847 1.325.348.05.689.152 1.173.263-.35 1.563-.631 3.058-1.054 4.511-.093.32-.698.72-1.049.701-5.956-.302-11.705-1.34-16.479-5.305-4.523-3.757-6.401-9.087-6.018-16.638zM100.239 48.805c-1.388-.734-2.821-1.166-3.559-2.862-.989-2.273-3.775-3.375-6.196-2.867-.663.139-1.477.164-2.078-.095-3.882-1.671-6.673-.833-8.896 2.782-.097.157-.191.315-.15.247-7.916-2.637-9.628 2.794-11.173 8.458l-.46-.097c-.231-.54-.717-1.112-.654-1.614.468-3.681 1.209-7.279 4.589-9.554 1.715-1.155 3.558-1.49 5.606-.894.497.145 1.386-.174 1.745-.585 2.1-2.409 4.657-2.945 7.646-2.232.919.219 1.9.39 2.831.316 3.012-.239 5.594.257 7.214 3.211.31.564 1.158.845 1.781 1.216 1.778 1.061 2.364 2.484 1.754 4.57z"/>
            </svg>

  <svg id="arbre3" class="arbre" xmlns="http://www.w3.org/2000/svg" width="180" height="221">
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#924214" stroke="#773413" stroke-miterlimit="10" d="M115.347 148.671c-1.97 5.604-5.688 9.663-10.91 12.412-.586.308-1.29.863-1.452 1.44-3.006 10.666-5.394 21.451-5.177 32.623.091 4.639.878 9.167 3.011 13.374 1.79 3.535 4.708 5.738 8.268 7.227 1.28.537 2.545 1.119 3.816 1.679-.039.169-.079.339-.116.51-1.856-.297-3.748-.45-5.56-.916-6.137-1.58-12.022-.884-17.752 1.675-2.45 1.096-4.9 1.128-7.514.431-3.95-1.056-7.938-2.198-11.978-2.614-3.418-.351-6.937.275-10.41.479-.638.037-1.273.129-2.087-.214.552-.416 1.086-.861 1.662-1.244 12.07-7.995 19.769-18.966 22.001-33.394 1.49-9.633-3.394-28.099-3.653-27.814-4.103 4.515 8.241-1.294 11.768.302 6.182 2.8 12.078 1.972 17.718-1.444 5.041-3.054 8.781-5.693 8.365-4.512z"/>
                <path fill="#008D36" stroke="#065629" stroke-miterlimit="10" d="M18.141 57.307S12.115 23.54 44.958 32.505c0 0-3.917-14.044 11.751-23.307 15.667-9.264 32.24-.299 32.24-.299s13.558-10.159 26.515-5.378c12.956 4.781 14.464 20.02 14.464 20.02s12.956-7.171 22.296-2.39c9.341 4.781 8.438 19.124 8.438 19.124s11.847.395 16.953 13.857c5.105 13.462-10.324 24.391-10.324 24.391s12.315 4.017 8.829 31.436c-3.488 27.419-26.306 27.729-26.306 27.729s.651 11.053-11.804 14.017c-12.454 2.964-20.738-3.857-20.738-3.857s-.434 12.379-13.884 16.702c-13.45 4.322-24.985-8.334-24.985-8.334s-9.389 13.522-33.176 5.247c-23.787-8.274-18.348-28.556-18.348-28.556s-15.651 1.26-21.754-12.82c-6.102-14.081 6.389-29.611 6.389-29.611S5.873 76.24 7.242 69.2c1.37-7.041 10.899-11.893 10.899-11.893z"/>
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#055629" d="M149.331 135.087c-1.22 8.801-7.409 14.356-16.086 14.849-5.563.315-10.496-1.351-15.072-4.363-.349-.228-.708-.438-1.2-.744-.381 1.335-.664 2.562-1.079 3.744-1.97 5.601-5.688 9.663-10.91 12.41-.586.309-23.414 1.962-25.909-7.565-.419.323-.773.521-1.032.809-4.104 4.513-9.315 6.661-15.279 7.094-8.293.601-16.074-1.315-23.319-5.291-6.446-3.537-10.339-8.912-10.854-16.446a14.238 14.238 0 0 1 .231-3.686c2.009 8.153 7.641 12.565 14.987 15.342 7.949 3.007 16.031 4.605 24.457 2.354 3.906-1.045 7.437-2.872 10.191-5.93.906-1.005 1.411-.91 2.291.075 2.555 2.861 5.536 5.19 9.062 6.788 6.183 2.801 12.078 1.971 17.719-1.445 5.042-3.054 8.46-7.393 9.878-13.208.07-.288.211-.56.402-1.059 1.461.742 2.84 1.46 4.233 2.15 7.202 3.566 14.352 3.796 21.407-.396 3.746-2.226 6.062-5.487 6.729-9.823.163-1.061.612-1.453 1.628-1.571 10.131-1.192 17.241-6.437 21.148-15.945.015-.037.106-.039.373-.128-1.292 5.985-3.802 11.147-8.21 15.305-4.421 4.168-9.78 6.159-15.786 6.68zM17.488 83.559c-3.241-3.723-5.004-7.485-4.869-12.015.183-6.098 3.122-10.284 8.891-12.166 1.883-.614 1.773-1.688 1.619-3.049-.425-3.729-.019-7.368 1.343-10.855 2.276-5.824 6.67-9.06 12.786-9.608 3.075-.275 6.234.076 9.325.409 1.472.158 1.757-.221 1.563-1.516-.921-6.171.427-11.882 4.447-16.577 5.95-6.951 13.589-10.939 22.819-11.595 4.93-.35 9.361 1.049 13.542 3.611.59.362 1.887.085 2.592-.339 8.774-5.278 17.711-5.141 26.562-.519 5.854 3.057 7.866 8.622 8.275 14.905.045.674.058 1.35.106 2.024.007.101.13.193.162.238 2.702-1.125 5.344-2.367 8.078-3.334 7.288-2.578 15.169-.051 19.16 6.167 2.333 3.633 2.86 7.701 1.969 11.877-.328 1.536-.154 2.231 1.401 2.893 4.612 1.961 8.556 4.818 10.836 9.494 2.39 4.902 2.638 13.397-1.624 17.54-.264.255-.474.592-.776.779-2.379 1.469-4.774 2.913-7.434 4.526.162-.559.166-.927.348-1.141 4.092-4.769 5.037-10.447 4.438-16.426-.49-4.917-3.756-7.918-8.051-9.676-1.996-.817-2.894-1.47-2.68-3.936.516-5.935-1.611-10.85-6.873-14.074-3.657-2.241-7.689-2.531-11.731-1.732-2.979.588-5.881 1.651-8.757 2.672-1.426.506-1.784.134-2.001-1.259-.964-6.176-4.176-10.827-9.427-14.249-7.23-4.712-14.394-3.661-21.704-.339-.941.428-2.346.673-3.217.283-6.091-2.729-12.229-2.247-18.333-.373-2.792.857-5.556 2.028-8.077 3.498-6.285 3.666-9.13 9.539-9.759 16.606-.157 1.753-.024 3.533-.024 5.564-.816-.197-1.354-.25-1.828-.453-6.32-2.704-12.648-.43-17.232 3.879-3.167 2.978-5.482 6.439-5.965 10.879-.138 1.27-.089 2.564-.054 3.846.027.976-.191 1.513-1.294 1.816-4.487 1.234-7.054 4.43-8.906 8.585-1.859 4.175-1.339 8.079.342 12.051.066.151.012.346.012 1.089z"/>
                <path fill-rule="evenodd" clip-rule="evenodd" fill="#055629" d="M89.116 87.062c.584-1.194.922-2.636 1.812-3.522 1.274-1.269 2.896-2.23 4.475-3.136 1.47-.844 3.11-1.384 4.62-2.163 5.119-2.635 12.194-1.985 16.355 1.908 1.399 1.309 2.117 3.351 2.989 4.8 2.708.238 5.521.175 8.174.793 3.937.918 6.67 3.537 8.085 7.377.467 1.27 1.1 2.125 2.386 2.785 4.694 2.412 7.976 8.583 6.092 13.831-.286.797.023 1.903.296 2.794 1.105 3.591 1.338 7.02-1.477 10.006-.317.336-.722.585-1.459 1.171-.178-3.288-2.362-5.725-.701-9.104 1.986-4.045-.482-9.755-4.966-12.712-1.435-.947-2.351-1.938-2.943-3.66-1.739-5.044-7.312-8.767-12.232-8.367-1.538.125-3.037.732-4.213 1.031-.992-1.86-1.638-3.835-2.891-5.28-3.887-4.478-12.666-5.464-17.798-1.355-1.753 1.404-3.95 2.25-5.945 3.352-.219-.181-.44-.365-.659-.549zM44.689 83.592c-6.441 1.097-9.198 6.066-6.941 12.018.465 1.227.703 2.542 1.079 3.94-1.895-.315-3.37-2.201-3.74-4.414a268.4 268.4 0 0 0-.731-4.163c-.845-4.629 1.927-8.993 6.339-10.153.498-.131 1.117-.892 1.179-1.42.504-4.32 2.523-6.575 6.798-7.568.789-.183 1.606-.633 2.204-1.185 2.876-2.655 5.995-3.249 9.63-1.654 1 .439 2.324.076 3.409.395 1.304.385 2.543 1.047 3.735 1.723.282.161.393.875.326 1.291-.03.186-.696.361-1.081.378-1.644.073-3.151.004-4.67-1.074-2.031-1.441-5.552-.622-7.705 1.151-.838.689-1.94 1.246-3 1.441-4.208.776-6.927 3.987-6.833 8.308.008.299.002.597.002.986zM132.219 51.424c-2.236-5.671-8.084-7.288-12.997-3.811-1.012.715-2.202 1.176-3.311 1.754l-.533-.451c.34-.691.505-1.595 1.047-2.039 3.177-2.609 6.697-4.625 10.962-4.262 3.246.276 5.823 1.82 6.856 5.229 4.975-.784 8.552.942 10.619 5.601.245.55.908.955 1.444 1.33 2.896 2.017 4.16 4.662 3.55 8.247-.186 1.086.187 2.284.384 3.416.439 2.504-.1 3.991-2.362 5.295-.257-1.661-.951-3.264-.636-4.632 1.016-4.42.377-6.496-3.364-9.143a3.545 3.545 0 0 1-1.19-1.519c-1.65-4.215-5.137-6.123-9.487-5.124-.291.068-.597.069-.982.109zM5.487 108.264c1.22 8.609 6.309 13.459 14.58 15.143 2.918.594 5.897.887 8.847 1.325.348.05.689.152 1.173.263-.35 1.563-.631 3.058-1.054 4.511-.093.32-.698.72-1.049.701-5.956-.302-11.705-1.34-16.479-5.305-4.523-3.757-6.401-9.087-6.018-16.638zM100.239 48.805c-1.388-.734-2.821-1.166-3.559-2.862-.989-2.273-3.775-3.375-6.196-2.867-.663.139-1.477.164-2.078-.095-3.882-1.671-6.673-.833-8.896 2.782-.097.157-.191.315-.15.247-7.916-2.637-9.628 2.794-11.173 8.458l-.46-.097c-.231-.54-.717-1.112-.654-1.614.468-3.681 1.209-7.279 4.589-9.554 1.715-1.155 3.558-1.49 5.606-.894.497.145 1.386-.174 1.745-.585 2.1-2.409 4.657-2.945 7.646-2.232.919.219 1.9.39 2.831.316 3.012-.239 5.594.257 7.214 3.211.31.564 1.158.845 1.781 1.216 1.778 1.061 2.364 2.484 1.754 4.57z"/>
            </svg>

  <div id="voiture">
    <svg id="chauffeur" xmlns="http://www.w3.org/2000/svg" width="75" height="90">
                    <g stroke="#010202" stroke-miterlimit="10">
                        <path fill="#D563A2" d="M31.216 71.929c0 5.332-3.986 9.657-8.901 9.657H9.458c-4.916 0-8.901-4.325-8.901-9.657V37.976c0-5.333 3.986-9.656 8.901-9.656h12.857c4.915 0 8.901 4.324 8.901 9.656v33.953z"/>
                        <ellipse fill="#010202" cx="15.268" cy="15.042" rx="13.229" ry="14.352"/>
                        <path fill="#D563A2" d="M40.205 51.862c-1.13 2.451-3.403 3.702-5.076 2.793L14.328 43.363c-1.675-.908-2.114-3.631-.984-6.082s3.404-3.703 5.077-2.794L39.223 45.78c1.673.908 2.113 3.632.982 6.082z"/>
                        <path fill="#010202" d="M64.817 45.857c-.032 2.637-1.639 5.015-3.587 5.312l-24.228 3.688c-1.948.297-3.502-1.6-3.47-4.236.031-2.637 1.639-5.014 3.589-5.311l24.227-3.688c1.949-.297 3.502 1.599 3.469 4.235z"/>
                        <path fill="#434B9A" d="M47.905 76.619c0 2.743-1.81 4.964-4.044 4.964H16.098c-2.233 0-4.044-2.221-4.044-4.964 0-2.738 1.811-4.962 4.044-4.962h27.763c2.235 0 4.044 2.224 4.044 4.962z"/>
                        <path fill="#010202" d="M74.267 85.517c-.652 2.647-2.933 4.285-5.088 3.658L42.361 81.38c-2.158-.629-3.377-3.281-2.724-5.932.654-2.646 2.933-4.284 5.092-3.655l26.815 7.792c2.159.63 3.377 3.285 2.723 5.932z"/>
                        <path fill="#434B9A" d="M.557 60.508h30.659v21.075H.557z"/>
                    </g>
                </svg>

    <svg id="carrosserie" xmlns="http://www.w3.org/2000/svg" width="313" height="122">
                    <path d="M24.667 70h267v37.333h-267z"/>
                    <path fill="#010202" d="M118.848 29.008a3.01 3.01 0 0 1 3.415 2.518l6.896 45.61a3.008 3.008 0 0 1-2.518 3.414l-8.443 1.277a3.01 3.01 0 0 1-3.415-2.518l-6.896-45.61a3.007 3.007 0 0 1 2.518-3.414l8.443-1.277zM194.396 30.319a3.008 3.008 0 0 1 2.024 3.729l-7.214 24.361a3.01 3.01 0 0 1-3.729 2.025l-1.217-.361a3.01 3.01 0 0 1-2.025-3.729l7.215-24.361a3.009 3.009 0 0 1 3.728-2.025l1.218.361z"/>
                    <path fill="#2C3F1C" stroke="#010202" stroke-miterlimit="10" d="M296.176 87.953l-.062-33.837c0-13.479-11.992-12.055-11.992-12.055h-67.797L191.59.333h-14.561l24.734 41.729-18.74 6.86-87.469-3.625H14.557v72.03h17.791c1.554-24.501 18.87-43.931 43.734-43.931 24.866 0 39.494 19.476 40.982 43.931l87.406.062c1.488-24.52 17.049-43.994 41.916-43.994 24.865 0 41.039 19.475 42.463 44.035l11.861.047c4.852 0 8.754-3.949 8.754-8.779v-20.75h-13.289v.005z"/>
                    <path fill="#010202" d="M11.557 33.645c1.65 0 3 1.35 3 3v61.909c0 1.65-1.35 3-3 3H3.019c-1.65 0-3-1.35-3-3V36.645c0-1.65 1.35-3 3-3h8.538z"/>
                    <path fill="#2C3F1C" d="M123.747 103.544V46.145l58.911 2.425v54.974z"/>
                    <path fill="#010202" d="M124.247 46.666l57.912 2.383v53.995h-57.912V46.666m-1-1.042v58.42h59.912V48.09l-59.912-2.466z"/>
                    <path d="M130.521 67.316a.915.915 0 1 1-1.831 0V56.333a.916.916 0 0 1 1.831 0v10.983z"/>
                    <path fill="#2C3F1C" stroke="#010202" stroke-miterlimit="10" d="M306.23 45.568c-5.934 0-10.744 4.81-10.744 10.743s4.811 10.744 10.744 10.744V45.568z"/>
                    <path fill="#202B19" d="M26.8 68.689c-3.428 0-6.203-1.728-6.203-3.865 0-2.135 2.775-3.863 6.203-3.863h74.434c3.427 0 6.203 1.729 6.203 3.863 0 2.138-2.775 3.865-6.203 3.865H26.8zM208.703 68.689c-3.43 0-6.205-1.728-6.205-3.865 0-2.135 2.775-3.863 6.205-3.863h74.434c3.428 0 6.201 1.729 6.201 3.863 0 2.138-2.773 3.865-6.201 3.865h-74.434zM26.8 57.249c-3.428 0-6.203-1.728-6.203-3.865 0-2.135 2.775-3.863 6.203-3.863h74.434c3.427 0 6.203 1.729 6.203 3.863 0 2.138-2.775 3.865-6.203 3.865H26.8z"/>
                    <path d="M35.667 112.855a8.812 8.812 0 0 1-8.811 8.811H13.478a8.811 8.811 0 1 1 0-17.623h13.378a8.812 8.812 0 0 1 8.811 8.812zM313 111.386a8.812 8.812 0 0 1-8.811 8.811H290.81a8.811 8.811 0 1 1 0-17.623h13.379a8.811 8.811 0 0 1 8.811 8.812z"/>
                    <path fill="#F9B233" stroke="#000" stroke-miterlimit="10" d="M306.23 45.568h3.234v21.487h-3.234z"/>
                    <path fill="#202B19" d="M208.704 57.249c-3.43 0-6.204-1.728-6.204-3.865 0-2.135 2.774-3.863 6.204-3.863h74.434c3.428 0 6.202 1.729 6.202 3.863 0 2.138-2.774 3.865-6.202 3.865h-74.434z"/>
                </svg>

    <svg id="roue_arriere" class="roue" xmlns="http://www.w3.org/2000/svg" width="70" height="70">
                    <circle fill-rule="evenodd" clip-rule="evenodd" cx="35" cy="34.999" r="31.905"/>
                    <circle fill="none" stroke="#020202" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="3.0062,1.0021" cx="35" cy="34.999" r="31.905"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" fill="#A3A3A3" d="M9.826 34.999C9.826 21.095 21.097 9.826 35 9.826c13.903 0 25.177 11.269 25.177 25.173 0 13.905-11.273 25.176-25.177 25.176-13.903 0-25.174-11.271-25.174-25.176z"/>
                    <path fill="none" stroke="#595959" stroke-width="2" stroke-miterlimit="10" d="M9.826 34.999h50.351M35 60.176V9.825M17.199 52.801l35.603-35.603M17.199 17.198l35.603 35.603"/>
                </svg>

    <svg id="roue_avant" class="roue" xmlns="http://www.w3.org/2000/svg" width="70" height="70">
                    <circle fill-rule="evenodd" clip-rule="evenodd" cx="35" cy="34.999" r="31.905"/>
                    <circle fill="none" stroke="#020202" stroke-width="3" stroke-miterlimit="10" stroke-dasharray="3.0062,1.0021" cx="35" cy="34.999" r="31.905"/>
                    <path fill-rule="evenodd" clip-rule="evenodd" fill="#A3A3A3" d="M9.826 34.999C9.826 21.095 21.097 9.826 35 9.826c13.903 0 25.177 11.269 25.177 25.173 0 13.905-11.273 25.176-25.177 25.176-13.903 0-25.174-11.271-25.174-25.176z"/>
                    <path fill="none" stroke="#595959" stroke-width="2" stroke-miterlimit="10" d="M9.826 34.999h50.351M35 60.176V9.825M17.199 52.801l35.603-35.603M17.199 17.198l35.603 35.603"/>
                </svg>
  </div>

</div>
            
          
!
            
              /**********************
 * PARAMETRES
 *********************/
// Activation / désactivation des préfixes CSS
$prefix: true; // Valeur par défaut : true 

/**********************
 * MIXINS
 *********************/

// Transformation générique
@mixin transform($transforms) {
    @if $prefix == true {
        -moz-transform: $transforms;
        -o-transform: $transforms;
        -ms-transform: $transforms;
        -webkit-transform: $transforms;
    }
    transform: $transforms;
}

// Rotation
@mixin rotate ($deg) {
    @include transform(rotate(#{$deg}deg));
}

// Transformation origine
@mixin transform-origin ($origin) {
    @if $prefix == true {
        -moz-transform-origin: $origin;
        -o-transform-origin: $origin;
        -ms-transform-origin: $origin;
        -webkit-transform-origin: $origin;
    }
    transform-origin: $origin;
}

/**********************
 * DISPOSITION INITIALE
 *********************/
body {
  margin: 0px;
}
#voiture_anim {
    border: 1px solid #000 ;
    width: 1000px;
    height: 350px;
    margin: auto;
    position: relative;
    overflow: hidden ;

    #fond {
        position: absolute;
        height: 350px;
        width: 100%;
        z-index: 10; 

        background: #aaeaf7;
        background: -moz-linear-gradient(top, #aaeaf7 0%, #9fe9f9 39%, #348c1c 39%, #35bf26 74%, #604500 74%, #594d21 100%);
        background: -webkit-linear-gradient(top, #aaeaf7 0%,#9fe9f9 39%,#348c1c 39%,#35bf26 74%,#604500 74%,#594d21 100%);
        background: linear-gradient(to bottom, #aaeaf7 0%,#9fe9f9 39%,#348c1c 39%,#35bf26 74%,#604500 74%,#594d21 100%);
        filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#aaeaf7', endColorstr='#594d21',GradientType=0 );
    }

    .nuage {
        position: absolute;
        z-index: 12;
    }

    #nuage1 {
        right: 800px;
    }
    #nuage2 {
        right: 500px;
    }
    #nuage3 {
        right: 300px;
    }

    .arbre {
        position: absolute;
        z-index: 15;
    }

    #arbre1 {
        right: 400px;        
    }
    #arbre2 {
        top: 15px      
    }
    #arbre3 {
        top: -10px      
    }

    #voiture {
        position: absolute;
        top: 150px;
        left: 100px;
        z-index: 20; 

        #carrosserie {
            position: absolute;

        }

        #roue_arriere,
        #roue_avant {
            position: absolute;
            top: 80px;
        }
        #roue_arriere {
            left: 40px;
        }
        #roue_avant {
            left: 212px;
        }

        #chauffeur {
            position: absolute;
            top: 0px;
            left: 125px;
        }
    }
}

/**********************
 * ANIMATIONS
 **********************/

@mixin defilement($id, $position_initiale, $duree) {
    ##{$id} {
        animation-name: #{$id} ;
        animation-duration: #{$duree} ;
        animation-timing-function: linear;
        animation-iteration-count: infinite;
    }
    @keyframes #{$id} {
        0% {
            right: #{$position_initiale}px ;
        }
        #{(1500 - $position_initiale)/20}% {
            right: 1500px;
            z-index: 15 ;
        }
        #{(1500 - $position_initiale)/20}.0001% {
            z-index: 5 ;
        }
        #{(1500 - $position_initiale)/20}.0002%{
            right: -500px;
        }
        #{(1500 - $position_initiale)/20}.0003% {
            z-index: 15 ;
        }
        100% {
            right: #{$position_initiale}px;
        }
    }
}
@include defilement(nuage0,1200,20s);
@include defilement(nuage1,800,20s);
@include defilement(nuage2,500,20s);
@include defilement(nuage3,300,20s);
@include defilement(nuage4,100,20s);
@include defilement(nuage5,-300,20s);

@include defilement(arbre1,400,10s);
@include defilement(arbre2,-100,10s);

@include defilement(arbre3,-400,10s);



#voiture {
    animation-name: voiture ;
    animation-duration: 8s ;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes voiture {
    0% {
        top: 150px;
    }
    19%{
        top: 150px;
    }
    20% {
        top: 148px;
    }
    21%{
        top: 150px;
    }
    69%{
        top: 150px;
    }
    70% {
        top: 148px;
    }
    71%{
        top: 150px;
    }
    79% {
        top: 150px;
    }
    80% {
        top: 148px;
    }
    81%{
        top: 150px;
    }
    100% {

    }
}

.roue {
    animation-name: roue ;
    animation-duration: 8s ;
    animation-timing-function: linear;
    animation-iteration-count: infinite;
}
@keyframes roue {
    0% {
        top: 80px;
    }
    19%{
        top: 80px;
    }
    20% {
        top: 76px;
    }
    21%{
        top: 80px;
    }
    69%{
        top: 80px;
    }
    70% {
        top: 76px;
    }
    71%{
        top: 80px;
    }
    79% {
        top: 80px;
    }
    80% {
        top: 76px;
    }
    81%{
        top: 80px;
    }
    100% {
        @include rotate(1440);
    }
}
            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.

Console