cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

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.

Quick-add: + add another resource

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.

Quick-add: + add another resource

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.

            
              <div class="sky">
  
  <div id="plane" class="plane">
    
    <div class="scarf-mask">
      <svg id="scarf" class="scarf" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="65" height="48"><defs><path fill="#090" d="M64.6 12.15V8.1q-1.25-.05-6.75 0-4.15.05-6.75-.5-1.6-.3-4.35-1.3-2.25-.75-3.35-1.2-1.9-.7-3.25-1.3Q38.3 3 37.4 2.6q-1.6-.7-2.8-1.05-3.65-1-7.5-.05t-6.6 3.55q-.05.1-1.25 1.3-.75.75-1.3 1.2-.8.65-1.6.95-.15-.05-.3-.15-.6-.3-1.75-1.2l-7.15-5.6Q6.05.6 5.35.5 4.85.35 4.3.5q-.35.15-.6.4l-.85.05q-.577 1.888-.5 3.5.077 1.662.9 3.95.15.1.8.05.55 0 .65.35.55.1 1.1.15 1.85 1.8 4.1 3 3 1.6 6.15 1.9 2.6.25 4.35-.6.95-.45 2-1.5l.05-.05q.75-.8 1.25-1.35.2-.25.4-.45 2.85-3 5.7-3.15.9-.05 2 .2.5.1 1.95.5l5.85 1.9q2.85 1.65 4.65 2.35.2.1.4.15v.3h.75q2.75.85 5.15.55 2.35.35 2.45.35 2.65.25 5.8-.05 2.4-.2 5.8-.85z" id="a"/><path fill="#090" d="M60.35 19.65q-2.25-.9-4.7-.55-4.1.55-8.3 4.25-1.95 1.7-2.55 2.1-1.5 1.05-2.9 1.2-2.5.25-5.65-2.35-.8-.65-2.35-2.05-1.45-1.15-2.7-1.65-1.9-.7-4.7-.4-2.05.2-3.5.8-1.2.5-3.15 1.8-1.1.75-1.6 1.3-.75.9-.75 1.75L7.4 25.7q-3-.05-4.5-.15v4.3q1.2.15 2.45.25 7.3.65 14.4.1l.1-.5q.65-.4 1.35-1.3.75-1.05 1.2-1.55 1.1-1.2 2.7-1.75t3.25-.35q1.6.2 3.1 1.05 1.4.85 2.45 2.2.3.4.85 1.2.45.55.85.9.1.1.2.15.6.45 1.5.65.55.1 1.65.2 4.55.25 7.1-.75.25-.1.55-.25 1.65-.8 3.85-2.65 1.6-1.3 2.3-1.7 1.75-.9 3.85-.65t3.65 1.5q.2.15.85.8.5.5.85.75 1.25.85 2.25.45-.15-.25-.05-.55.15-.3.4-.35.4-1.3.2-2.65-.15-1.35-.85-2.5-1.2-1.95-3.55-2.9z" id="b"/><path fill="#090" d="M56.25 35.4q-1.8-.6-4.35-.35-3.7.35-7.05 2.2-1 .55-3.15 2.05-2.05 1.4-3.2 2.05-1.85 1-3.6 1.25-2.05.3-3.7-.35-.95-.4-2.8-1.85-1.75-1.4-2.85-1.75-.75-.25-1.75-.3-.6-.05-1.8 0-1.15.05-1.7.1-1 .15-1.65.4-.65.25-1.65.9-1.15.8-1.6 1-1.4.7-3.25.85-1.4.1-3.45-.15Q5.5 41 5.35 41q-1.6-.15-2.85-.05-.3 0-.55.05.15.6-.05 2.55-.15 1.6.45 2.3.05.1.15.2.6.55 1.95.7 1.4.15 4-.05 2.8-.3 4-.2 1.15.1 1.7.15 1 .05 1.7-.1 1.2-.2 3.6-2.05 2.2-1.6 3.65-1.55 1.45.05 3.15 1.5 2.6 2.15 2.95 2.35 1.75 1 4.3.85 1.9-.15 4.45-1 4.7-1.6 7.85-3.7 1.6-1.15 2.15-1.4.95-.4 2.7-.65.85-.1 1.15-.1.65-.05 1.15.05.55.15 1.2.6.35.25 1.1.8.75.5 2.35 1.4 1.65.9 2.4 1.45.25.2.8.6.45.35.8.55 1.5.85 3.15.45.2-1.35-.05-3-.15-1.15-.55-3-.2-1.1-.55-1.7-1.5-.3-3.7-1.65-2.55-1.6-3.65-1.95z" id="c"/></defs><use xlink:href="#a"/><use xlink:href="#b"/><use xlink:href="#c"/></svg>
    </div>

 
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="232px" height="116px" viewBox="0 0 232 116">
  <defs>
 

  <g id="chicken_head_0_Layer3_0_FILL">
  <path fill="#FF0000" stroke="none" d="
  M 39.7 -19.15
  Q 39.2 -15.05 39.2 -14.2 41.2 -14.7 43.45 -15.15 47.65 -16 50.55 -16.2 54.3 -16.45 57.5 -15.8 63.55 -14.6 68.7 -10 73.05 -6.1 75.45 -0.95 77.85 4.55 77.5 10.15 77.4 13 76.4 16.6 76.05 18.05 74.45 23 73.95 24.45 73.6 25.7 77.35 25.5 80.7 24.75 82.1 24.35 85 23.65 85.8 23.5 87.75 23.3 89.55 23.05 90.55 22.85 93.1 22.15 95.2 20.55 97.3 18.8 98.45 16.6 99.5 14.2 99.4 11.55 99.15 8.75 97.8 6.65 96.1 4.35 92.95 2.85 90.55 1.8 86.9 1.05 89.45 -1.2 90.2 -5 90.9 -8.45 90.1 -12.25 88.6 -19.65 83.9 -22.5 80.8 -24.35 76.45 -24.15 73.25 -24.1 68.75 -22.75 68.55 -27.25 66.1 -31.2 63.6 -35.2 59.6 -37 55.55 -38.85 50.9 -37.9 46.15 -36.85 43.5 -33.35 41.55 -30.8 40.7 -26.65 40.4 -25.15 39.7 -19.15 Z"/>

  <path fill="#E7F0F6" stroke="none" d="
  M 39.2 -14.2
  Q 35 -13.05 32.1 -11.55 25.4 -8.25 21.4 -1.9 18.15 3.05 17.05 9.45 15.75 16.8 17.85 22.65 20.65 30.55 30.4 37.15 40.25 43.95 49.5 44.5 54.85 44.85 59.75 43.05 64.9 41.1 68.15 37.25 70.3 34.6 72 30.45 72.4 29.15 73.6 25.7 73.95 24.45 74.45 23 76.05 18.05 76.4 16.6 77.4 13 77.5 10.15 77.85 4.55 75.45 -0.95 73.05 -6.1 68.7 -10 63.55 -14.6 57.5 -15.8 54.3 -16.45 50.55 -16.2 47.65 -16 43.45 -15.15 41.2 -14.7 39.2 -14.2 Z"/>
  </g>

  <g id="chicken_head_0_Layer2_0_FILL">
  <path fill="#FF9900" stroke="none" d="
  M 26.25 24.25
  L 26.85 -3.45 -7.6 2.7 26.25 24.25 Z"/>
  </g>

  <g id="chicken__eye">
  <path fill="#000000" stroke="none" d="
  M 49.5 -3.4
  Q 48.45 -3.95 47.15 -3.8 45.85 -3.65 44.75 -2.9 43.2 -1.95 42.7 -0.5 42.45 0.15 42.35 1.85 42.35 3.15 42.5 3.8 42.65 4.85 43.25 5.55 44.1 6.55 45.7 6.75 47.25 6.9 48.75 6.3 50.25 5.65 50.95 4.35 51.5 3.3 51.6 1.7 51.65 0.05 51.2 -1.2 50.65 -2.7 49.5 -3.4 Z"/>
  </g>

  
  <g id="plane__bomb">
  <path fill="#8CA9BD" stroke="none" d="
  M 24.25 39.95
  Q 27.3 35.25 27.6 29.85
  L -92.5 29.85
  Q -92.55 30 -92.55 30.15 -92.9 37.65 -81.8 43.6 -76.75 46.35 -69.25 48.8 -66.95 49.5 -64.4 50.25 -53.55 53.35 -44.1 55.2 -35.7 56.85 -28.45 57.55 -22.35 58.15 -17.05 58.1 -15.95 58.05 -14.8 58 -7.9 57.7 -1.7 56.2 6.85 54.15 13.95 49.65 14.3 49.45 14.7 49.15 21 44.95 24.25 39.95 Z"/>

  <path fill="#718899" stroke="none" d="
  M 27.6 29.85
  L 33.65 29.85 43.35 20.2 25.75 20.15
  Q 27.55 24.05 27.6 28.45 27.6 28.65 27.6 28.85 27.6 29.35 27.6 29.85 Z"/>

  <path fill="#778FA1" stroke="none" d="
  M 33.65 29.85
  L 27.6 29.85
  Q 27.3 35.25 24.25 39.95
  L 43.35 39.9 33.45 30.05 33.65 29.85 Z"/>

  <path fill="#7D97A9" stroke="none" d="
  M 14.25 8.2
  Q 14.2 8.15 14.1 8.1 7.05 3.7 -1.5 1.7 -8.25 0.1 -15.9 0 -16.85 0 -17.85 0.05 -23.75 0.1 -30.55 1.05 -37.25 2 -44.8 3.75 -53.95 5.9 -64.25 9.2 -65.25 9.5 -66.25 9.85 -75.1 12.85 -81 16.2 -91.2 21.95 -92.4 28.85 -92.5 29.35 -92.5 29.85
  L 27.6 29.85
  Q 27.6 29.35 27.6 28.85 27.6 28.65 27.6 28.45 27.55 24.05 25.75 20.15 22.6 13.45 14.25 8.2 Z"/>

  <path fill="#849EB2" stroke="none" d="
  M 72.85 30.05
  L 73.05 29.85 33.65 29.85 33.45 30.05 43.35 39.9 53.15 49.8 92.55 49.8 72.85 30.05 Z"/>

  <path fill="#7890A2" stroke="none" d="
  M 53.15 10.3
  L 43.35 20.2 33.65 29.85 73.05 29.85 92.55 10.3 53.15 10.3 Z"/>
  </g>

  <g id="box_0_Layer0_0_FILL">
  <path fill="#6D5A51" stroke="none" d="
  M -5 -5
  L -5 5 5 5 5 -5 -5 -5 Z"/>
  </g>

  <g id="fokker_0_Layer4_0_FILL">
  <path fill="#6D5A51" stroke="none" d="
  M 68.45 -1.6
  L 77.05 -16.55 72.75 -19.05 64.8 -5.25 43.55 -26.55 40 -23.05 79.55 16.55 83.1 13.05 68.45 -1.6 Z"/>
  </g>

  <g id="fokker_0_Layer3_0_FILL">
  <path fill="#718899" stroke="none" d="
  M -385.5 -77.5
  L -385.5 -9.5
  Q -374.15 2.1 -354.5 9.8
  L -354.5 -77.5 -385.5 -77.5 Z"/>

  <path fill="#ED1F21" stroke="none" d="
  M 73.9 -49.25
  L 71.4 -49.5 -188.95 -75.45 -197.5 -66.5 -197.5 -65.5 -228.5 -66.5 -238.9 -77.5 -354.5 -77.5 -354.5 9.8
  Q -250.95 50.25 83.75 -18.05
  L 83.75 -20 83.8 -45.5 83.5 -45.5 73.7 -49.95 73.9 -49.25 Z"/>

  <path fill="#FFFFFF" stroke="none" d="
  M 147.85 -105.9
  L 98.55 -118.25 64.05 -93.6 64.05 -61.55 71.4 -49.5 73.9 -49.25 73.7 -49.95 83.5 -45.5 83.8 -45.5 83.75 -20 83.8 -17.2 135.5 -22.15 160.15 -66.5 147.85 -105.9 Z"/>
  </g>

  <g id="wheel_vector_0_Layer0_0_FILL">
  <path fill="#000000" stroke="none" d="
  M -9.05 -35.9
  L -34.5 -16.55 -35.2 15.45 -10.65 35.95 20.7 29.55 35.2 1.05 21.95 -28.15 -9.05 -35.9
  M -23.2 -11.1
  L -6.1 -24.1 14.8 -18.85 23.7 0.75 13.95 19.95 -7.15 24.25 -23.7 10.45 -23.2 -11.1 Z"/>

  <path fill="#CCCCCC" stroke="none" d="
  M -6.1 -24.1
  L -23.2 -11.1 -23.7 10.45 -7.15 24.25 13.95 19.95 23.7 0.75 14.8 -18.85 -6.1 -24.1 Z"/>
  </g>

  <g id="fokker_0_Layer1_0_FILL">
  <path fill="#FFFFFF" stroke="none" d="
  M -99.5 -42.5
  L -99.5 -14.5
  Q -88 -20.45 -76 -21.6 -77.35 -10.05 -83 2
  L -57 3
  Q -63.2 -9.75 -64.4 -21.6 -52.2 -20.45 -39.5 -14.5
  L -38.5 -40.5
  Q -51.85 -34 -64.2 -32.95 -64.35 -32.95 -64.45 -32.9 -64.35 -33.95 -64.2 -34.95 -62.45 -47 -55 -58
  L -83 -58
  Q -77.2 -46.85 -75.95 -35.25 -75.85 -34.25 -75.75 -33.2 -75.85 -33.25 -75.95 -33.25 -88.25 -34.9 -99.5 -42.5
  M -94.5 -21.5
  L -94.5 -35.5
  Q -85.55 -31.35 -75.7 -30.25 -75.65 -30.25 -75.6 -30.25 -73.7 -30.05 -71.75 -29.95
  L -71.7 -29.95
  Q -71.75 -30.95 -71.75 -31.95 -71.8 -32.4 -71.8 -32.85 -71.9 -33.85 -71.95 -34.85 -72.7 -44.15 -76 -53
  L -62 -53
  Q -66.05 -44.3 -67.15 -34.75 -67.25 -33.75 -67.3 -32.75 -67.35 -32.35 -67.4 -31.9 -67.5 -30.9 -67.55 -29.9 -67.5 -29.9 -67.4 -29.9 -66.05 -29.95 -64.65 -30 -64.6 -30 -64.55 -30 -54 -30.65 -42.5 -34.5
  L -42.5 -20.5
  Q -53.9 -24.6 -64.7 -25.5
  L -64.75 -25.5
  Q -66.15 -25.6 -67.55 -25.65 -67.55 -24.75 -67.5 -23.8 -67.45 -22.8 -67.35 -21.8 -66.65 -11.8 -63 -1
  L -77 -1
  Q -73.15 -11.7 -72.05 -21.85 -72 -22.85 -71.9 -23.85 -71.85 -24.8 -71.8 -25.75 -73.7 -25.7 -75.6 -25.6
  L -75.65 -25.6
  Q -85.35 -24.9 -94.5 -21.5 Z"/>

  <path fill="#000000" stroke="none" d="
  M -94.5 -35.5
  L -94.5 -21.5
  Q -85.35 -24.9 -75.65 -25.6
  L -75.6 -25.6
  Q -73.7 -25.7 -71.8 -25.75 -71.85 -24.8 -71.9 -23.85 -72 -22.85 -72.05 -21.85 -73.15 -11.7 -77 -1
  L -63 -1
  Q -66.65 -11.8 -67.35 -21.8 -67.45 -22.8 -67.5 -23.8 -67.55 -24.75 -67.55 -25.65 -66.15 -25.6 -64.75 -25.5
  L -64.7 -25.5
  Q -53.9 -24.6 -42.5 -20.5
  L -42.5 -34.5
  Q -54 -30.65 -64.55 -30 -64.6 -30 -64.65 -30 -66.05 -29.95 -67.4 -29.9 -67.5 -29.9 -67.55 -29.9 -67.5 -30.9 -67.4 -31.9 -67.35 -32.35 -67.3 -32.75 -67.25 -33.75 -67.15 -34.75 -66.05 -44.3 -62 -53
  L -76 -53
  Q -72.7 -44.15 -71.95 -34.85 -71.9 -33.85 -71.8 -32.85 -71.8 -32.4 -71.75 -31.95 -71.75 -30.95 -71.7 -29.95
  L -71.75 -29.95
  Q -73.7 -30.05 -75.6 -30.25 -75.65 -30.25 -75.7 -30.25 -85.55 -31.35 -94.5 -35.5
  M 78.55 -74.3
  L 78.55 -57.75
  Q 89.4 -61.75 100.85 -62.6
  L 100.9 -62.6
  Q 103.1 -62.7 105.35 -62.75
  L 105.4 -62.75
  Q 105.35 -61.65 105.3 -60.5 105.2 -59.35 105.1 -58.15 103.8 -46.15 99.25 -33.5
  L 115.85 -33.5
  Q 111.5 -46.25 110.7 -58.1 110.55 -59.25 110.5 -60.45 110.45 -61.6 110.45 -62.65 110.5 -62.65 110.55 -62.65 112.15 -62.6 113.75 -62.45
  L 113.8 -62.45
  Q 126.6 -61.4 140.05 -56.55
  L 140.05 -73.1
  Q 126.45 -68.55 114 -67.8 113.95 -67.8 113.85 -67.8 112.2 -67.75 110.6 -67.65 110.5 -67.65 110.45 -67.65 110.5 -68.85 110.6 -70.05 110.7 -70.55 110.75 -71.05 110.8 -72.2 110.9 -73.4 112.2 -84.7 117 -95
  L 100.45 -95
  Q 104.35 -84.5 105.25 -73.5 105.3 -72.35 105.4 -71.15 105.4 -70.65 105.5 -70.1 105.5 -68.9 105.55 -67.75
  L 105.45 -67.75
  Q 103.15 -67.85 100.9 -68.1 100.85 -68.1 100.8 -68.1 89.15 -69.4 78.55 -74.3 Z"/>

  <path fill="#6D5A51" stroke="none" d="
  M -409.5 -46.5
  L -409.5 -28.5 -385.5 -28.5 -385.5 -46.5 -409.5 -46.5 Z"/>

  <path fill="#C20002" stroke="none" d="
  M -265.7 6.95
  Q -273.75 6.45 -281.3 7.65 -295.4 9.9 -308 18
  L -307.2 21.4
  Q -293.95 18 -280.5 17.2 -241.4 14.85 -200.3 34.2 -235.95 8.85 -265.7 6.95
  M -287.5 -77.85
  Q -289.95 -77.75 -292.3 -77.5 -298.4 -76.8 -304.25 -75.1 -314.5 -72.1 -324 -66
  L -323.05 -64.5
  Q -312.25 -65.45 -302.5 -65.85
  L -302.45 -65.85
  Q -296.25 -66.15 -290.45 -66.2 -247.65 -66.65 -228.6 -55.55 -223.6 -54.75 -218.45 -53.85 -217.45 -53.65 -216.5 -53.5 -221.45 -56.8 -226.3 -59.65 -255.2 -76.7 -280.25 -77.85 -283.9 -78.05 -287.5 -77.85
  M -352.5 -152.5
  L -352.1 -149.4 -351.5 -149.5
  Q -335.5 -153.45 -316.1 -153.3 -281.85 -153.1 -237.05 -139.95 -282.7 -166.4 -317.35 -164 -336.65 -162.7 -352.5 -152.5 Z"/>

  <path fill="#718899" stroke="none" d="
  M -200.5 34.95
  L -200.3 34.2
  Q -241.4 14.85 -280.5 17.2 -293.95 18 -307.2 21.4 -307.4 21.45 -307.55 21.5
  L -307 26
  Q -263.3 18 -200.5 34.95
  M -323.05 -64.5
  L -320.5 -60.5
  Q -311.5 -61.45 -301.35 -61.65
  L -281.3 7.65
  Q -273.75 6.45 -265.7 6.95
  L -290.15 -61.6
  Q -263 -61.05 -228.6 -55.55 -247.65 -66.65 -290.45 -66.2 -296.25 -66.15 -302.45 -65.85
  L -302.5 -65.85
  Q -312.25 -65.45 -323.05 -64.5
  M -351.5 -149.5
  L -352.1 -149.4 -351.5 -144.5
  Q -340.4 -146.25 -327.25 -146.7 -325.9 -146.75 -324.5 -146.75
  L -351.5 -75.5 -345.5 -77.5 -323.65 -135.45 -305.5 -79.5 -292.5 -79.5 -304.45 -116.9 -287.5 -86.5 -287.5 -77.85
  Q -283.9 -78.05 -280.25 -77.85
  L -279.5 -87.5 -310.45 -135.7 -314.05 -146.85
  Q -280.15 -146.4 -234.5 -138.5 -235.75 -139.25 -237.05 -139.95 -281.85 -153.1 -316.1 -153.3 -335.5 -153.45 -351.5 -149.5 Z"/>
  </g>

  <g id="fokker_0_Layer0_0_FILL">
  <path fill="#6D5A51" stroke="none" d="
  M -342.5 -90.5
  L -342.5 -77.5 -256.5 -77.5 -256.5 -90.5 -342.5 -90.5 Z"/>
  </g>
  </defs>

  <g transform="matrix( -0.405975341796875, 0, 0, 0.405975341796875, 65,66.65)">
 
  <g transform="matrix( 1, 0, 0, 1, -270.7,-115) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#chicken_head_0_Layer3_0_FILL"/>
  </g>

  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#chicken_head_0_Layer2_0_FILL"/>
  </g>

  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#chicken__eye"/>
  </g>

  <g transform="matrix( 1, 0, 0, 1, 123.1,37) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#scarf_anim_0_Layer1_0_FILL"/>
  </g>
  </g>
  </g>

  <g transform="matrix( 1, 0, 0, 1, -169.8,27.95) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#plane__bomb"/>
  </g>
  </g>

  <g transform="matrix( 0.481842041015625, -0.133514404296875, 2.0028076171875, 7.227630615234375, -351,28) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#box_0_Layer0_0_FILL"/>
  </g>
  </g>

  <g transform="matrix( 0.4464569091796875, 0.2250823974609375, -3.376220703125, 6.6970062255859375, -304.2,42.55) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#box_0_Layer0_0_FILL"/>
  </g>
  </g>

  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#fokker_0_Layer4_0_FILL"/>
  </g>

  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#fokker_0_Layer3_0_FILL"/>
  </g>

  <g transform="matrix( 1, 0, 0, 1, -323.25,83.8) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#wheel_vector_0_Layer0_0_FILL"/>
  </g>
  </g>

  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#fokker_0_Layer1_0_FILL"/>
  </g>

  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#fokker_0_Layer0_0_FILL"/>
  </g>
  </g>
  </svg>
    
    <div id="plane__propeller" class="plane__propeller"></div>

