Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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

              
                <canvas id="canvas"></canvas>
<svg xmlns="http://www.w3.org/2000/svg" class="car" version="1.1" x="0px" y="0px" viewBox="0 0 716.2 333.3" xml:space="preserve" enable-background="new 0 0 716.2 333.3">
  <g>
    <path d="M327.8 104l-2.6-28.4c-0.3-3.6 2.3-6.8 5.9-7.1l12.2-1.1c3.6-0.3 6.8 2.3 7.1 5.9l2.8 30.6h76.7V53.7H329.1c-7.9 0-14.4 6.4-14.4 14.4v44.8C317.2 108 322 104.5 327.8 104z" fill="none" />
    <path d="M613.1 207.9c-6.1-1.9-12.5-2.9-19.2-2.9 -9 0-17.6 1.8-25.4 5.1 -0.6 0.2-1.1 0.5-1.7 0.8 -0.4 0.2-0.8 0.4-1.2 0.6 -11 5.5-20.3 14.1-26.6 25.1 -4.1 7.1-6.7 14.9-7.8 23 -0.3 2.5-0.5 5-0.6 7.4l0 1c0 4.2 0.5 8.3 1.3 12.4l1.9-0.3c-0.3-2.5-0.5-5-0.5-7.5 0-0.3 0-0.6 0-1 0-2.4 0.2-4.8 0.5-7.1 1.1-8 3.7-15.4 7.5-22.1 10.5-18.2 30.1-30.5 52.7-30.5 29.4 0 53.9 20.9 59.5 48.6l3-0.5C653.2 235.5 636 215.3 613.1 207.9z"
    fill="#333" />
    <path d="M37 280.6c-2.4 0-4.3 1.9-4.3 4.3v4.6c0 2.4 1.9 4.3 4.3 4.3h10.7v-13.3H37z" fill="#414141" />
    <path d="M75.2 277.2c0 1.1-0.8 2-2 2.1 -1.2 0.1-2.2-0.8-2.4-2 0-0.1 0-0.1 0-0.2H47.7v3.3 13.3 2c0 2.4 1.9 4.3 4.3 4.3h18.6c3.9 0 7.6-1.5 10.4-4.2l4.2-4c2.3-2.1 5.1-3.5 8.2-4 -0.9-3.5-1.5-7.1-1.8-10.9H75.2z" fill="#333" />
    <path d="M232.1 279.2c-0.2 0.1-0.5 0.1-0.8 0.1 -0.1 0-0.1 0-0.2 0 -1.1-0.1-1.9-1-1.9-2.1h-0.7l0 0h-15.7c-0.3 3.7-0.9 7.2-1.8 10.7h30.2c-0.7-0.5-1.3-1-1.9-1.6L232.1 279.2z" fill="#333" />
    <path d="M343.4 67.4l-12.2 1.1c-3.6 0.3-6.2 3.5-5.9 7.1l2.6 28.4c0.4 0 0.9-0.1 1.4-0.1h24.1l-2.8-30.6C350.1 69.7 346.9 67 343.4 67.4z" fill="#36281A" />
    <polygon points="700.5 237 700.5 237 700.5 237 " fill="#BF2A2E" />
    <path d="M30.1 189.3L30.1 189.3c-0.5 0.9-1.1 1.9-1.5 2.9 -0.8 1.7-1.5 3.3-2.2 4.9 0.7-1.6 1.4-3.3 2.3-4.9C29.1 191.2 29.6 190.2 30.1 189.3z" fill="#BF2A2E" />
    <path d="M698 200.3c-0.2-0.9-0.4-1.7-0.6-2.6 0 0 0 0 0 0C697.6 198.6 697.8 199.4 698 200.3z" fill="#BF2A2E" />
    <path d="M194.5 25.5c26.6-11.1 50.8-14.7 79-15.8v0C245.3 10.9 221.2 14.5 194.5 25.5c-6.2 2.6-12 5.8-17.3 9.7l0 0C182.6 31.4 188.4 28.1 194.5 25.5z" fill="#BF2A2E" />
    <path d="M700.3 214c0-0.4-0.1-0.8-0.1-1.2C700.2 213.2 700.2 213.6 700.3 214 700.3 214 700.3 214 700.3 214z" fill="#BF2A2E" />
    <path d="M699.5 245.3c0.1-0.8 0.2-1.6 0.3-2.4C699.8 243.7 699.7 244.5 699.5 245.3L699.5 245.3z" fill="#BF2A2E" />
    <path d="M700.3 238.6c-0.1 0.8-0.2 1.7-0.3 2.5C700.2 240.3 700.3 239.5 700.3 238.6z" fill="#BF2A2E" />
    <path d="M22.4 207.6c-0.4 1.2-0.8 2.5-1.1 3.7 0 0 0 0 0 0C21.6 210.1 22 208.9 22.4 207.6z" fill="#BF2A2E" />
    <path d="M22.4 207.4c1-3.2 2.3-6.4 3.7-9.7C24.7 201 23.5 204.2 22.4 207.4z" fill="#BF2A2E" />
    <path d="M59.6 162c12.6-13.3 35.5-38.4 57.5-62.8 0 0 0 0 0 0C95.1 123.7 72.2 148.8 59.6 162c-4.1 4.3-8.4 7.5-12.6 10.6 0 0 0 0 0 0C51.1 169.6 55.5 166.4 59.6 162z" fill="#BF2A2E" />
    <path d="M666.4 260.3v-10.7c0-2.4 1.9-4.3 4.3-4.3h27.9c0.6-13.2-0.7-28.1-6.1-43.2 -1 1.6-2 3.1-3.2 4.6 -1.2 1.4-3.5 0.8-3.8-1l-5-27.7c-17.2-27.4-40.5-43-141-48.2 -3-0.2-5.8-1.5-7.7-3.8l-8.3-9.7c-7.3-0.6-14.2-4.2-18.7-10.3l-41-55.8c-1.1-1.5-1.8-3.2-2.2-5 -5-4.3-10.7-7.7-16.9-10 -0.9 0.2-1.9 0.3-2.8 0.3 -0.2 0-0.3 0-0.5 0l-143.6-5.1c-6.4-0.2-12.3-3.1-16.5-7.7 -32.7 0.7-59.3 3.7-89 16.1 -3.2 1.3-6.2 2.8-9.2 4.5 1.4 4.2 0.6 8.8-2.4 12.3L141 100.5c-2.4 2.7-5.9 4.2-9.4 4.2 -1.2 0-2.4-0.2-3.6-0.5l-4.2-1.9c-24.6 27.3-52.1 57.7-66.5 72.8 -11.1 11.7-23.9 15.5-31 30.1 -1.4 3-2.7 5.9-3.8 8.7 0 0 0 0 0 0.1l-4.5 24.8c-0.1 0.7-0.7 1-1.3 1 0 1.9 0 3.7 0.1 5.5 0.4-0.1 0.8-0.1 1.2-0.1h42.5c3 0 5.1 2.9 4.1 5.7l-3.6 10.9c-0.6 1.8-2.3 3-4.1 3H20.1c0.5 2 1.1 3.8 1.7 5.3 1.5 4.3 5.6 7.2 10.2 7.2h15.8 23.1c-0.2-2.5-0.3-4.8-0.3-7 0-45 36.6-81.7 81.7-81.7 45 0 81.7 36.6 81.7 81.7 0 2.2-0.1 4.5-0.3 7.1 -0.1 0.9-0.6 1.6-1.4 1.8l7.1 7.1c0.6 0.6 1.2 1.1 1.9 1.6 2.6 1.9 5.7 2.9 8.9 2.9h21l0 0c0-1.2 1-2.2 2.2-2.2h29.9V66.8c0-13.2 10.7-23.9 23.9-23.9l105.6-0.1c11.5 0 22.3 5.7 28.8 15.2l36.2 53.2c9.8 14.4 15 31.4 15 48.9v128.6h16.8c-2.1-6.7-3.2-13.6-3.2-20.6 0-0.2 0-0.4 0-0.6l0-0.4c0-2.6 0.2-5.3 0.6-7.9 1.2-8.7 4-17 8.3-24.6 12-20.9 34.5-33.9 58.6-33.9 37.2 0 67.5 30.3 67.5 67.5 0 1.4-0.1 2.8-0.2 4.2 -0.1 1.1-0.9 1.9-2 2 0 0.1 0 0.2 0 0.2l26.4 3.4c3 0.4 5.9-1.3 6.9-4.2 0.9-2.3 1.9-5.4 3-9.1h-24.6C668.3 264.6 666.4 262.7 666.4 260.3zM65 201.2l-14.5 32.5c-0.9 2.1-3 3.4-5.3 3.4h-5.6c-1.9 0-3.5-1.3-3.8-3.2 -1.2-6.5 0-13.3 3.2-19.1l10.5-18.6c1-1.7 2.8-2.8 4.8-2.8h5.6c1.9 0 3.6 0.9 4.6 2.5C65.6 197.5 65.7 199.5 65 201.2zM293.2 126c0 9.7-7.9 17.6-17.6 17.6h-93.7c-10.5 0-19.3-6.1-22.9-15.9 -3.7-9.8-1-20.1 6.8-27 23-20 61.3-44.6 113.6-47.9 3.7-0.2 7.1 1 9.8 3.5 2.7 2.5 4.1 5.9 4.1 9.5V126zM651.3 197.5c-5 0-9-4.1-9-9s4.1-9 9-9 9 4.1 9 9S656.2 197.5 651.3 197.5z"
    fill="#BF2A2E" />
    <path d="M699.4 207c0.2 1.4 0.4 2.8 0.6 4.1C699.8 209.8 699.6 208.4 699.4 207z" fill="#BF2A2E" />
    <path d="M698.4 201.9c0.2 1.1 0.5 2.3 0.7 3.4C698.8 204.1 698.6 203 698.4 201.9z" fill="#BF2A2E" />
    <path d="M613.1 207.9c-6.1-2-12.6-3-19.4-3 -8.8 0-17.4 1.9-25.2 5.3 7.8-3.3 16.4-5.1 25.4-5.1C600.5 205 607 206 613.1 207.9z" fill="#BF2A2E" />
    <path d="M565.5 211.5c0.4-0.2 0.8-0.4 1.2-0.6C566.3 211.1 565.9 211.3 565.5 211.5z" fill="#BF2A2E" />
    <rect x="75.2" y="277.2" width="16.5" height="0" fill="#BF2A2E" />
    <rect x="220.6" y="269.3" width="0" height="15.7" fill="#BF2A2E" />
    <path d="M512.6 160c0-17.4-5.2-34.5-15-48.9L461.4 58c-6.5-9.5-17.3-15.2-28.8-15.2l-105.6 0.1c-13.2 0-23.9 10.7-23.9 23.9v221.8h209.5V160zM323.9 183.2v-0.4V180c0-3.6 2.9-6.5 6.5-6.5h22.5c3.6 0 6.5 2.9 6.5 6.5v2.9 0.4c0 3.6-2.9 6.5-6.5 6.5h-22.5C326.8 189.8 323.9 186.8 323.9 183.2zM489.6 132.8c-3.5 6.8-10.1 10.8-17.7 10.8h-40.3H329.1c-9.7 0-17.6-7.9-17.6-17.6V68.1c0-9.7 7.9-17.6 17.6-17.6h102.4 0c0 0 0 0 0 0 9.9 0 19.2 4.8 24.9 12.8l31.6 48.9C492.5 118.3 493 126.1 489.6 132.8z"
    fill="#B3282B" />
    <path d="M454.9 25.9l-2.7 4c-1.8 2.6-4.5 4.4-7.5 5.1 6.2 2.3 12 5.7 16.9 10 -0.4-2.2-0.3-4.5 0.5-6.7l1.9-5.1c0.1-0.2 0.2-0.4 0.4-0.6 -2.9-2.6-6.1-5-9.5-6.9C455 25.8 454.9 25.9 454.9 25.9z" fill="#D93132" />
    <path d="M273.7 10.4c-0.1-0.2-0.2-0.4-0.2-0.7 -28.2 1.1-52.4 4.7-79 15.8 -6.2 2.6-12 5.8-17.3 9.7l4.3 4.7c0.7 1 1.2 2.1 1.6 3.2 3-1.7 6-3.2 9.2-4.5 29.7-12.4 56.3-15.4 89-16.1 -1.1-1.2-2.1-2.5-2.9-3.9L273.7 10.4z" fill="#D93132" />
    <path d="M534.7 114.7l-2.1 0.6c-2.4 0.7-4.8 1-7.2 1 -0.6 0-1.3-0.1-1.9-0.1l8.3 9.7c1.9 2.3 4.7 3.6 7.7 3.8 100.5 5.2 123.8 20.9 141 48.2l-2.8-15.8c-0.2-1.3 0.1-2.5 0.8-3.4 -17.1-23.6-44.1-37.2-136.8-42 -2.3-0.1-4.5-1-6.3-2.4C535.2 114.4 535 114.6 534.7 114.7z"
    fill="#D93132" />
    <path d="M700.5 237c-0.9 0-1.6-0.7-1.6-1.6v-19.7c0-0.8 0.6-1.5 1.4-1.6 0-0.4-0.1-0.8-0.1-1.2 -0.1-0.5-0.1-1.1-0.2-1.6 -0.2-1.4-0.4-2.7-0.6-4.1 -0.1-0.6-0.2-1.2-0.3-1.8 -0.2-1.1-0.4-2.2-0.7-3.4 -0.1-0.5-0.2-1.1-0.3-1.6 -0.2-0.9-0.4-1.7-0.7-2.6 -0.9 0.4-1.8 0.7-2.8 0.8 -0.6 1.2-1.3 2.4-2 3.5 5.3 15.1 6.7 30 6.1 43.2h0.9c0.1-0.8 0.2-1.6 0.3-2.4 0.1-0.6 0.1-1.1 0.2-1.7 0.1-0.8 0.2-1.6 0.3-2.5C700.4 238.1 700.4 237.5 700.5 237 700.5 237 700.5 237 700.5 237 700.5 237 700.5 237 700.5 237z"
    fill="#D93132" />
    <path d="M22.6 213.9c1.1-2.9 2.4-5.8 3.8-8.7 7.1-14.7 19.8-18.5 31-30.1 14.4-15.1 41.9-45.5 66.5-72.8l-6.5-2.9c-0.1 0-0.2-0.1-0.3-0.2 -22 24.4-44.9 49.6-57.5 62.8 -4.1 4.3-8.4 7.5-12.6 10.6 0 0 0 0 0 0 0.3 0.5 0.4 1 0.3 1.5 -0.1 0.5-0.3 0.9-0.6 1.3l-0.2 0.3 0 0 -11.1 12.1c-0.9 1-2.2 1.6-3.6 1.5l-1.6 0c-0.5 0.9-1.1 1.9-1.5 2.9 -0.8 1.7-1.5 3.3-2.3 4.9 -0.1 0.2-0.2 0.4-0.2 0.5 -1.4 3.3-2.6 6.6-3.7 9.7 0 0.1-0.1 0.2-0.1 0.2 -0.4 1.2-0.8 2.5-1.1 3.7C22.2 211.8 22.8 212.8 22.6 213.9z"
    fill="#D93132" />
    <path d="M229.2 277c0.2-2.5 0.3-4.7 0.3-6.8 0-1.2 0-2.4-0.1-3.6 -5.9-37.3-38.2-65.8-77.2-65.8 -39 0-71.3 28.5-77.2 65.8 -0.1 1.2-0.1 2.4-0.1 3.6 0 2.1 0.1 4.3 0.3 6.7 0 0.1 0 0.1 0 0.2h16.5c-0.1-1.5-0.2-3.1-0.2-4.6 0-0.3 0-0.6 0-1 0-2.4 0.2-4.8 0.5-7.1 1.1-8 3.7-15.4 7.5-22.1 10.5-18.2 30.1-30.5 52.7-30.5 33.5 0 60.7 27.2 60.7 60.7 0 1.6-0.1 3.1-0.2 4.6h15.7l0 0 0 0h0.7C229.2 277.1 229.2 277.1 229.2 277z"
    fill="#9A2125" />
    <path d="M152.2 200.9c39 0 71.3 28.5 77.2 65.8 -1.9-41-35.8-73.7-77.2-73.7 -41.4 0-75.4 32.8-77.2 73.7C80.9 229.4 113.2 200.9 152.2 200.9z" fill="#B3282B" />
    <g class="wheel">
      <path d="M593.9 239.6c-18.2 0-33 14.8-33 33 0 18.2 14.8 33 33 33 18.2 0 33-14.8 33-33C626.8 254.4 612.1 239.6 593.9 239.6zM611.8 251.4l2.4-0.7 1.8 1.8 -0.7 2.4 -2.4 0.7 -1.8-1.8L611.8 251.4zM592.6 242.5h2.5l1.3 2.2 -1.3 2.2h-2.5l-1.3-2.2L592.6 242.5zM573.2 250.2l2.4 0.7 0.7 2.4 -1.8 1.8 -2.4-0.7 -0.7-2.4L573.2 250.2zM563.2 273.7v-2.5l2.2-1.3 2.2 1.3v2.5l-2.2 1.3L563.2 273.7zM575.2 294.1l-2.4 0.7 -1.8-1.8 0.7-2.4 2.4-0.7 1.8 1.8L575.2 294.1zM594.4 303h-2.5l-1.3-2.2 1.3-2.2h2.5l1.3 2.2L594.4 303zM613.7 295.3l-2.4-0.7 -0.7-2.4 1.8-1.8 2.4 0.7 0.7 2.4L613.7 295.3zM623.8 274.4l-2.2 1.3 -2.2-1.3v-2.5l2.2-1.3 2.2 1.3V274.4zM616.7 272.6c0 12.6-10.2 22.8-22.8 22.8s-22.8-10.2-22.8-22.8c0-12.6 10.2-22.8 22.8-22.8S616.7 260 616.7 272.6z"
      fill="#E6E6E5" />
      <path d="M593.9 211.8c-22.5 0-42.2 12.3-52.7 30.5 -3.8 6.7-6.4 14.1-7.5 22.1 -0.3 2.3-0.5 4.7-0.5 7.1 0 0.3 0 0.6 0 1 0 2.6 0.2 5.1 0.5 7.5 3.7 30 29.3 53.2 60.2 53.2 27.4 0 50.6-18.2 58.1-43.2 1.7-5.6 2.6-11.4 2.6-17.5 0-4.1-0.4-8.2-1.2-12.1C647.8 232.7 623.3 211.8 593.9 211.8zM637.4 272.6c0 24-19.5 43.6-43.6 43.6 -24 0-43.6-19.5-43.6-43.6s19.5-43.6 43.6-43.6C617.9 229 637.4 248.5 637.4 272.6z"
      fill="#414141" />
      <path d="M593.9 249.8c-12.6 0-22.8 10.2-22.8 22.8 0 12.6 10.2 22.8 22.8 22.8s22.8-10.2 22.8-22.8C616.7 260 606.5 249.8 593.9 249.8zM604.5 272.6c0 5.9-4.8 10.7-10.7 10.7s-10.7-4.8-10.7-10.7c0-5.9 4.8-10.7 10.7-10.7S604.5 266.7 604.5 272.6z" fill="#CDCCCC"
      />
      <circle cx="593.9" cy="272.6" r="10.7" fill="#E6E6E5" />
      <path d="M593.9 229c-24 0-43.6 19.5-43.6 43.6s19.5 43.6 43.6 43.6c24 0 43.6-19.5 43.6-43.6S617.9 229 593.9 229zM634.2 272.6c0 1.4-0.1 2.8-0.2 4.1 -1.9 19-17 34.1-36 36 -1.4 0.1-2.7 0.2-4.1 0.2 -5.6 0-10.9-1.1-15.7-3.2 -1.2-0.5-2.4-1.1-3.5-1.7 -1.1-0.6-2.3-1.3-3.3-2 -9.7-6.5-16.4-17.1-17.6-29.4 -0.1-1.4-0.2-2.7-0.2-4.1 0-22.3 18.1-40.4 40.4-40.4 1.4 0 2.8 0.1 4.1 0.2 12.2 1.2 22.8 7.9 29.4 17.6 0.7 1.1 1.4 2.2 2 3.3 0.6 1.1 1.2 2.3 1.7 3.5C633.1 261.7 634.2 267 634.2 272.6z"
      fill="#333" />
      <path d="M629.4 253.3c-0.6-1.1-1.3-2.3-2-3.3 -6.5-9.7-17.1-16.4-29.4-17.6 -1.4-0.1-2.7-0.2-4.1-0.2 -22.3 0-40.4 18.1-40.4 40.4 0 1.4 0.1 2.8 0.2 4.1 1.2 12.2 7.9 22.8 17.6 29.4 1.1 0.7 2.2 1.4 3.3 2 1.1 0.6 2.3 1.2 3.5 1.7 4.8 2 10.1 3.2 15.7 3.2 1.4 0 2.8-0.1 4.1-0.2 19-1.9 34.1-17 36-36 0.1-1.4 0.2-2.7 0.2-4.1 0-5.6-1.1-10.9-3.2-15.7C630.6 255.6 630 254.5 629.4 253.3zM626.8 272.6c0 18.2-14.8 33-33 33 -18.2 0-33-14.8-33-33 0-18.2 14.8-33 33-33C612.1 239.6 626.8 254.4 626.8 272.6z"
      fill="#CDCCCC" />
      <polygon points="595.1 246.9 596.4 244.7 595.1 242.5 592.6 242.5 591.3 244.7 592.6 246.9 " fill="#CDCCCC" />
      <polygon points="574.5 255.1 576.3 253.3 575.7 250.9 573.2 250.2 571.5 252 572.1 254.4 " fill="#CDCCCC" />
      <polygon points="567.6 273.7 567.6 271.1 565.4 269.9 563.2 271.1 563.2 273.7 565.4 274.9 " fill="#CDCCCC" />
      <polygon points="571.6 290.6 570.9 293 572.7 294.8 575.2 294.1 575.8 291.7 574 289.9 " fill="#CDCCCC" />
      <polygon points="591.9 298.7 590.6 300.8 591.9 303 594.4 303 595.6 300.8 594.4 298.7 " fill="#CDCCCC" />
      <polygon points="612.4 290.4 610.7 292.2 611.3 294.7 613.7 295.3 615.5 293.5 614.9 291.1 " fill="#CDCCCC" />
      <polygon points="619.4 271.9 619.4 274.4 621.6 275.7 623.8 274.4 623.8 271.9 621.6 270.6 " fill="#CDCCCC" />
      <polygon points="615.4 254.9 616 252.5 614.3 250.7 611.8 251.4 611.2 253.8 613 255.6 " fill="#CDCCCC" />
    </g>
    <g class="wheel">
      <path d="M185.2 272.6c0-18.2-14.8-33-33-33 -18.2 0-33 14.8-33 33 0 18.2 14.8 33 33 33C170.4 305.5 185.2 290.8 185.2 272.6zM177.8 274.4v-2.5l2.2-1.3 2.2 1.3v2.5l-2.2 1.3L177.8 274.4zM170.2 251.4l2.4-0.7 1.8 1.8 -0.7 2.4 -2.4 0.7 -1.8-1.8L170.2 251.4zM151 242.5h2.5l1.3 2.2 -1.3 2.2H151l-1.3-2.2L151 242.5zM131.6 250.2l2.4 0.7 0.7 2.4 -1.8 1.8 -2.4-0.7 -0.7-2.4L131.6 250.2zM126 271.1v2.5l-2.2 1.3 -2.2-1.3v-2.5l2.2-1.3L126 271.1zM133.5 294.1l-2.4 0.7 -1.8-1.8 0.7-2.4 2.4-0.7 1.8 1.8L133.5 294.1zM152.8 303h-2.5l-1.3-2.2 1.3-2.2h2.5l1.3 2.2L152.8 303zM152.2 295.4c-12.6 0-22.8-10.2-22.8-22.8 0-12.6 10.2-22.8 22.8-22.8 12.6 0 22.8 10.2 22.8 22.8C175 285.2 164.8 295.4 152.2 295.4zM172.1 295.3l-2.4-0.7 -0.7-2.4 1.8-1.8 2.4 0.7 0.7 2.4L172.1 295.3z"
      fill="#E6E6E5" />
      <path d="M212.8 277.2c0.1-1.5 0.2-3.1 0.2-4.6 0-33.5-27.2-60.7-60.7-60.7 -22.5 0-42.2 12.3-52.7 30.5 -3.8 6.7-6.4 14.1-7.5 22.1 -0.3 2.3-0.5 4.7-0.5 7.1 0 0.3 0 0.6 0 1 0 1.6 0.1 3.1 0.2 4.6v0c0.3 3.7 0.9 7.4 1.8 10.9 6.9 26 30.5 45.2 58.7 45.2 27.4 0 50.6-18.2 58.1-43.2 0.2-0.7 0.4-1.5 0.6-2.2C211.8 284.4 212.5 280.9 212.8 277.2L212.8 277.2zM152.2 316.1c-24 0-43.6-19.5-43.6-43.6s19.5-43.6 43.6-43.6c24 0 43.6 19.5 43.6 43.6S176.3 316.1 152.2 316.1z"
      fill="#414141" />
      <path d="M175 272.6c0-12.6-10.2-22.8-22.8-22.8 -12.6 0-22.8 10.2-22.8 22.8 0 12.6 10.2 22.8 22.8 22.8C164.8 295.4 175 285.2 175 272.6zM141.5 272.6c0-5.9 4.8-10.7 10.7-10.7 5.9 0 10.7 4.8 10.7 10.7 0 5.9-4.8 10.7-10.7 10.7C146.3 283.2 141.5 278.5 141.5 272.6z"
      fill="#CDCCCC" />
      <circle cx="152.2" cy="272.6" r="10.7" fill="#E6E6E5" />
      <path d="M195.8 272.6c0-24-19.5-43.6-43.6-43.6 -24 0-43.6 19.5-43.6 43.6s19.5 43.6 43.6 43.6C176.3 316.1 195.8 296.6 195.8 272.6zM156.4 312.7c-1.4 0.1-2.7 0.2-4.1 0.2 -5.6 0-10.9-1.1-15.7-3.2 -1.2-0.5-2.4-1.1-3.5-1.7 -1.1-0.6-2.3-1.3-3.3-2 -9.7-6.5-16.4-17.1-17.6-29.4 -0.1-1.4-0.2-2.7-0.2-4.1 0-22.3 18.1-40.4 40.4-40.4 1.4 0 2.8 0.1 4.1 0.2 12.2 1.2 22.8 7.9 29.4 17.6 0.7 1.1 1.4 2.2 2 3.3 0.6 1.1 1.2 2.3 1.7 3.5 2 4.8 3.2 10.1 3.2 15.7 0 1.4-0.1 2.8-0.2 4.1C190.5 295.7 175.4 310.8 156.4 312.7z"
      fill="#333" />
      <path d="M192.4 276.7c0.1-1.4 0.2-2.7 0.2-4.1 0-5.6-1.1-10.9-3.2-15.7 -0.5-1.2-1.1-2.4-1.7-3.5 -0.6-1.1-1.3-2.3-2-3.3 -6.5-9.7-17.1-16.4-29.4-17.6 -1.4-0.1-2.7-0.2-4.1-0.2 -22.3 0-40.4 18.1-40.4 40.4 0 1.4 0.1 2.8 0.2 4.1 1.2 12.2 7.9 22.8 17.6 29.4 1.1 0.7 2.2 1.4 3.3 2 1.1 0.6 2.3 1.2 3.5 1.7 4.8 2 10.1 3.2 15.7 3.2 1.4 0 2.8-0.1 4.1-0.2C175.4 310.8 190.5 295.7 192.4 276.7zM152.2 305.5c-18.2 0-33-14.8-33-33 0-18.2 14.8-33 33-33 18.2 0 33 14.8 33 33C185.2 290.8 170.4 305.5 152.2 305.5z"
      fill="#CDCCCC" />
      <polygon points="153.5 246.9 154.7 244.7 153.5 242.5 151 242.5 149.7 244.7 151 246.9 " fill="#CDCCCC" />
      <polygon points="132.9 255.1 134.7 253.3 134 250.9 131.6 250.2 129.8 252 130.5 254.4 " fill="#CDCCCC" />
      <polygon points="121.6 273.7 123.8 274.9 126 273.7 126 271.1 123.8 269.9 121.6 271.1 " fill="#CDCCCC" />
      <polygon points="130 290.6 129.3 293 131.1 294.8 133.5 294.1 134.2 291.7 132.4 289.9 " fill="#CDCCCC" />
      <polygon points="150.2 298.7 149 300.8 150.2 303 152.8 303 154 300.8 152.8 298.7 " fill="#CDCCCC" />
      <polygon points="170.8 290.4 169 292.2 169.7 294.7 172.1 295.3 173.9 293.5 173.2 291.1 " fill="#CDCCCC" />
      <polygon points="182.1 271.9 179.9 270.6 177.8 271.9 177.8 274.4 179.9 275.7 182.1 274.4 " fill="#CDCCCC" />
      <polygon points="173.8 254.9 174.4 252.5 172.6 250.7 170.2 251.4 169.5 253.8 171.3 255.6 " fill="#CDCCCC" />
    </g>
    <path d="M61.2 261.7l3.6-10.9c0.9-2.8-1.2-5.7-4.1-5.7H18.2c-0.4 0-0.8 0-1.2 0.1 -3 0.6-5.3 3.2-5.3 6.4v6.5c0 3.6 2.9 6.5 6.5 6.5h1.8 37.1C59 264.7 60.6 263.5 61.2 261.7zM26.3 258c-1.7 0-3.1-1.4-3.1-3.1 0-1.7 1.4-3.1 3.1-3.1s3.1 1.4 3.1 3.1C29.4 256.6 28 258 26.3 258z"
    fill="#B4B4B4" />
    <circle cx="26.3" cy="254.9" r="3.1" fill="#CDCCCC" />
    <path d="M59.9 195.6h-5.6c-1.2 0-2.3 0.6-2.9 1.7l-10.5 18.6c-3 5.4-4.1 11.6-3 17.6 0.1 0.8 0.8 1.4 1.6 1.4h5.6c1.4 0 2.7-0.8 3.3-2.2L63 200.3C64 198.1 62.3 195.6 59.9 195.6zM57.7 211.8l-16.9 4.5 1.2-2.1 16.7-4.4L57.7 211.8zM59.5 207.8l-16.4 4.4 2.4-4.2 15.8-4.2L59.5 207.8z"
    fill="#F58F31" />
    <path d="M64.6 196c-1-1.6-2.8-2.5-4.6-2.5h-5.6c-2 0-3.8 1.1-4.8 2.8L39 214.9c-3.3 5.8-4.4 12.6-3.2 19.1 0.3 1.8 1.9 3.2 3.8 3.2h5.6c2.3 0 4.4-1.3 5.3-3.4L65 201.2C65.7 199.5 65.6 197.5 64.6 196zM45.2 234.9h-5.6c-0.8 0-1.5-0.6-1.6-1.4 -1.1-6.1 0-12.3 3-17.6l10.5-18.6c0.6-1 1.7-1.7 2.9-1.7h5.6c2.4 0 4 2.5 3.1 4.7l-14.5 32.5C47.9 234.1 46.6 234.9 45.2 234.9z"
    fill="#CDCCCC" />
    <polygon points="43.2 212.2 59.5 207.8 61.4 203.7 45.6 207.9 " fill="#E98832" />
    <polygon points="40.8 216.3 57.7 211.8 58.7 209.8 42 214.2 " fill="#E98832" />
    <path d="M698.6 245.3h-27.9c-2.4 0-4.3 1.9-4.3 4.3v10.7c0 2.4 1.9 4.3 4.3 4.3h24.6 4.7c3.6 0 6.5-2.9 6.5-6.5v-6.3c0-3.6-2.9-6.5-6.5-6.5h-0.5 0H698.6zM675.1 258c-1.7 0-3.1-1.4-3.1-3.1 0-1.7 1.4-3.1 3.1-3.1s3.1 1.4 3.1 3.1C678.1 256.6 676.8 258 675.1 258z"
    fill="#CDCCCC" />
    <path d="M45.6 171.6c0.3 0.1 0.6 0.3 0.9 0.5C46.2 171.9 45.9 171.7 45.6 171.6z" fill="#B4B4B4" />
    <path d="M13.6 187.6c-0.1-0.2-0.1-0.3-0.2-0.5C13.4 187.3 13.5 187.5 13.6 187.6z" fill="#B4B4B4" />
    <path d="M13.4 186.3c0-0.2 0.1-0.5 0.2-0.7C13.5 185.8 13.4 186 13.4 186.3z" fill="#B4B4B4" />
    <path d="M13.4 187c0-0.2 0-0.3 0-0.5C13.3 186.6 13.3 186.8 13.4 187z" fill="#B4B4B4" />
    <path d="M14 188.3c-0.2-0.2-0.3-0.3-0.4-0.5C13.7 187.9 13.9 188.1 14 188.3z" fill="#B4B4B4" />
    <path d="M47 172.7c0.3 0.5 0.4 1 0.3 1.5C47.4 173.7 47.2 173.2 47 172.7z" fill="#B4B4B4" />
    <path d="M31.7 189.4c1.4 0 2.7-0.5 3.6-1.5l11.1-12.1c-0.4-0.4-1-0.7-1.7-0.6 -20.3 0.7-27.9 8.2-30.8 13.1 0.4 0.4 1 0.7 1.7 0.7l14.5 0.3 0 0L31.7 189.4z" fill="#B4B4B4" />
    <path d="M44.8 175.1c0.7 0 1.2 0.2 1.7 0.6l0 0 0.2-0.3c0.4-0.4 0.6-0.8 0.6-1.3 0.1-0.5-0.1-1.1-0.3-1.5 0 0 0 0 0 0 0 0 0 0 0 0 -0.1-0.2-0.3-0.4-0.5-0.6 -0.2-0.2-0.5-0.4-0.9-0.5 -0.2-0.1-0.5-0.1-0.7-0.1 -21.6 0.8-28.9 9.2-31.3 14.1 -0.1 0.2-0.2 0.4-0.2 0.7 0 0.1 0 0.1 0 0.2 0 0.2 0 0.3 0 0.5 0 0.1 0 0.1 0 0.2 0 0.2 0.1 0.3 0.2 0.5 0 0 0 0.1 0.1 0.1 0.1 0.2 0.2 0.4 0.4 0.5 0 0 0 0 0 0v0C16.9 183.4 24.5 175.9 44.8 175.1z"
    fill="#CDCCCC" />
    <path d="M700 166.5c0.6 8.3 0.1 20.8-5.5 32 1-0.1 2-0.4 2.8-0.8 0 0 0 0 0 0 3.8-1.7 6.4-5.5 6.4-9.9v-15.6c0-3.3-1.5-6.3-3.9-8.2 0.1 0.8 0.2 1.7 0.2 2.7C700.1 166.6 700 166.5 700 166.5z" fill="#F3F3F3" />
    <path d="M677.7 162.1l2.8 15.8 5 27.7c0.3 1.8 2.6 2.5 3.8 1 1.2-1.5 2.3-3 3.2-4.6 0.7-1.2 1.4-2.3 2-3.5 5.6-11.2 6-23.7 5.5-32 -0.7-1.6-2.2-2.7-4-2.7h-13.1c-2.1 0-3.7 1.4-4.2 3.3L677.7 162.1c-0.4-2.7 1.7-5.1 4.4-5.1H682c-1.4 0-2.7 0.7-3.4 1.7C677.8 159.6 677.5 160.8 677.7 162.1z"
    fill="#B4B4B4" />
    <path d="M677.8 162.1l0.9 4.9c0.5-1.9 2.1-3.3 4.2-3.3H696c1.8 0 3.3 1.1 4 2.7 0 0.1 0.1 0.1 0.1 0.2 -0.1-0.9-0.1-1.8-0.2-2.7 -0.1-1.2-0.3-2.3-0.4-3.3 -0.3-2.1-2.1-3.7-4.3-3.7h-0.1 -13.1C679.4 157 677.3 159.4 677.8 162.1z" fill="#CDCCCC" />
    <path d="M658 189.7c0 0.1-0.1 0.2-0.1 0.4C657.9 190 658 189.9 658 189.7z" fill="#F58F31" />
    <path d="M658.1 188.5c0-3.8-3.1-6.9-6.9-6.9s-6.9 3.1-6.9 6.9c0 0 0 0 0 0.1 0-0.7 0.2-1.4 0.4-2.1l11.4-2.7c0.9 0.9 1.5 2 1.8 3.2l-13.3 3.1c0.1 0.6 0.3 1.1 0.6 1.6l12.9-3.1C658.1 188.6 658.1 188.5 658.1 188.5z" fill="#F58F31" />
    <path d="M645.9 192.7c-0.2-0.2-0.3-0.5-0.5-0.7C645.5 192.2 645.7 192.5 645.9 192.7z" fill="#F58F31" />
    <path d="M657.8 190.5l-11.5 2.7c1.3 1.3 3 2.1 5 2.1C654.3 195.4 656.9 193.3 657.8 190.5z" fill="#F58F31" />
    <path d="M644.6 189.9c-0.1-0.3-0.1-0.6-0.1-1C644.5 189.3 644.5 189.6 644.6 189.9z" fill="#F58F31" />
    <path d="M651.3 179.4c-5 0-9 4.1-9 9s4.1 9 9 9 9-4.1 9-9S656.2 179.4 651.3 179.4zM646.3 193.2L646.3 193.2c-0.2-0.1-0.3-0.3-0.4-0.5 -0.2-0.2-0.3-0.5-0.5-0.7 -0.1-0.1-0.2-0.2-0.2-0.3l0 0c-0.3-0.5-0.5-1-0.6-1.6l0 0c0 0 0-0.1 0-0.1 -0.1-0.3-0.1-0.6-0.1-1 0-0.1 0-0.3 0-0.4 0 0 0 0 0 0 0 0 0 0 0-0.1 0-3.8 3.1-6.9 6.9-6.9s6.9 3.1 6.9 6.9c0 0 0 0.1 0 0.1l0 0c0 0.4-0.1 0.8-0.1 1.1 0 0.1-0.1 0.2-0.1 0.4 0 0.1-0.1 0.3-0.1 0.4l0 0c-0.9 2.8-3.4 4.9-6.5 4.9C649.3 195.4 647.5 194.5 646.3 193.2z"
    fill="#B4B4B4" />
    <path d="M656.1 183.7l-11.4 2.7c-0.2 0.7-0.4 1.4-0.4 2.1 0 0 0 0 0 0 0 0.1 0 0.3 0 0.4 0 0.3 0 0.6 0.1 1 0 0 0 0.1 0 0.1l0 0 13.3-3.1C657.6 185.7 657 184.6 656.1 183.7z" fill="#E98832" />
    <path d="M657.8 190.5c0-0.1 0.1-0.3 0.1-0.4 0-0.1 0.1-0.2 0.1-0.4 0.1-0.4 0.1-0.7 0.1-1.1l0 0 -12.9 3.1 0 0c0.1 0.1 0.2 0.2 0.2 0.3 0.1 0.2 0.3 0.5 0.5 0.7 0.1 0.2 0.2 0.4 0.4 0.5l0.1 0L657.8 190.5 657.8 190.5z" fill="#E98832" />
    <path d="M707.8 219.8l-5.7-3.3v17.9l5.7-3.3C712.1 228.6 712.1 222.3 707.8 219.8z" fill="#F58F31" />
    <path d="M702.1 215.6c0-0.9-0.7-1.6-1.6-1.6 -0.1 0-0.1 0-0.2 0 0 0 0 0 0 0 -0.8 0.1-1.4 0.8-1.4 1.6v19.7c0 0.9 0.7 1.6 1.6 1.6 0 0 0 0 0 0h0c0.9 0 1.6-0.7 1.6-1.6v-0.9 -17.9V215.6z" fill="#B4B4B4" />
    <circle cx="675.1" cy="254.9" r="3.1" fill="#B4B4B4" />
    <path d="M129.2 101.1c3.3 1 7-0.1 9.4-2.8l39.7-45.1c2.8-3.2 3.1-7.8 0.7-11.3l-4.3-4.6c0 0 0-0.1-0.1-0.1 -4.2 3.2-8.1 6.8-11.7 10.8 -10.4 11.6-26.7 29.8-43.7 48.7L129.2 101.1z" fill="#1D3F54" />
    <path d="M117.4 99.4l6.5 2.9 4.2 1.9c1.2 0.4 2.4 0.5 3.6 0.5 3.5 0 7-1.5 9.4-4.2l39.7-45.1c3-3.4 3.8-8.1 2.4-12.3 -0.4-1.1-0.9-2.2-1.6-3.2l-4.3-4.7 0 0 -0.2-0.2c-0.6-0.7-1.6-0.7-2.3-0.1 -0.6 0.6-0.7 1.5-0.2 2.2 0 0 0 0.1 0.1 0.1l4.3 4.6c2.4 3.5 2.1 8.1-0.7 11.3l-39.7 45.1c-2.4 2.7-6.2 3.8-9.4 2.8l-10-4.5 -0.5-0.2c-0.8-0.4-1.8 0-2.2 0.8 -0.3 0.7-0.1 1.5 0.5 1.9 0 0 0 0 0 0C117.2 99.3 117.3 99.4 117.4 99.4z"
    fill="#CDCCCC" />
    <path d="M465.3 39.5c-1.1 2.9-0.6 6.2 1.2 8.7l41 55.8c5.5 7.5 15.3 10.8 24.2 8.2l1.6-0.5 -62.8-73.2c-1.1-1.3-2.3-2.5-3.5-3.6L465.3 39.5z" fill="#1D3F54" />
    <path d="M464.1 33.2l-1.9 5.1c-0.8 2.2-1 4.5-0.5 6.7 0.3 1.8 1.1 3.5 2.2 5l41 55.8c4.5 6.1 11.4 9.8 18.7 10.3 0.6 0 1.3 0.1 1.9 0.1 2.4 0 4.8-0.3 7.2-1l2.1-0.6c0.3-0.1 0.5-0.3 0.7-0.5 0.4-0.4 0.6-1 0.4-1.6 -0.3-0.9-1.1-1.4-2-1.1l-0.5 0.1 -1.6 0.5c-9 2.6-18.7-0.7-24.2-8.2l-41-55.8c-1.8-2.5-2.3-5.8-1.2-8.7l1.7-4.6 0.2-0.5c0.3-0.8-0.1-1.8-1-2.1 -0.6-0.2-1.2-0.1-1.7 0.4C464.3 32.8 464.2 33 464.1 33.2z"
    fill="#CDCCCC" />
    <path d="M280.1 56c-0.2 0-0.4 0-0.6 0 -51.3 3.3-89 27.4-111.6 47.1 -8.2 7.1-8.4 16.7-5.9 23.4 2.5 6.7 9 13.8 19.9 13.8h93.7c7.9 0 14.4-6.4 14.4-14.4V65.8c0-2.7-1.1-5.3-3.1-7.2C285 56.9 282.6 56 280.1 56zM197.8 133.5l37.4-60.7c6.9-2.4 14.2-4.5 21.8-6.1l-41.1 66.8H197.8zM233.4 133.5h-9l42.2-68.6c3.2-0.5 6.5-0.9 9.8-1.3L233.4 133.5z"
    fill="#1D3F54" />
    <path d="M279.3 52.8c-52.2 3.3-90.6 27.9-113.6 47.9 -7.9 6.9-10.5 17.2-6.8 27 3.7 9.8 12.5 15.9 22.9 15.9h93.7c9.7 0 17.6-7.9 17.6-17.6V65.8c0-3.6-1.5-7-4.1-9.5C286.4 53.8 282.9 52.5 279.3 52.8zM289.9 126c0 7.9-6.4 14.4-14.4 14.4h-93.7c-10.9 0-17.4-7.1-19.9-13.8 -2.5-6.7-2.2-16.3 5.9-23.4 22.6-19.7 60.3-43.8 111.6-47.1 0.2 0 0.4 0 0.6 0 2.5 0 4.8 0.9 6.7 2.7 2 1.9 3.1 4.4 3.1 7.2V126z"
    fill="#CDCCCC" />
    <path d="M235.1 72.7l-37.4 60.7h18l41.1-66.8C249.3 68.3 242 70.3 235.1 72.7z" fill="#435967" />
    <path d="M224.3 133.5h9l43-69.9c-3.3 0.4-6.6 0.8-9.8 1.3L224.3 133.5z" fill="#435967" />
    <path d="M329.1 140.3h100.8v-36.4h-76.7 -24.1c-0.5 0-0.9 0-1.4 0.1 -5.7 0.5-10.6 4-13 8.9V126C314.8 133.9 321.2 140.3 329.1 140.3z" fill="#1D3F54" />
    <path d="M453.8 65.1c-4.8-6.7-12.4-10.9-20.6-11.4v86.6h38.7c6.4 0 11.9-3.4 14.8-9 2.9-5.7 2.4-12.1-1.2-17.3L453.8 65.1zM440.1 102.3L454.5 79l8.1 12.5 -22.4 36.4V102.3zM452.3 132.9h-7.9l21.9-35.6 4 6.2L452.3 132.9z" fill="#1D3F54" />
    <path d="M456.5 63.3c-5.7-8-15-12.8-24.9-12.8 0 0 0 0 0 0h0H329.1c-9.7 0-17.6 7.9-17.6 17.6V126c0 9.7 7.9 17.6 17.6 17.6h102.4 40.3c7.6 0 14.2-4 17.7-10.8 3.5-6.8 2.9-14.5-1.4-20.6L456.5 63.3zM486.7 131.3c-2.9 5.7-8.4 9-14.8 9h-38.7V53.8c8.2 0.5 15.9 4.7 20.6 11.4l31.6 48.9C489.1 119.2 489.6 125.7 486.7 131.3zM314.8 112.9V68.1c0-7.9 6.4-14.4 14.4-14.4h100.8v50.2 36.4H329.1c-7.9 0-14.4-6.4-14.4-14.4V112.9z"
    fill="#CDCCCC" />
    <polygon points="454.5 79 440.1 102.3 440.1 127.9 462.5 91.4 " fill="#435967" />
    <polygon points="444.5 132.9 452.3 132.9 470.4 103.6 466.3 97.3 " fill="#435967" />
    <path d="M352.9 189.8c3.6 0 6.5-2.9 6.5-6.5v-0.4c0-3.6-2.9-6.5-6.5-6.5h-22.5c-3.6 0-6.5 2.9-6.5 6.5v0.4c0 3.6 2.9 6.5 6.5 6.5H352.9z" fill="#9A2125" />
    <path d="M330.4 176.3h22.5c3.6 0 6.5 2.9 6.5 6.5V180c0-3.6-2.9-6.5-6.5-6.5h-22.5c-3.6 0-6.5 2.9-6.5 6.5v2.9C323.9 179.2 326.8 176.3 330.4 176.3z" fill="#D93132" />
    <path d="M661.1 272.3c0.1-1.4 0.2-2.8 0.2-4.2 0-37.2-30.3-67.5-67.5-67.5 -24.1 0-46.5 13-58.6 33.9 -4.4 7.6-7.2 15.9-8.3 24.6 -0.4 2.6-0.5 5.3-0.6 7.9l0 0.4c0 0.2 0 0.4 0 0.6 0 7 1.1 13.9 3.2 20.6h-16.8H303.1h-29.9c-1.2 0-2.2 1-2.2 2.2l0 0c0 1.2 1 2.2 2.2 2.2h258.6c0.6 0 1.2-0.3 1.6-0.7 0.4-0.4 0.6-1 0.6-1.6l-0.2-2.4c0-0.2 0-0.3-0.1-0.5 -0.8-2.4-1.4-4.9-1.9-7.4 -0.8-4.1-1.3-8.2-1.3-12.4l0-1c0-2.5 0.2-5 0.6-7.4 1.1-8.1 3.7-15.9 7.8-23 6.3-11 15.7-19.6 26.6-25.1 0.4-0.2 0.8-0.4 1.2-0.6 0.6-0.3 1.1-0.5 1.7-0.8 7.9-3.4 16.4-5.3 25.2-5.3 6.8 0 13.3 1.1 19.4 3 22.9 7.4 40.2 27.6 43.3 52.1 0.3 2.6 0.5 5.3 0.5 8 0 1.3-0.1 2.7-0.1 4 -0.1 1.2 0.8 2.2 2 2.3 0.1 0 0.2 0 0.3 0C660.1 274.1 661 273.4 661.1 272.3z"
    fill="#B4B4B4" />
    <path d="M73.2 279.3c1.1-0.1 1.9-1 2-2.1v0c0-0.1 0-0.1 0-0.2 -0.2-2.4-0.3-4.6-0.3-6.7 0-1.2 0-2.4 0.1-3.6 1.9-41 35.8-73.7 77.2-73.7 41.4 0 75.4 32.8 77.2 73.7 0.1 1.2 0.1 2.4 0.1 3.6 0 2.1-0.1 4.3-0.3 6.8 0 0.1 0 0.1 0 0.2 0 1.1 0.8 2 1.9 2.1 0.1 0 0.1 0 0.2 0 0.3 0 0.5-0.1 0.8-0.1 0.8-0.3 1.3-1 1.4-1.8 0.2-2.6 0.3-4.9 0.3-7.1 0-45-36.6-81.7-81.7-81.7 -45 0-81.7 36.6-81.7 81.7 0 2.2 0.1 4.5 0.3 7 0 0.1 0 0.1 0 0.2C71 278.6 72 279.4 73.2 279.3z"
    fill="#B4B4B4" />
    <path d="M339.3 14c-22.6 0-42-0.3-59.6 0.2l1.6 2.8c3.5 6 9.7 9.7 16.6 10l143.6 5.1c3.2 0.1 6.2-1.4 8-4l0.2-0.3c-3.1-1.4-6.3-2.5-9.7-3.2C419.9 20.1 384.3 14 339.3 14z" fill="#36281A" />
    <path d="M279.7 14.2c17.7-0.5 37-0.2 59.6-0.2 44.9 0 80.6 6.1 100.7 10.5 3.3 0.7 6.6 1.8 9.7 3.2l2.4-3.6c-3.8-1.9-7.9-3.4-12.1-4.3 -20.1-4.5-55.8-10.5-100.7-10.5 -23.8 0-43.9-0.4-62.3 0.2L279.7 14.2z" fill="#43311F" />
    <path d="M273.7 10.4l4.8 8.2c0.8 1.4 1.8 2.7 2.9 3.9 4.2 4.6 10 7.5 16.5 7.7l143.6 5.1c0.2 0 0.3 0 0.5 0 1 0 1.9-0.1 2.8-0.3 3-0.7 5.7-2.5 7.5-5.1l2.7-4c0-0.1 0.1-0.1 0.1-0.2 0.4-0.7 0.2-1.6-0.5-2.1 -0.7-0.5-1.8-0.3-2.3 0.4l-0.1 0.1 -2.4 3.6 -0.2 0.3c-1.8 2.6-4.8 4.1-8 4L298 26.9c-6.9-0.2-13.2-4-16.6-10l-1.6-2.8L277 9.6l-0.5-0.8c-0.5-0.8-1.5-1-2.2-0.6 -0.6 0.3-0.9 1-0.8 1.6v0C273.6 10 273.6 10.2 273.7 10.4z"
    fill="#CDCCCC" />
    <path d="M9.9 216.5c0 0 0 0.1-0.1 0.1 0-0.3 0.1-0.6 0.1-1 -1.3 1.3-2.2 3.1-2.2 5.1v6.9c0 3.3 2.2 6 5.2 6.9C9.8 228.2 9.6 221.2 9.9 216.5z" fill="#CD3E43" />
    <path d="M18.2 238.8l4.5-24.8c0 0 0 0 0-0.1 0.2-1.1-0.4-2.2-1.4-2.6 0 0 0 0 0 0 -0.3-0.1-0.7-0.2-1-0.2h0c1.5 0 2.7 1.4 2.4 2.9l-0.5 2.8c-0.3-1.1-1.2-1.9-2.4-1.9h-7.5c-1 0-1.9 0.6-2.3 1.5 -0.3 4.7 0 11.7 3 18 0.8 1.7 1.8 3.3 3.1 4.9 0.2 0.3 0.6 0.4 0.9 0.4C17.5 239.8 18.1 239.5 18.2 238.8z"
    fill="#B4B4B4" />
    <path d="M9.9 216.5c0.4-0.9 1.3-1.5 2.3-1.5h7.5c1.2 0 2.1 0.8 2.4 1.9l0.5-2.8c0.3-1.5-0.9-2.9-2.4-2.9h-7.5 0c-1.2 0-2.3 0.9-2.5 2.1 -0.1 0.7-0.2 1.5-0.3 2.4 0 0.3-0.1 0.6-0.1 1C9.9 216.6 9.9 216.5 9.9 216.5z" fill="#CDCCCC" />
  </g>