</div><!-- plane -->

<div class="bomb" id="bomb">
  
  <svg xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="76px" height="24px" viewBox="0 0 76 24">
  <defs>
  <g id="bomb__svg">
  <path fill="#8CA9BD" stroke="none" d="
  M 24.25 39.95
  Q 27.3 35.25 27.6 29.85
  L -92.5 29.85
  Q -92.55 30 -92.55 30.15 -92.9 37.65 -81.8 43.6 -76.75 46.35 -69.25 48.8 -66.95 49.5 -64.4 50.25 -53.55 53.35 -44.1 55.2 -35.7 56.85 -28.45 57.55 -22.35 58.15 -17.05 58.1 -15.95 58.05 -14.8 58 -7.9 57.7 -1.7 56.2 6.85 54.15 13.95 49.65 14.3 49.45 14.7 49.15 21 44.95 24.25 39.95 Z"/>

  <path fill="#718899" stroke="none" d="
  M 27.6 29.85
  L 33.65 29.85 43.35 20.2 25.75 20.15
  Q 27.55 24.05 27.6 28.45 27.6 28.65 27.6 28.85 27.6 29.35 27.6 29.85 Z"/>

  <path fill="#778FA1" stroke="none" d="
  M 33.65 29.85
  L 27.6 29.85
  Q 27.3 35.25 24.25 39.95
  L 43.35 39.9 33.45 30.05 33.65 29.85 Z"/>

  <path fill="#7D97A9" stroke="none" d="
  M 14.25 8.2
  Q 14.2 8.15 14.1 8.1 7.05 3.7 -1.5 1.7 -8.25 0.1 -15.9 0 -16.85 0 -17.85 0.05 -23.75 0.1 -30.55 1.05 -37.25 2 -44.8 3.75 -53.95 5.9 -64.25 9.2 -65.25 9.5 -66.25 9.85 -75.1 12.85 -81 16.2 -91.2 21.95 -92.4 28.85 -92.5 29.35 -92.5 29.85
  L 27.6 29.85
  Q 27.6 29.35 27.6 28.85 27.6 28.65 27.6 28.45 27.55 24.05 25.75 20.15 22.6 13.45 14.25 8.2 Z"/>

  <path fill="#7890A2" stroke="none" d="
  M 53.15 10.3
  L 43.35 20.2 33.65 29.85 73.05 29.85 92.55 10.3 53.15 10.3 Z"/>

  <path fill="#849EB2" stroke="none" d="
  M 72.85 30.05
  L 73.05 29.85 33.65 29.85 33.45 30.05 43.35 39.9 53.15 49.8 92.55 49.8 72.85 30.05 Z"/>
  </g>
  </defs>

  <g transform="matrix( -0.4059906005859375, 0, 0, 0.4059906005859375, 37.55,0) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use xlink:href="#bomb__svg"/>
  </g>
  </g>
  </svg>