</svg>
              
            
!

CSS

              
                html, body {
  padding: 0;
  margin: 0;
  overflow: hidden;
  background-image: linear-gradient(to bottom, #34495e, #3498db, #9b59b6);
}

h1 {
  position: absolute;
  bottom: 30px;
  left: 50%;
  background: white;
  font-family: 'Montserrat', helvetica, arial;
  font-size: 14px;
  text-transform: uppercase;
  padding: 5px;
  transform: translate3d(-50%, 0, 0);
  z-index: 2;
  text-align: center;
}

.car {
  position: absolute;
  z-index: 2;
  bottom: -20px;
  left: 5%;
  width: 230px;
  animation: car 30s ease infinite;
  
  .wheel {
    animation: spin 1s linear infinite;
    transform-origin: center center;
  }

}

@keyframes wheel {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

@keyframes car {
  from, to {
    transform: translateX(0);
  }
  50% {
    transform: translateX(100%);
  }
}

              
            
!

JS

              
                'use strict';

/*
 * CLASSES
 */

class Building {
  constructor() {
    const bWidth = getRandomInt(150, 400);
    const bHeight = getRandomInt(200, 380);
    const bX = (buildings[buildings.length - 1]) ? buildings[buildings.length - 1].x + buildings[buildings.length - 1].width + getRandomInt(0, 100) : 0;
    const bY = height - bHeight;

    this.x = bX;
    this.y = bY;
    this.width = bWidth;
    this.height = bHeight;
    this.color = getRandomValFromArray(buildingColors);

    // Upper roof
    if (getRandomTrueFalse()) {
      const innerBuildingWidth = getRandomInt(50, bWidth);
      this.upperRoof = {
        x: bX + getRandomInt(0, (bWidth - innerBuildingWidth)),
        y: bY - getRandomInt(20, 40),
        width: innerBuildingWidth
      }
    }
  }
  drawWindows() {
    const windowColumns = Math.floor(this.width / (bWindow.width + bWindow.offset));
    const windowLines = Math.floor(this.height / (bWindow.height + bWindow.offset));
    // Windows
    for (let j = 1; j < windowColumns; j++) {
      for (var k = 1; k < windowLines; k++) {

        ctx.fillStyle = 'rgba(255,255,255,0.9)';
        ctx.fillRect(this.x + j * (bWindow.width + bWindow.offset), this.y + k * (bWindow.height + bWindow.offset), bWindow.width, bWindow.height);
      }
    }
  }
  onResize() {
    const bHeight = this.height
    this.y = height - bHeight;
    if (typeof this.upperRoof !== 'undefined') {
      this.upperRoof.y = height - bHeight - getRandomInt(20, 40);
    }
  }
  update() {
    // Main building
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);

    // Translation
    this.x -= buildingSpeed;

    // Roof
    if (typeof this.upperRoof !== 'undefined') {
      this.upperRoof.x -= buildingSpeed;
      ctx.fillRect(this.upperRoof.x, this.upperRoof.y, this.upperRoof.width, this.height);
    }
    

    this.drawWindows();
    // Add and remove building
    if (this.x <= -this.width) {
      buildings.shift();
      buildings.push(new Building(width + 10));
    }
  }
}

class LandscapeBuilding {
  constructor() {
    const bWidth = getRandomInt(200, 300);
    const bHeight = getRandomInt(300, 450);
    const bX = (landscapeBuildings[landscapeBuildings.length - 1]) ? landscapeBuildings[landscapeBuildings.length - 1].x + landscapeBuildings[landscapeBuildings.length - 1].width + getRandomInt(0, 100) : 0;
    const bY = height - bHeight;

    this.x = bX;
    this.y = bY;
    this.width = bWidth;
    this.height = bHeight;
    this.color = 'rgba(47, 91, 124, 1)';
  }
  drawWindows() {
    const windowColumns = Math.floor(this.width / (bWindow.width + bWindow.offset));
    const windowLines = Math.floor(this.height / (bWindow.height + bWindow.offset));
    // Windows
    for (let j = 1; j < windowColumns; j++) {
      for (var k = 1; k < windowLines; k++) {

        ctx.fillStyle = 'rgba(255,255,255,0.4)';
        ctx.fillRect(this.x + j * (bWindow.width + bWindow.offset), this.y + k * (bWindow.height + bWindow.offset), bWindow.width, bWindow.height);
      }
    }
  }
  onResize() {
    const bHeight = this.height
    this.y = height - bHeight;
  }
  update() {
    ctx.fillStyle = this.color;
    ctx.fillRect(this.x, this.y, this.width, this.height);
    this.drawWindows();
    this.x -= landscapeBuildingSpeed;

    // Add and remove building
    if (this.x <= -this.width) {
      landscapeBuildings.shift();
      landscapeBuildings.push(new LandscapeBuilding(width + 10));
    }
  }
}

class Star {
  constructor(x, y, size) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.light = size;
  }
  onResize() {
    this.x = getRandomInt(10, width);
    this.y = getRandomInt(10, height);
  }
  update() {
    this.light = Math.random() * 1 * this.size;
    this.x -= this.size / 50;

    if (this.x < 10) {
      stars.shift();
      stars.push(new Star(width, getRandomInt(0, height * 0.4), getRandomInt(1, 5)));
    }

    ctx.beginPath();
    ctx.fillStyle = "#FEFEFE";
    ctx.arc(this.x, this.y, this.light, 0, Math.PI * 2);
    ctx.fill();
    ctx.closePath();
  }
}

class Light {
  constructor(x) {
    this.img = new Image();
    this.img.crossOrigin = "Anonymous";
    this.img.src = "http://lab.hengpatrick.fr/codevember-assets/light.png";
    this.width = 24;
    this.height = 195;
    this.x = x
  }
  update() {
    if (this.x < -30) {
      lights.shift();
      lights.push(new Light(width + 10));
    }
    this.x -= lightsSpeed;
    ctx.drawImage(this.img, this.x, height - this.height, this.width, this.height);
  }
}
/*
 * MAIN SCRIPTS
 */
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');

const buildingColors = ['#334D5C', ' #45B29D', '#EFC94C', '#E27A3F', '#DF5A49'];
const windowColors = ['#FFFFFF', ' #EEEEEE', '#FF00FF'];
const buildingSpeed = 0.5;
const lightsSpeed = 0.8;
const landscapeBuildingSpeed = 0.2;

let width = window.innerWidth;
let height = window.innerHeight;
let bWindow = {
  height: 20,
  width: 20,
  offset: 30
}
let buildings = [];
let landscapeBuildings = [];
let stars = [];
let lights = [];

init();

function init() {
  canvas.width = width;
  canvas.height = height;

  // init
  buildings.push(new Building());
  landscapeBuildings.push(new LandscapeBuilding());

  while (buildings[buildings.length - 1].x < width) {
    buildings.push(new Building());
    console.log(init);
  }
  while (landscapeBuildings[landscapeBuildings.length - 1].x < width) {
    landscapeBuildings.push(new LandscapeBuilding());
  }
  for (let i = 0; i < 10; i++) {
    stars.push(new Star(getRandomInt(20, width), getRandomInt(20, 0.4 * height), getRandomInt(1, 5)));
  }
  for (let i = 0; i < 3; i++) {
    lights.push(new Light((width / 3) * i));
  }
  render();
}