</div>
  
  <svg class="cloud cloud--sm cloud--1" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="344px" height="147px" viewBox="0 0 344 147">
  <defs>
  <filter id="Filter_1" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
  <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.25 0" result="result1"/>
  </filter>

  <g id="cloud_large_0_Layer0_0_FILL">
  <path fill="#FFFFFF" stroke="none" d="
  M -84 -39.1
  Q -101.4 -39.1 -113.7 -26.8 -126 -14.5 -126 2.9 -126 10.4 -123.7 17 -130.2 13.95 -138 13.95 -152.1 13.95 -162.05 23.9 -172 33.85 -172 47.95 -172 62.05 -162.05 72 -161.3 72.75 -160.5 73.45
  L 155.35 73.45
  Q 157.6 71.7 159.7 69.6 172 57.3 172 39.9 172 22.5 159.7 10.2 147.4 -2.1 130 -2.1 115.7 -2.1 104.9 6.2 105 4.6 105 2.95 105 -11.15 95.05 -21.1 85.1 -31.05 71 -31.05 61.3 -31.05 53.6 -26.35 51.2 -44.05 38 -57.3 21.85 -73.4 -1 -73.4 -23.85 -73.4 -40 -57.3 -52.65 -44.6 -55.35 -27.8 -67.35 -39.1 -84 -39.1 Z"/>
  </g>
  </defs>

  <g transform="matrix( 1, 0, 0, 1, 172,73.4) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use filter="url(#Filter_1)" xlink:href="#cloud_large_0_Layer0_0_FILL"/>
  </g>
  </g>
  </svg>
  
  <svg class="cloud cloud--sm cloud--2" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="344px" height="147px" viewBox="0 0 344 147">
  <defs>
  <filter id="Filter_1" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
  <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.25 0" result="result1"/>
  </filter>

  <g id="cloud_large_0_Layer0_0_FILL">
  <path fill="#FFFFFF" stroke="none" d="
  M -84 -39.1
  Q -101.4 -39.1 -113.7 -26.8 -126 -14.5 -126 2.9 -126 10.4 -123.7 17 -130.2 13.95 -138 13.95 -152.1 13.95 -162.05 23.9 -172 33.85 -172 47.95 -172 62.05 -162.05 72 -161.3 72.75 -160.5 73.45
  L 155.35 73.45
  Q 157.6 71.7 159.7 69.6 172 57.3 172 39.9 172 22.5 159.7 10.2 147.4 -2.1 130 -2.1 115.7 -2.1 104.9 6.2 105 4.6 105 2.95 105 -11.15 95.05 -21.1 85.1 -31.05 71 -31.05 61.3 -31.05 53.6 -26.35 51.2 -44.05 38 -57.3 21.85 -73.4 -1 -73.4 -23.85 -73.4 -40 -57.3 -52.65 -44.6 -55.35 -27.8 -67.35 -39.1 -84 -39.1 Z"/>
  </g>
  </defs>

  <g transform="matrix( 1, 0, 0, 1, 172,73.4) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use filter="url(#Filter_1)" xlink:href="#cloud_large_0_Layer0_0_FILL"/>
  </g>
  </g>
  </svg>
  
  <svg class="cloud cloud--lg cloud--3" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="344px" height="147px" viewBox="0 0 344 147">
  <defs>
  <filter id="Filter_1" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
  <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.25 0" result="result1"/>
  </filter>

  <g id="cloud_large_0_Layer0_0_FILL">
  <path fill="#FFFFFF" stroke="none" d="
  M -84 -39.1
  Q -101.4 -39.1 -113.7 -26.8 -126 -14.5 -126 2.9 -126 10.4 -123.7 17 -130.2 13.95 -138 13.95 -152.1 13.95 -162.05 23.9 -172 33.85 -172 47.95 -172 62.05 -162.05 72 -161.3 72.75 -160.5 73.45
  L 155.35 73.45
  Q 157.6 71.7 159.7 69.6 172 57.3 172 39.9 172 22.5 159.7 10.2 147.4 -2.1 130 -2.1 115.7 -2.1 104.9 6.2 105 4.6 105 2.95 105 -11.15 95.05 -21.1 85.1 -31.05 71 -31.05 61.3 -31.05 53.6 -26.35 51.2 -44.05 38 -57.3 21.85 -73.4 -1 -73.4 -23.85 -73.4 -40 -57.3 -52.65 -44.6 -55.35 -27.8 -67.35 -39.1 -84 -39.1 Z"/>
  </g>
  </defs>

  <g transform="matrix( 1, 0, 0, 1, 172,73.4) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use filter="url(#Filter_1)" xlink:href="#cloud_large_0_Layer0_0_FILL"/>
  </g>
  </g>
  </svg>
  
  <svg class="cloud cloud--med cloud--4" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="344px" height="147px" viewBox="0 0 344 147">
  <defs>
  <filter id="Filter_1" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
  <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.25 0" result="result1"/>
  </filter>

  <g id="cloud_large_0_Layer0_0_FILL">
  <path fill="#FFFFFF" stroke="none" d="
  M -84 -39.1
  Q -101.4 -39.1 -113.7 -26.8 -126 -14.5 -126 2.9 -126 10.4 -123.7 17 -130.2 13.95 -138 13.95 -152.1 13.95 -162.05 23.9 -172 33.85 -172 47.95 -172 62.05 -162.05 72 -161.3 72.75 -160.5 73.45
  L 155.35 73.45
  Q 157.6 71.7 159.7 69.6 172 57.3 172 39.9 172 22.5 159.7 10.2 147.4 -2.1 130 -2.1 115.7 -2.1 104.9 6.2 105 4.6 105 2.95 105 -11.15 95.05 -21.1 85.1 -31.05 71 -31.05 61.3 -31.05 53.6 -26.35 51.2 -44.05 38 -57.3 21.85 -73.4 -1 -73.4 -23.85 -73.4 -40 -57.3 -52.65 -44.6 -55.35 -27.8 -67.35 -39.1 -84 -39.1 Z"/>
  </g>
  </defs>

  <g transform="matrix( 1, 0, 0, 1, 172,73.4) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use filter="url(#Filter_1)" xlink:href="#cloud_large_0_Layer0_0_FILL"/>
  </g>
  </g>
  </svg>
  
  <svg class="cloud cloud--med cloud--5" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="344px" height="147px" viewBox="0 0 344 147">
  <defs>
  <filter id="Filter_1" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
  <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.25 0" result="result1"/>
  </filter>

  <g id="cloud_large_0_Layer0_0_FILL">
  <path fill="#FFFFFF" stroke="none" d="
  M -84 -39.1
  Q -101.4 -39.1 -113.7 -26.8 -126 -14.5 -126 2.9 -126 10.4 -123.7 17 -130.2 13.95 -138 13.95 -152.1 13.95 -162.05 23.9 -172 33.85 -172 47.95 -172 62.05 -162.05 72 -161.3 72.75 -160.5 73.45
  L 155.35 73.45
  Q 157.6 71.7 159.7 69.6 172 57.3 172 39.9 172 22.5 159.7 10.2 147.4 -2.1 130 -2.1 115.7 -2.1 104.9 6.2 105 4.6 105 2.95 105 -11.15 95.05 -21.1 85.1 -31.05 71 -31.05 61.3 -31.05 53.6 -26.35 51.2 -44.05 38 -57.3 21.85 -73.4 -1 -73.4 -23.85 -73.4 -40 -57.3 -52.65 -44.6 -55.35 -27.8 -67.35 -39.1 -84 -39.1 Z"/>
  </g>
  </defs>

  <g transform="matrix( 1, 0, 0, 1, 172,73.4) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use filter="url(#Filter_1)" xlink:href="#cloud_large_0_Layer0_0_FILL"/>
  </g>
  </g>
  </svg>

  <svg class="cloud cloud--6 cloud--lg" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="344px" height="147px" viewBox="0 0 344 147">
  <defs>
  <filter id="Filter_1" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
  <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.25 0" result="result1"/>
  </filter>

  <g id="cloud_large_0_Layer0_0_FILL">
  <path fill="#FFFFFF" stroke="none" d="
  M -84 -39.1
  Q -101.4 -39.1 -113.7 -26.8 -126 -14.5 -126 2.9 -126 10.4 -123.7 17 -130.2 13.95 -138 13.95 -152.1 13.95 -162.05 23.9 -172 33.85 -172 47.95 -172 62.05 -162.05 72 -161.3 72.75 -160.5 73.45
  L 155.35 73.45
  Q 157.6 71.7 159.7 69.6 172 57.3 172 39.9 172 22.5 159.7 10.2 147.4 -2.1 130 -2.1 115.7 -2.1 104.9 6.2 105 4.6 105 2.95 105 -11.15 95.05 -21.1 85.1 -31.05 71 -31.05 61.3 -31.05 53.6 -26.35 51.2 -44.05 38 -57.3 21.85 -73.4 -1 -73.4 -23.85 -73.4 -40 -57.3 -52.65 -44.6 -55.35 -27.8 -67.35 -39.1 -84 -39.1 Z"/>
  </g>
  </defs>

  <g transform="matrix( 1, 0, 0, 1, 172,73.4) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use filter="url(#Filter_1)" xlink:href="#cloud_large_0_Layer0_0_FILL"/>
  </g>
  </g>
  </svg>
  
  <svg class="cloud cloud--7 cloud--lg" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="344px" height="147px" viewBox="0 0 344 147">
  <defs>
  <filter id="Filter_1" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
  <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.25 0" result="result1"/>
  </filter>

  <g id="cloud_large_0_Layer0_0_FILL">
  <path fill="#FFFFFF" stroke="none" d="
  M -84 -39.1
  Q -101.4 -39.1 -113.7 -26.8 -126 -14.5 -126 2.9 -126 10.4 -123.7 17 -130.2 13.95 -138 13.95 -152.1 13.95 -162.05 23.9 -172 33.85 -172 47.95 -172 62.05 -162.05 72 -161.3 72.75 -160.5 73.45
  L 155.35 73.45
  Q 157.6 71.7 159.7 69.6 172 57.3 172 39.9 172 22.5 159.7 10.2 147.4 -2.1 130 -2.1 115.7 -2.1 104.9 6.2 105 4.6 105 2.95 105 -11.15 95.05 -21.1 85.1 -31.05 71 -31.05 61.3 -31.05 53.6 -26.35 51.2 -44.05 38 -57.3 21.85 -73.4 -1 -73.4 -23.85 -73.4 -40 -57.3 -52.65 -44.6 -55.35 -27.8 -67.35 -39.1 -84 -39.1 Z"/>
  </g>
  </defs>

  <g transform="matrix( 1, 0, 0, 1, 172,73.4) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use filter="url(#Filter_1)" xlink:href="#cloud_large_0_Layer0_0_FILL"/>
  </g>
  </g>
  </svg>
  
  <svg class="cloud cloud--8 cloud--sm" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="344px" height="147px" viewBox="0 0 344 147">
  <defs>
  <filter id="Filter_1" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
  <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.25 0" result="result1"/>
  </filter>

  <g id="cloud_large_0_Layer0_0_FILL">
  <path fill="#FFFFFF" stroke="none" d="
  M -84 -39.1
  Q -101.4 -39.1 -113.7 -26.8 -126 -14.5 -126 2.9 -126 10.4 -123.7 17 -130.2 13.95 -138 13.95 -152.1 13.95 -162.05 23.9 -172 33.85 -172 47.95 -172 62.05 -162.05 72 -161.3 72.75 -160.5 73.45
  L 155.35 73.45
  Q 157.6 71.7 159.7 69.6 172 57.3 172 39.9 172 22.5 159.7 10.2 147.4 -2.1 130 -2.1 115.7 -2.1 104.9 6.2 105 4.6 105 2.95 105 -11.15 95.05 -21.1 85.1 -31.05 71 -31.05 61.3 -31.05 53.6 -26.35 51.2 -44.05 38 -57.3 21.85 -73.4 -1 -73.4 -23.85 -73.4 -40 -57.3 -52.65 -44.6 -55.35 -27.8 -67.35 -39.1 -84 -39.1 Z"/>
  </g>
  </defs>

  <g transform="matrix( 1, 0, 0, 1, 172,73.4) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use filter="url(#Filter_1)" xlink:href="#cloud_large_0_Layer0_0_FILL"/>
  </g>
  </g>
  </svg>
  
  <svg class="cloud cloud--9 cloud--med" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="344px" height="147px" viewBox="0 0 344 147">
  <defs>
  <filter id="Filter_1" x="-20%" y="-20%" width="140%" height="140%" color-interpolation-filters="sRGB">
  <feColorMatrix in="SourceGraphic" type="matrix" values="1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 0.25 0" result="result1"/>
  </filter>

  <g id="cloud_large_0_Layer0_0_FILL">
  <path fill="#FFFFFF" stroke="none" d="
  M -84 -39.1
  Q -101.4 -39.1 -113.7 -26.8 -126 -14.5 -126 2.9 -126 10.4 -123.7 17 -130.2 13.95 -138 13.95 -152.1 13.95 -162.05 23.9 -172 33.85 -172 47.95 -172 62.05 -162.05 72 -161.3 72.75 -160.5 73.45
  L 155.35 73.45
  Q 157.6 71.7 159.7 69.6 172 57.3 172 39.9 172 22.5 159.7 10.2 147.4 -2.1 130 -2.1 115.7 -2.1 104.9 6.2 105 4.6 105 2.95 105 -11.15 95.05 -21.1 85.1 -31.05 71 -31.05 61.3 -31.05 53.6 -26.35 51.2 -44.05 38 -57.3 21.85 -73.4 -1 -73.4 -23.85 -73.4 -40 -57.3 -52.65 -44.6 -55.35 -27.8 -67.35 -39.1 -84 -39.1 Z"/>
  </g>
  </defs>

  <g transform="matrix( 1, 0, 0, 1, 172,73.4) ">
  <g transform="matrix( 1, 0, 0, 1, 0,0) ">
  <use filter="url(#Filter_1)" xlink:href="#cloud_large_0_Layer0_0_FILL"/>
  </g>
  </g>
  </svg>

</div>

<div class="bushes">
  
  <svg id="bush1" class="bush" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="1214px" height="344px" viewBox="0 0 1214 344">
    <defs>
      <g id="gree_bg_0_Layer0_0_FILL">
        <path fill="#4196A7" stroke="none" d="
                                              M 82.7 -82.75
                                              Q 48.45 -117 0 -117 -48.45 -117 -82.75 -82.75 -117 -48.45 -117 0 -117 
                                              48.45 -82.75 82.7 -48.45 117 0 117 48.45 117 82.7 82.7 117 48.45 117 
                                              0 117 -48.45 82.7 -82.75 Z"/>
      </g>
    </defs>

    <g transform="matrix( 1, 0, 0, 1, 117,227) ">
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <use xlink:href="#gree_bg_0_Layer0_0_FILL"/>
      </g>
    </g>

    <g transform="matrix( 1, 0, 0, 1, 275,185) ">
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <use xlink:href="#gree_bg_0_Layer0_0_FILL"/>
      </g>
    </g>

    <g transform="matrix( 1, 0, 0, 1, 446,152) ">
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <use xlink:href="#gree_bg_0_Layer0_0_FILL"/>
      </g>
    </g>

    <g transform="matrix( 1, 0, 0, 1, 610,117) ">
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <use xlink:href="#gree_bg_0_Layer0_0_FILL"/>
      </g>
    </g>

    <g transform="matrix( 1, 0, 0, 1, 793,185) ">
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <use xlink:href="#gree_bg_0_Layer0_0_FILL"/>
      </g>
    </g>

    <g transform="matrix( 1, 0, 0, 1, 966,126) ">
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <use xlink:href="#gree_bg_0_Layer0_0_FILL"/>
      </g>
    </g>

    <g transform="matrix( 1, 0, 0, 1, 1097,220) ">
      <g transform="matrix( 1, 0, 0, 1, 0,0) ">
        <use xlink:href="#gree_bg_0_Layer0_0_FILL"/>
      </g>
    </g>
  </svg>
  

  <svg class="bush" id="bush2" xmlns="http://www.w3.org/2000/svg" version="1.1" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" x="0px" y="0px" width="762px" height="318px" viewBox="0 0 762 318">
    <defs>
      <g id="gree_bg_0_Layer0_0_FILL">
        <path fill="#4196A7" stroke="none" d="
                                              M 82.7 -82.75
                                              Q 48.45 -117 0 -117 -48.45 -117 -82.75 -82.75 -117 -48.45 -117 0 -117 48.45 -82.75 82.7 -48.45 117 0 117 48.45 117 82.7 82.7 117 48.45 117 0 117 -48.45 82.7 -82.75 Z"/>
      </g>
    </defs>

    <g transform="matrix( 1, 0, 0, 1, 381,0) ">
      <g transform="matrix( 1, 0, 0, 1, -264,201) ">
        <g transform="matrix( 1, 0, 0, 1, 0,0) ">
          <use xlink:href="#gree_bg_0_Layer0_0_FILL"/>
        </g>
      </g>

      <g transform="matrix( 1, 0, 0, 1, -86.5,170.5) ">
        <g transform="matrix( 1, 0, 0, 1, 0,0) ">
          <use xlink:href="#gree_bg_0_Layer0_0_FILL"/>
        </g>
      </g>

      <g transform="matrix( 1, 0, 0, 1, 112,117) ">
        <g transform="matrix( 1, 0, 0, 1, 0,0) ">
          <use xlink:href="#gree_bg_0_Layer0_0_FILL"/>
        </g>
      </g>

      <g transform="matrix( 1, 0, 0, 1, 264,195) ">
        <g transform="matrix( 1, 0, 0, 1, 0,0) ">
          <use xlink:href="#gree_bg_0_Layer0_0_FILL"/>
        </g>
      </g>
    </g>
  </svg>


</div>


<div id="ground" class="ground"></div>

<div class="explosions">
  

  <div class="explosion explosion--1">
    <svg class="explosion__img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="280" height="36"><defs><g id="exp1"><path fill="#C30" d="M19.25.3L0 13.95 7.25 36.3H30.8l7.25-22.35L19.25.3m1.95 3.85l13 9.4-5 15.3H13.15L8.2 13.55l13-9.4M47.25 36.3H70.8l7.25-22.35L59.25.3 40 13.95l7.25 22.35M61.2 4.15l13 9.4-5 15.3H53.15l-4.95-15.3 13-9.4M87.25 36.3h23.55l7.25-22.35L99.25.3 80 13.95l7.25 22.35m.95-22.75l13-9.4 13 9.4-5 15.3H93.15l-4.95-15.3m69.85.4l-1.95-1.4-4.5 14h-1.65l-.75 2.3h-16.05l-4.95-15.3 13-9.4.25.2 1.65-1.2L139.25.3 120 13.95l7.25 22.35h23.55l7.25-22.35m22.5-12.65l-1.3-1L160 13.95l7.25 22.35h23.55l1.9-5.8h-18.95l-.5-1.65h-.1l-4.95-15.3.05-.05-.9-2.8 13.2-9.4m30.95 33.15l-7.55-23.35-3.95 2.85 7.25 22.35h23.55l.6-1.85h-19.9z"/><path fill="#FC0" d="M34.2 13.55l-13-9.4-13 9.4 4.95 15.3H29.2l5-15.3M22.9 7l7.4 5.4-2.85 8.75H18.3l-2.85-8.75L22.9 7m51.3 6.55l-13-9.4-13 9.4 4.95 15.3H69.2l5-15.3M62.9 7l7.4 5.4-2.85 8.75H58.3l-2.85-8.75L62.9 7m38.3-2.85l-13 9.4 4.95 15.3h16.05l5-15.3-13-9.4m2.2 2.4l8.45 6.1-3.25 10H98.15l-3.25-10 8.5-6.1m38.05-2.2l-.25-.2-13 9.4 4.95 15.3h16.05l.75-2.3h-14l-4.8-14.9 10.3-7.3z"/><path fill="#FFF" d="M30.3 12.4L22.9 7l-7.45 5.4 2.85 8.75h9.15l2.85-8.75m40 0L62.9 7l-7.45 5.4 2.85 8.75h9.15l2.85-8.75M63 10.45l4.3 3.1-1.65 5.1H60.3l-1.65-5.1 4.35-3.1z"/></g></defs><use xlink:href="#exp1"/></svg>
  </div><!-- explosion1 -->

  <div class="explosion explosion--2">
    <svg class="explosion__img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="280" height="36"><defs><g id="exp2"><path fill="#C30" d="M19.25.3L0 13.95 7.25 36.3H30.8l7.25-22.35L19.25.3m1.95 3.85l13 9.4-5 15.3H13.15L8.2 13.55l13-9.4M47.25 36.3H70.8l7.25-22.35L59.25.3 40 13.95l7.25 22.35M61.2 4.15l13 9.4-5 15.3H53.15l-4.95-15.3 13-9.4M87.25 36.3h23.55l7.25-22.35L99.25.3 80 13.95l7.25 22.35m.95-22.75l13-9.4 13 9.4-5 15.3H93.15l-4.95-15.3m69.85.4l-1.95-1.4-4.5 14h-1.65l-.75 2.3h-16.05l-4.95-15.3 13-9.4.25.2 1.65-1.2L139.25.3 120 13.95l7.25 22.35h23.55l7.25-22.35m22.5-12.65l-1.3-1L160 13.95l7.25 22.35h23.55l1.9-5.8h-18.95l-.5-1.65h-.1l-4.95-15.3.05-.05-.9-2.8 13.2-9.4m30.95 33.15l-7.55-23.35-3.95 2.85 7.25 22.35h23.55l.6-1.85h-19.9z"/><path fill="#FC0" d="M34.2 13.55l-13-9.4-13 9.4 4.95 15.3H29.2l5-15.3M22.9 7l7.4 5.4-2.85 8.75H18.3l-2.85-8.75L22.9 7m51.3 6.55l-13-9.4-13 9.4 4.95 15.3H69.2l5-15.3M62.9 7l7.4 5.4-2.85 8.75H58.3l-2.85-8.75L62.9 7m38.3-2.85l-13 9.4 4.95 15.3h16.05l5-15.3-13-9.4m2.2 2.4l8.45 6.1-3.25 10H98.15l-3.25-10 8.5-6.1m38.05-2.2l-.25-.2-13 9.4 4.95 15.3h16.05l.75-2.3h-14l-4.8-14.9 10.3-7.3z"/><path fill="#FFF" d="M30.3 12.4L22.9 7l-7.45 5.4 2.85 8.75h9.15l2.85-8.75m40 0L62.9 7l-7.45 5.4 2.85 8.75h9.15l2.85-8.75M63 10.45l4.3 3.1-1.65 5.1H60.3l-1.65-5.1 4.35-3.1z"/></g></defs><use xlink:href="#exp2"/></svg>
  </div><!-- explosion2 -->

  <div class="explosion explosion--3">
    <svg class="explosion__img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="280" height="36"><defs><g id="exp3"><path fill="#C30" d="M19.25.3L0 13.95 7.25 36.3H30.8l7.25-22.35L19.25.3m1.95 3.85l13 9.4-5 15.3H13.15L8.2 13.55l13-9.4M47.25 36.3H70.8l7.25-22.35L59.25.3 40 13.95l7.25 22.35M61.2 4.15l13 9.4-5 15.3H53.15l-4.95-15.3 13-9.4M87.25 36.3h23.55l7.25-22.35L99.25.3 80 13.95l7.25 22.35m.95-22.75l13-9.4 13 9.4-5 15.3H93.15l-4.95-15.3m69.85.4l-1.95-1.4-4.5 14h-1.65l-.75 2.3h-16.05l-4.95-15.3 13-9.4.25.2 1.65-1.2L139.25.3 120 13.95l7.25 22.35h23.55l7.25-22.35m22.5-12.65l-1.3-1L160 13.95l7.25 22.35h23.55l1.9-5.8h-18.95l-.5-1.65h-.1l-4.95-15.3.05-.05-.9-2.8 13.2-9.4m30.95 33.15l-7.55-23.35-3.95 2.85 7.25 22.35h23.55l.6-1.85h-19.9z"/><path fill="#FC0" d="M34.2 13.55l-13-9.4-13 9.4 4.95 15.3H29.2l5-15.3M22.9 7l7.4 5.4-2.85 8.75H18.3l-2.85-8.75L22.9 7m51.3 6.55l-13-9.4-13 9.4 4.95 15.3H69.2l5-15.3M62.9 7l7.4 5.4-2.85 8.75H58.3l-2.85-8.75L62.9 7m38.3-2.85l-13 9.4 4.95 15.3h16.05l5-15.3-13-9.4m2.2 2.4l8.45 6.1-3.25 10H98.15l-3.25-10 8.5-6.1m38.05-2.2l-.25-.2-13 9.4 4.95 15.3h16.05l.75-2.3h-14l-4.8-14.9 10.3-7.3z"/><path fill="#FFF" d="M30.3 12.4L22.9 7l-7.45 5.4 2.85 8.75h9.15l2.85-8.75m40 0L62.9 7l-7.45 5.4 2.85 8.75h9.15l2.85-8.75M63 10.45l4.3 3.1-1.65 5.1H60.3l-1.65-5.1 4.35-3.1z"/></g></defs><use xlink:href="#exp3"/></svg>
  </div><!-- explosion3 -->

  <div class="explosion explosion--4">
    <svg class="explosion__img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="280" height="36"><defs><g id="exp4"><path fill="#C30" d="M19.25.3L0 13.95 7.25 36.3H30.8l7.25-22.35L19.25.3m1.95 3.85l13 9.4-5 15.3H13.15L8.2 13.55l13-9.4M47.25 36.3H70.8l7.25-22.35L59.25.3 40 13.95l7.25 22.35M61.2 4.15l13 9.4-5 15.3H53.15l-4.95-15.3 13-9.4M87.25 36.3h23.55l7.25-22.35L99.25.3 80 13.95l7.25 22.35m.95-22.75l13-9.4 13 9.4-5 15.3H93.15l-4.95-15.3m69.85.4l-1.95-1.4-4.5 14h-1.65l-.75 2.3h-16.05l-4.95-15.3 13-9.4.25.2 1.65-1.2L139.25.3 120 13.95l7.25 22.35h23.55l7.25-22.35m22.5-12.65l-1.3-1L160 13.95l7.25 22.35h23.55l1.9-5.8h-18.95l-.5-1.65h-.1l-4.95-15.3.05-.05-.9-2.8 13.2-9.4m30.95 33.15l-7.55-23.35-3.95 2.85 7.25 22.35h23.55l.6-1.85h-19.9z"/><path fill="#FC0" d="M34.2 13.55l-13-9.4-13 9.4 4.95 15.3H29.2l5-15.3M22.9 7l7.4 5.4-2.85 8.75H18.3l-2.85-8.75L22.9 7m51.3 6.55l-13-9.4-13 9.4 4.95 15.3H69.2l5-15.3M62.9 7l7.4 5.4-2.85 8.75H58.3l-2.85-8.75L62.9 7m38.3-2.85l-13 9.4 4.95 15.3h16.05l5-15.3-13-9.4m2.2 2.4l8.45 6.1-3.25 10H98.15l-3.25-10 8.5-6.1m38.05-2.2l-.25-.2-13 9.4 4.95 15.3h16.05l.75-2.3h-14l-4.8-14.9 10.3-7.3z"/><path fill="#FFF" d="M30.3 12.4L22.9 7l-7.45 5.4 2.85 8.75h9.15l2.85-8.75m40 0L62.9 7l-7.45 5.4 2.85 8.75h9.15l2.85-8.75M63 10.45l4.3 3.1-1.65 5.1H60.3l-1.65-5.1 4.35-3.1z"/></g></defs><use xlink:href="#exp4"/></svg>
  </div><!-- explosion4 -->

  <div class="explosion explosion--5">
    <svg class="explosion__img" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" preserveAspectRatio="none" width="280" height="36"><defs><g id="exp5"><path fill="#C30" d="M19.25.3L0 13.95 7.25 36.3H30.8l7.25-22.35L19.25.3m1.95 3.85l13 9.4-5 15.3H13.15L8.2 13.55l13-9.4M47.25 36.3H70.8l7.25-22.35L59.25.3 40 13.95l7.25 22.35M61.2 4.15l13 9.4-5 15.3H53.15l-4.95-15.3 13-9.4M87.25 36.3h23.55l7.25-22.35L99.25.3 80 13.95l7.25 22.35m.95-22.75l13-9.4 13 9.4-5 15.3H93.15l-4.95-15.3m69.85.4l-1.95-1.4-4.5 14h-1.65l-.75 2.3h-16.05l-4.95-15.3 13-9.4.25.2 1.65-1.2L139.25.3 120 13.95l7.25 22.35h23.55l7.25-22.35m22.5-12.65l-1.3-1L160 13.95l7.25 22.35h23.55l1.9-5.8h-18.95l-.5-1.65h-.1l-4.95-15.3.05-.05-.9-2.8 13.2-9.4m30.95 33.15l-7.55-23.35-3.95 2.85 7.25 22.35h23.55l.6-1.85h-19.9z"/><path fill="#FC0" d="M34.2 13.55l-13-9.4-13 9.4 4.95 15.3H29.2l5-15.3M22.9 7l7.4 5.4-2.85 8.75H18.3l-2.85-8.75L22.9 7m51.3 6.55l-13-9.4-13 9.4 4.95 15.3H69.2l5-15.3M62.9 7l7.4 5.4-2.85 8.75H58.3l-2.85-8.75L62.9 7m38.3-2.85l-13 9.4 4.95 15.3h16.05l5-15.3-13-9.4m2.2 2.4l8.45 6.1-3.25 10H98.15l-3.25-10 8.5-6.1m38.05-2.2l-.25-.2-13 9.4 4.95 15.3h16.05l.75-2.3h-14l-4.8-14.9 10.3-7.3z"/><path fill="#FFF" d="M30.3 12.4L22.9 7l-7.45 5.4 2.85 8.75h9.15l2.85-8.75m40 0L62.9 7l-7.45 5.4 2.85 8.75h9.15l2.85-8.75M63 10.45l4.3 3.1-1.65 5.1H60.3l-1.65-5.1 4.35-3.1z"/></g></defs><use xlink:href="#exp5"/></svg>
  </div><!-- explosion5 -->
</div><!-- explosions -->

<div class="ui">
  <button class="btn" id="bombBtn">
    <span>Bomb!</span>
  </button>
</div>
            
          
!
            
              $ground-height: 20px;

@mixin keyframes($animation-name) {
    @-webkit-keyframes #{$animation-name} {
        @content;
    }
    @-moz-keyframes #{$animation-name} {
        @content;
    }
    @-ms-keyframes #{$animation-name} {
        @content;
    }
    @keyframes #{$animation-name} {
        @content;
    }
}

@mixin animation($str) {
    -webkit-animation: #{$str};
    -moz-animation: #{$str};
    -ms-animation: #{$str};
    animation: #{$str};
}

@include keyframes(animate-cloud-horizontal) {
    0% {
        // left: calc(-50vw + 50%);
        // transform: translateX(-100%);
      transform: translateX(0px);
    }
    100% {
        // left: calc(50vw + 50%);
        // transform: translateY(0);
      transform: translateX(calc(-100vw - 100%));
    }
}

.animate-left-slow {
    @include animation('animate-cloud-horizontal 30s linear infinite');
}

.animate-left-fast {
    @include animation('animate-cloud-horizontal 10s linear infinite');
}

.animate-left-medium {
    @include animation('animate-cloud-horizontal 20s linear infinite');
}

$plane-width: 200px;
$plane-height: 100px;

.plane {
  position: absolute;
  top: 10%;
  left: 40%;
  width: 200px;
  height: 100px;
  z-index: 100;
  
  &__propeller {
    width: 5px;
    height: 70px;
    background: #6D5A51;
    position: absolute;
    left: 224px;
    top: 17px;
  }
}

.bomb {
  position: absolute;
  z-index: 1;
  bottom: 0;
  width: 76px;
  height: 24px;
  z-index: 100;
  top: calc(10% + 90px);
  bottom: auto;
  left: calc(40% + 135px);
  transform: translate(-50%, -50%);
}

.bush {
  position: absolute;
  height: auto;
}

#bush1 {
  width: 600px;
  left: 100vw;//0;
  bottom: -60px;
  @include animation('animate-cloud-horizontal 6s linear infinite');
}

#bush2 {
  width: 400px;
  left: 100vw;//80%;
  bottom: -60px;
  @include animation('animate-cloud-horizontal 6s linear infinite');
  animation-delay: -3s !important;
}

.bushes {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: 100%;
  overflow: hidden;
}

.ground {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  height: $ground-height;
  background: #0A6F4E;
}

.sky {
  overflow: hidden; // to hide scrollbar
  background: linear-gradient(#2997D4, #70C5F0);
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: $ground-height;
}

.cloud {
  position: absolute;
  width: 180px;
  height: auto;
  
  &--med {
    width: 180px;
    @extend .animate-left-medium;
  }
  
  //--cloud types
  &--lg {
    width: 260px;
    @extend .animate-left-fast;
  }
  
  &--sm {
    width: 90px;
    @extend .animate-left-slow;
  }
  
  //--exact clouds
  &--1 {
    top: 55%;
    left: 100vw;//22%;
    animation-delay: -8s !important;
  }
  
  &--2 {
    top: 70%;
    left: 100vw;//80%;
    animation-delay: -2s !important;
  }
  
  &--3 {
    top: 25%;
    left: 100vw;//45%;
    animation-delay: -38s !important;
  }
  
  &--4 {
    top: 70%;
    left: 100vw;//50%;
    animation-delay: -9s !important;
  }
  &--5 {
    top: 10%;
    left: 100vw;//7%;
    animation-delay: -15s !important;
  }
  &--6 {
    top: 42%;
    left: 100vw;//85%;
    animation-delay: -2s !important;
  }
  &--7 {
    top: 60%;
    left: 100vw;//-10%;
    animation-delay: -25s !important;
  }
  &--8 {
    top: 5%;
    left: 100vw;//83%;
    animation-delay: -1s !important;
  }
  &--9 {
    top: 10%;
    left: 100vw;//70%;
    animation-delay: -2s !important;
  }
}

.scarf-mask {
  position: absolute;
  top: 28px;
  left: 95px;
  width: 65px;
  height: 16px;
  overflow: hidden;
}

@keyframes explode {
  from { transform: translateX(0); }
  to   { transform: translateX(-280px); }
}

.explosions {
  position: absolute;
  bottom: 20px;
  left: calc(40% + 100px);
}

.explosion {
  width: 40px;
  overflow: hidden;
  position: absolute;
  
  &__img {
    //--step through animation spritesheet
    animation: explode 0.5s steps(7);
    animation-fill-mode: forwards; //stays on last frame
  }
  
  &--1 {
    bottom: -10px;
    left: 0;
    
  }
  
  &--2 {
    bottom: -20px;
    left: 25px;
    
  }
  
  &--3 {
    bottom: 25px;
    left: 30px;
    
    
  }
  
  &--4 {
    bottom: 20px;
    left: -20px;
    
  }
  
  &--5 {
    bottom: -20px;
    left: -30px;
  }
}

.ui {
  position: absolute;
  bottom: 30px;
  right: 30px;
}

.btn {
  $bg: yellow;
  padding: 20px 30px;
  border: 3px solid $bg;
  background: yellow;
  border-radius: 5px;
  color: #333;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  font-family: 'Russo One', sans-serif;
  transition: background 200ms, opacity 200ms;
  outline: none;
  
  &:hover,
  &:active {
    background: darken($bg, 6%);
  }
  
  @media (min-device-width: 480px) {
    padding: 40px 50px;
    font-size: 28px;
  }
  
  &.disabled {
    opacity: 0.5;
    
    &:hover,
    &:active {
      background: $bg;
    }
  }
}


            
          
!
            
              //--get everything we're going to animate
var planeBomb = $("#plane__bomb"),
    bomb = $("#bomb"),
    scarf = $("#scarf"),
    propeller = $("#plane__propeller"),
    explosion1 = $(".explosion--1"),
    explosion2 = $(".explosion--2"),
    explosion3 = $(".explosion--3"),
    explosion4 = $(".explosion--4"),
    explosion5 = $(".explosion--5"),
    explosions = $(".explosions");

var blinkDelay = "+=0.07";

var bombBtn = $("#bombBtn");

/* timeline for dropping bomb */
dropBombTL = new TimelineMax({repeat:-1});
dropBombTL
  .set(explosion1, { display: 'none' })
  .set(explosion2, { display: 'none' })
  .set(explosion3, { display: 'none' })
  .set(explosion4, { display: 'none' })
  .set(explosion5, { display: 'none' })
  .set(bomb, { display: 'none' })
  .to(planeBomb,0, {opacity:0}, blinkDelay)
.to(planeBomb,0, {opacity:1}, blinkDelay)
.to(planeBomb,0, {opacity:0}, blinkDelay)
.to(planeBomb,0, {opacity:1}, blinkDelay)
.to(planeBomb,0, {opacity:0}, blinkDelay)
.to(planeBomb,0, {opacity:1}, blinkDelay)
.to(planeBomb,0, {opacity:0}, blinkDelay)
.to(planeBomb,0, {opacity:1}, blinkDelay)
.to(planeBomb,0, {opacity:0}, blinkDelay)
  .set(bomb, { display: 'block' })
// .set({}, {}, "+=2")
.add(pauseTL)
  .to(bomb, 1.5, { ease: Power1.easeIn, left: "-=20", top: $(document).height(), rotation:30 })
  .set(bomb, {display: 'none'})
  .addLabel("explode")
  .set(explosion1, {display: 'block'},"explode")
  .to(explosions, 1, {x:"-=250", ease:Linear.easeNone})
  .set(explosion2, {display: 'block'}, "explode+=0.05")
  .set(explosion3, {display: 'block'}, "explode+=0.1")
  .set(explosion4, {display: 'block'}, "explode+=0.15")
  .set(explosion5, {display: 'block'}, "explode+=0.2")
  .set({}, {}, "+=1") //--pause to allow the css animations to play out
.add(bombTLEnd);

/* animate scarf spritesheet */
scarfTL = new TimelineMax({repeat:-1});
scarfTL
  .to(scarf, 0, { y:-16 },"+=0.1")
  .to(scarf, 0, { y:-32 },"+=0.1")
  .to(scarf, 0, { y:0 },"+=0.1");

/* animate propeller */
propellerTl = new TimelineMax({repeat:-1, yoyo:true});
propellerTl.to(propeller, 0.3, { scaleY: 0.6 });

/* click button to start animation */
bombBtn.click(function() {
  
  if(dropBombTL.paused()){
     dropBombTL.paused(false);
    bombBtn.addClass("disabled");
  }
  
});

function pauseTL(){
  dropBombTL.pause();  
}  

function bombTLEnd(){
 bombBtn.removeClass("disabled");
}  

  
            
          
!
999px
Loading ..................

Console