function drawWindows(building, color) {
  const windowColumns = Math.floor(building.width / (bWindow.width + bWindow.offset));
  const windowLines = Math.floor(building.height / (bWindow.height + bWindow.offset));
  // Windows
  for (let j = 1; j < windowColumns; j++) {
    for (var k = 1; k < windowLines; k++) {

      ctx.fillStyle = color;
      ctx.fillRect(building.x + j * (bWindow.width + bWindow.offset), building.y + k * (bWindow.height + bWindow.offset), bWindow.width, bWindow.height);
    }
  }
}


function render() {
  ctx.clearRect(0, 0, width, height);

  for (var i = 0; i < stars.length; i++) {
    stars[i].update();
  }

  for (let i = 0; i < landscapeBuildings.length; i++) {
    landscapeBuildings[i].update();
  }

  for (let i = 0; i < buildings.length; i++) {
    buildings[i].update();
  }

  for (var i = 0; i < lights.length; i++) {
    lights[i].update();
  }

  window.requestAnimationFrame(render);
}

function onResize() {
  width = window.innerWidth;
  height = window.innerHeight;

  canvas.width = width;
  canvas.height = height;

  for (let i = 0; i < buildings.length; i++) {
    buildings[i].onResize();
  }
  for (let i = 0; i < landscapeBuildings.length; i++) {
    landscapeBuildings[i].onResize();
  }
  for (let i = 0; i < stars.length; i++) {
    stars[i].onResize();
  }
}

window.addEventListener('resize', onResize, false);

/*
 * ------- Utils -------
 */

function getRandomInt(min, max) {
  return ~~(Math.random() * (max - min + 1)) + min;
}

function getRandomValFromArray(array) {
  return array[Math.floor(Math.random() * array.length)];
}

function getRandomTrueFalse() {
  return parseInt(Math.random() * 2) ? true : false;
}
              
            
!
999px

Console