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 CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

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.

            
              <svg class="mainSVG" viewBox="0 0 800 600" xmlns="http://www.w3.org/2000/svg" preserveAspectRatio="xMidYMax meet">
<defs>
  
<linearGradient id="groundGrad" gradientUnits="userSpaceOnUse" x1="0" y1="427" x2="800" y2="427">
	<stop  offset="0" style="stop-color:#DBA682"/>
	<stop  offset="1" style="stop-color:#C77569"/>
</linearGradient>
  
<path id="particleMaskTemplate"  d="M800,0v328.5c-0.3-0.6-0.6-1.1-1-1.1c-1.3,0-1.3,0.8-2.7,0.8c-1.3,0-1.3,1.3-2.7,1.3
	c-1.3,0-1.3-0.9-2.7-0.9s-1.3-0.5-2.7-0.5c-1.3,0-1.3,0.9-2.7,0.9c-1.3,0-1.3,0.9-2.7,0.9s-1.3-1.8-2.7-1.8c-1.3,0-1.3-1.3-2.7-1.3
	c-1.3,0-1.3,4.5-2.7,4.5s-1.3-1.7-2.7-1.7c-1.3,0-1.3-2.8-2.7-2.8c-1.3,0-1.3,1.7-2.7,1.7s-1.3,3-2.7,3c-1.3,0-1.3-2.7-2.7-2.7
	c-1.3,0-1.3,0.1-2.7,0.1s-1.3-0.9-2.7-0.9c-1.3,0-1.3,2.9-2.7,2.9c-1.3,0-1.3-2.9-2.7-2.9s-1.3,0.1-2.7,0.1c-1.3,0-1.3,1.2-2.7,1.2
	c-1.3,0-1.3-2.5-2.7-2.5s-1.3,3.7-2.7,3.7c-1.3,0-1.3,0.5-2.7,0.5c-1.3,0-1.3-2.8-2.7-2.8c-1.3,0-1.3,0.9-2.7,0.9
	c-1.3,0-1.3-0.5-2.7-0.5c-1.3,0-1.3,0.5-2.7,0.5c-1.3,0-1.3-1.7-2.7-1.7c-1.3,0-1.3,4-2.7,4c-1.3,0-1.3-4.7-2.7-4.7
	c-1.3,0-1.3,2.3-2.7,2.3c-1.3,0-1.3,1.3-2.7,1.3c-1.3,0-1.3,0.5-2.7,0.5c-1.3,0-1.3-1.4-2.7-1.4c-1.3,0-1.3,0.3-2.7,0.3
	c-1.3,0-1.3-0.3-2.7-0.3s-1.3-0.5-2.7-0.5c-1.3,0-1.3-1.6-2.7-1.6c-1.3,0-1.3,1.5-2.7,1.5s-1.3,0-2.7,0c-1.3,0-1.3,1.3-2.7,1.3
	c-1.3,0-1.3,0.2-2.7,0.2s-1.3-3-2.7-3c-1.3,0-1.3,3.6-2.7,3.6c-1.3,0-1.3-2.1-2.7-2.1s-1.3,0.7-2.7,0.7c-1.3,0-1.3,2.1-2.7,2.1
	c-1.3,0-1.3-2.7-2.7-2.7c-1.3,0-1.3,2.5-2.7,2.5s-1.3-3-2.7-3c-1.3,0-1.3,3-2.7,3c-1.3,0-1.3-1.2-2.7-1.2s-1.3,0.4-2.7,0.4
	c-1.3,0-1.3-1-2.7-1s-1.3-0.6-2.7-0.6c-1.3,0-1.3-0.8-2.7-0.8c-1.3,0-1.3,3.3-2.7,3.3s-1.3,0.2-2.7,0.2c-1.3,0-1.3-2.1-2.7-2.1
	s-1.3-0.1-2.7-0.1c-1.3,0-1.3-0.5-2.7-0.5c-1.3,0-1.3-0.3-2.7-0.3s-1.3,0.5-2.7,0.5c-1.3,0-1.3-1.2-2.7-1.2c-1.3,0-1.3,0.1-2.7,0.1
	s-1.3,2.9-2.7,2.9c-1.3,0-1.3-2.9-2.7-2.9s-1.3,1.1-2.7,1.1c-1.3,0-1.3,0.3-2.7,0.3c-1.3,0-1.3,0.9-2.7,0.9s-1.3-2.8-2.7-2.8
	c-1.3,0-1.3,2.8-2.7,2.8c-1.3,0-1.3,1-2.7,1s-1.3-2.6-2.7-2.6c-1.3,0-1.3-0.9-2.7-0.9c-1.3,0-1.3,1.9-2.7,1.9s-1.3-1.3-2.7-1.3
	c-1.3,0-1.3-1.6-2.7-1.6c-1.3,0-1.3,2-2.7,2c-1.3,0-1.3,1.8-2.7,1.8c-1.3,0-1.3-1-2.7-1c-1.3,0-1.3-1.6-2.7-1.6
	c-1.3,0-1.3-0.4-2.7-0.4s-1.3,0.6-2.7,0.6c-1.3,0-1.3,3.2-2.7,3.2c-1.3,0-1.3-2.2-2.7-2.2c-1.3,0-1.3,0.5-2.7,0.5
	c-1.3,0-1.3,1.9-2.7,1.9c-1.3,0-1.3-3.6-2.7-3.6s-1.3,0.1-2.7,0.1c-1.3,0-1.3,3.3-2.7,3.3s-1.3-0.2-2.7-0.2c-1.3,0-1.3-1.9-2.7-1.9
	c-1.3,0-1.3,0.1-2.7,0.1c-1.3,0-1.3-2.5-2.7-2.5c-1.3,0-1.3,4.4-2.7,4.4c-1.3,0-1.3-2.6-2.7-2.6s-1.3-0.2-2.7-0.2
	c-1.3,0-1.3,3.1-2.7,3.1s-1.3,0.2-2.7,0.2c-1.3,0-1.3-0.2-2.7-0.2c-1.3,0-1.3-0.6-2.7-0.6s-1.3-0.4-2.7-0.4c-1.3,0-1.3-1.7-2.7-1.7
	c-1.3,0-1.3,2.7-2.7,2.7c-1.3,0-1.3-0.4-2.7-0.4c-1.3,0-1.3-2.7-2.7-2.7c-1.3,0-1.3,1.1-2.7,1.1s-1.3,0.6-2.7,0.6
	c-1.3,0-1.3-2-2.7-2c-1.3,0-1.3,1.4-2.7,1.4s-1.3-0.8-2.7-0.8c-1.3,0-1.3,2.7-2.7,2.7c-1.3,0-1.3,0.2-2.7,0.2
	c-1.3,0-1.3-1.7-2.7-1.7c-1.3,0-1.3-1-2.7-1c-1.3,0-1.3-0.3-2.7-0.3c-1.3,0-1.3-0.9-2.7-0.9c-1.3,0-1.3,2.6-2.7,2.6
	c-1.3,0-1.3-2.9-2.7-2.9c-1.3,0-1.3,1.4-2.7,1.4c-1.3,0-1.3,2.5-2.7,2.5c-1.3,0-1.3,0-2.7,0c-1.3,0-1.3-1.5-2.7-1.5
	s-1.3,1.9-2.7,1.9c-1.3,0-1.3-2.6-2.7-2.6c-1.3,0-1.3-0.5-2.7-0.5s-1.3,0.6-2.7,0.6c-1.3,0-1.3-0.2-2.7-0.2c-1.3,0-1.3,1.7-2.7,1.7
	s-1.3-3.5-2.7-3.5c-1.3,0-1.3,0.3-2.7,0.3s-1.3,4-2.7,4c-1.3,0-1.3-3.6-2.7-3.6c-1.3,0-1.3,2.4-2.7,2.4s-1.3-0.8-2.7-0.8
	c-1.3,0-1.3-0.1-2.7-0.1c-1.3,0-1.3-1.5-2.7-1.5c-1.3,0-1.3-0.6-2.7-0.6c-1.3,0-1.3,2.4-2.7,2.4c-1.3,0-1.3-1.9-2.7-1.9
	s-1.3,3.7-2.7,3.7c-1.3,0-1.3-3.7-2.7-3.7c-1.3,0-1.3,2.8-2.7,2.8c-1.3,0-1.3-2-2.7-2c-1.3,0-1.3-1.7-2.7-1.7
	c-1.3,0-1.3,1.9-2.7,1.9c-1.3,0-1.3-1.7-2.7-1.7c-1.3,0-1.3,3.1-2.7,3.1c-1.3,0-1.3-0.9-2.7-0.9c-1.3,0-1.3-0.8-2.7-0.8
	c-1.3,0-1.3-1.2-2.7-1.2c-1.3,0-1.3,4-2.7,4c-1.3,0-1.3-2.4-2.7-2.4c-1.3,0-1.3,0.5-2.7,0.5c-1.3,0-1.3-1.8-2.7-1.8
	c-1.3,0-1.3,3-2.7,3c-1.3,0-1.3-0.5-2.7-0.5c-1.3,0-1.3-2.6-2.7-2.6c-1.3,0-1.3,1.8-2.7,1.8c-1.3,0-1.3-1-2.7-1c-1.3,0-1.3,3-2.7,3
	c-1.3,0-1.3-0.4-2.7-0.4c-1.3,0-1.3-3.4-2.7-3.4c-1.3,0-1.3,3.5-2.7,3.5s-1.3-3.5-2.7-3.5c-1.3,0-1.3,3.4-2.7,3.4
	c-1.3,0-1.3,0.6-2.7,0.6c-1.3,0-1.3-4.7-2.7-4.7c-1.3,0-1.3,2.7-2.7,2.7c-1.3,0-1.3-2.3-2.7-2.3c-1.3,0-1.3,4-2.7,4
	c-1.3,0-1.3,0.4-2.7,0.4c-1.3,0-1.3-3-2.7-3c-1.3,0-1.3,2.1-2.7,2.1c-1.3,0-1.3-2-2.7-2c-1.3,0-1.3-1.1-2.7-1.1
	c-1.3,0-1.3,0.5-2.7,0.5c-1.3,0-1.3,2.5-2.7,2.5c-1.3,0-1.3-0.3-2.7-0.3c-1.3,0-1.3,0.9-2.7,0.9c-1.3,0-1.3-4.1-2.7-4.1
	c-1.3,0-1.3,2.9-2.7,2.9c-1.3,0-1.3-2.3-2.7-2.3c-1.3,0-1.3,4.1-2.7,4.1c-1.3,0-1.3-2.8-2.7-2.8c-1.3,0-1.3,2-2.7,2
	c-1.3,0-1.3-2-2.7-2c-1.3,0-1.3,2.3-2.7,2.3c-1.3,0-1.3-4-2.7-4c-1.3,0-1.3,1-2.7,1c-1.3,0-1.3-0.9-2.7-0.9c-1.3,0-1.3,1.1-2.7,1.1
	c-1.3,0-1.3-0.3-2.7-0.3c-1.3,0-1.3-0.7-2.7-0.7c-1.3,0-1.3,1.2-2.7,1.2c-1.3,0-1.3,2.8-2.7,2.8c-1.3,0-1.3-4-2.7-4
	c-1.3,0-1.3,0.2-2.7,0.2c-1.3,0-1.3,4-2.7,4c-1.3,0-1.3-3.8-2.7-3.8c-1.3,0-1.3,2.5-2.7,2.5c-1.3,0-1.3-1.1-2.7-1.1
	c-1.3,0-1.3,1-2.7,1c-1.3,0-1.3,0.7-2.7,0.7c-1.3,0-1.3-4.1-2.7-4.1c-1.3,0-1.3,3.4-2.7,3.4c-1.3,0-1.3-3-2.7-3
	c-1.3,0-1.3,3.6-2.7,3.6c-1.3,0-1.3-3.6-2.7-3.6c-1.3,0-1.3,1.6-2.7,1.6c-1.3,0-1.3,1.1-2.7,1.1c-1.3,0-1.3,0.3-2.7,0.3
	c-1.3,0-1.3-0.8-2.7-0.8c-1.3,0-1.3,0.6-2.7,0.6c-1.3,0-1.3,1.6-2.7,1.6c-1.3,0-1.3-4-2.7-4c-1.3,0-1.3,0.3-2.7,0.3
	c-1.3,0-1.3,0.8-2.7,0.8c-1.3,0-1.3-1.1-2.7-1.1c-1.3,0-1.3,0.5-2.7,0.5c-1.3,0-1.3,3.5-2.7,3.5c-1.3,0-1.3-0.2-2.7-0.2
	c-1.3,0-1.3-4.4-2.7-4.4c-1.3,0-1.3,1.6-2.7,1.6c-1.3,0-1.3,0.1-2.7,0.1c-1.3,0-1.3,1.8-2.7,1.8c-1.3,0-1.3-1.8-2.7-1.8
	c-1.3,0-1.3,1.2-2.7,1.2c-1.3,0-1.3-1.6-2.7-1.6c-1.3,0-1.3-0.6-2.7-0.6c-1.3,0-1.3,3.1-2.7,3.1c-1.3,0-1.3-1-2.7-1
	c-1.3,0-1.3,0.2-2.7,0.2c-1.3,0-1.3-0.9-2.7-0.9c-1.3,0-1.3,0.3-2.7,0.3s-1.3,1.7-2.7,1.7c-1.3,0-1.3,0.4-2.7,0.4
	c-1.3,0-1.3-0.6-2.7-0.6s-1.3-1.4-2.7-1.4c-1.3,0-1.3-0.2-2.7-0.2c-1.3,0-1.3,2.4-2.7,2.4c-1.3,0-1.3,0.2-2.7,0.2
	c-1.3,0-1.3-2.5-2.7-2.5c-1.3,0-1.3,2.3-2.7,2.3c-1.3,0-1.3-4.3-2.7-4.3c-1.3,0-1.3,4-2.7,4c-1.3,0-1.3-0.3-2.7-0.3
	c-1.3,0-1.3-1.3-2.7-1.3c-1.3,0-1.3-2.5-2.7-2.5c-1.3,0-1.3,2.5-2.7,2.5c-1.3,0-1.3-1.2-2.7-1.2c-1.3,0-1.3,2.4-2.7,2.4
	c-1.3,0-1.3,0.5-2.7,0.5c-1.3,0-1.3-2.5-2.7-2.5c-1.3,0-1.3,1.4-2.7,1.4c-1.3,0-1.3,0.3-2.7,0.3c-1.3,0-1.3-1-2.7-1
	c-1.3,0-1.3-2.3-2.7-2.3c-1.3,0-1.3,3.2-2.7,3.2c-1.3,0-1.3-2.9-2.7-2.9c-1.3,0-1.3,3.8-2.7,3.8c-1.3,0-1.3-2.8-2.7-2.8
	c-1.3,0-1.3,3.2-2.7,3.2c-1.3,0-1.3-0.3-2.7-0.3c-1.3,0-1.3,0-2.7,0c-1.3,0-1.3-1.3-2.7-1.3c-1.3,0-1.3,0.7-2.7,0.7
	c-1.3,0-1.3,0.6-2.7,0.6c-1.3,0-1.3-2.5-2.7-2.5c-1.3,0-1.3-1.5-2.7-1.5c-1.3,0-1.3,4-2.7,4c-1.3,0-1.3-0.4-2.7-0.4
	c-1.3,0-1.3-2.9-2.7-2.9c-1.3,0-1.3,3.4-2.7,3.4c-1.3,0-1.3-4.4-2.7-4.4c-1.3,0-1.3,2.8-2.7,2.8s-1.3-0.8-2.7-0.8
	c-1.3,0-1.3-1.2-2.7-1.2c-1.3,0-1.3,3.7-2.7,3.7c-1.3,0-1.3,0.1-2.7,0.1c-1.3,0-1.3-3.6-2.7-3.6c-1.3,0-1.3,2.3-2.7,2.3
	c-1.3,0-1.3-2.6-2.7-2.6c-1.3,0-1.3,2.4-2.7,2.4c-1.3,0-1.3-2.7-2.7-2.7c-1.3,0-1.3,2.5-2.7,2.5c-1.3,0-1.3-1.7-2.7-1.7
	c-1.3,0-1.3,1.4-2.7,1.4c-1.3,0-1.3-1.8-2.7-1.8c-1.3,0-1.3,2-2.7,2c-1.3,0-1.3-1-2.7-1c-1.3,0-1.3-1.6-2.7-1.6
	c-1.3,0-1.3,4.2-2.7,4.2c-1.3,0-1.3-1-2.7-1c-1.3,0-1.3-3.2-2.7-3.2c-1.3,0-1.3,3.7-2.7,3.7c-1.3,0-1.3-2.1-2.7-2.1
	c-1.3,0-1.3,2.4-2.7,2.4c-0.5,0-0.8-0.3-1.1-0.7V0H800z"/>  
<clipPath id="particleMask">
 
    <use class="particleMask" xlink:href="#particleMaskTemplate"/>
    <use class="particleMask" xlink:href="#particleMaskTemplate" x="800"/>
    <use class="particleMask" xlink:href="#particleMaskTemplate" x="1600"/>
  
  </clipPath>
  <circle id="particle" cx="470" cy="320" r="10" fill="#D89A79"/> 
  <mask id="groundGradMask">
  <g class="ground" >
  <g transform='rotate(180 400 302)' fill="#FFF">
    <use xlink:href="#particleMaskTemplate" x="-1600"/>
    <use xlink:href="#particleMaskTemplate"  x="-800"/>
    <use  xlink:href="#particleMaskTemplate"/>
    <use xlink:href="#particleMaskTemplate"  x="800"/>
    <use xlink:href="#particleMaskTemplate"  x="1600"/>
  </g>
  </g>
  </mask>
  
<linearGradient id="cactusGrad" gradientUnits="userSpaceOnUse" x1="34.55" y1="127.9" x2="34.55" y2="1.818989e-012">
<stop  offset="0" stop-opacity="0.2" style="stop-color:#D3997F"/>
	<stop  offset="0.6" style="stop-color:#985551"/>
</linearGradient>

<path id="cactus" d="M47.3,12.8c0-7-5.7-12.8-12.8-12.8S21.8,5.7,21.8,12.8l0,0V64c-3.3,0-6-2.7-6-6l0,0
	V34.6c0-4.4-3.5-7.9-7.9-7.9S0,30.2,0,34.6l0,0v23.3c0,12,9.8,21.8,21.8,21.8l0,0c0,0,0,74.6,0,88.2s25.5,12.4,25.5,0s0-95.9,0-95.9
	c12,0,21.8-9.8,21.8-21.8l0,0V34.6c0-4.4-3.5-7.9-7.9-7.9s-7.9,3.5-7.9,7.9l0,0v15.6c0,3.3-2.7,6-6,6l0,0L47.3,12.8z"/>
  
  </defs>
  

  
<radialGradient id="topBgGrad" cx="82.6425" cy="126.2641" r="504.5609" gradientUnits="userSpaceOnUse">
	<stop  offset="0" style="stop-color:#DBA682"/>
	<stop  offset="1" style="stop-color:#C77569"/>
</radialGradient>
<rect id="topBg" fill="url(#topBgGrad)" x="-400%" width="800%" height="280"/>  

  <g id="cliff" opacity="0.4">
	<polygon fill="#DBA682" points="804.3,76.8 546.3,86.1 571.4,126.8 566.6,151.3 487,166 554.2,166 516.3,171.8 557.8,196.9 
		552.8,289 813.6,319.7 	"/>
	<path fill="#C3736B" d="M612.1,131.8l41.4,27.9l-2.9,94.3c0,0,17.9,34.3,15.7,34.3c-2.1,0-81.5,9.2-73.6-3.6
		C600.6,271.8,612.1,131.8,612.1,131.8z"/>
	<polygon fill="#C3736B" points="782.1,90.4 680,114.7 694.1,193.2 685,282.4 775.7,307 724.3,157.5 717.1,131.8 823.6,101.1 
		746.4,110.4 	"/>
</g>  

  <use id="cactusBack" xlink:href="#cactus" fill="url(#cactusGrad)"/>

 <use id="cactusMid1" xlink:href="#cactus" fill="url(#cactusGrad)"/>
 <use id="cactusMid2" xlink:href="#cactus" fill="url(#cactusGrad)"/>

 <use id="cactusFront" xlink:href="#cactus" fill="url(#cactusGrad)"/> 
<linearGradient id="hazeGrad" gradientUnits="userSpaceOnUse" x1="400" y1="-1.795888e-008" x2="400" y2="288.9023">
	<stop  offset="0.3299" style="stop-color:#DBA682;stop-opacity:0"/>
	<stop  offset="0.8883" style="stop-color:#CF8E75"/>
</linearGradient>
<rect id="haze" x="0" fill="url(#hazeGrad)" width="800" height="288.9"/>  
  
<g id="movingGround" mask="url(#groundGradMask)">
<rect id="gradientGround" x="-800" y="0" fill="url(#groundGrad)" width="2400" height="600"/>  
  </g>

<path id="skyScribble" opacity="0.42" fill="#DFB68A" d="M298.3,69.5l-0.3,0V70h0.2L169,65l-64.8-2.5l-6.7-0.3l14.1-0.4l72.2-1.8l72.2-2l36.1-1
	L328,56l-36.1,0.4l-36.1,0.5l-72.2,1l-72.2,1.1l-72.2,1.2c-1.3,0-2.3,0.9-2.4,1.8c-0.1,0.9,1,2,2.3,2h0l64.7,2.4l64.7,2.5l59.5,2.3
	l-27.5,0.6l-48.8,1.6L102.9,75h0c-1.5,0-2.7,0.4-2.8,1.4c-0.1,1.1,1.1,1.9,2.7,2l72.6,3.7l51.9,2.6l-10.8,0.4
	c-12.1,0.5-24.2,0.7-36.3,1.3L143.9,88h0c-0.6,0-1.1,0.8-1.1,1.2c0,0.5,0.5,1.1,1.2,1.1l42.9,1.4c13.6,0.4,27.2,0.9,40.8,1.2
	l-21.2,3.9l23.1-3.8c0.1,0,0.2,0,0.3,0l0,0l0.1,0c0.1,0,0.2,0.2,0.2,0.1c0-0.1-0.1,0-0.3,0h0c-14.3-1-28.6-1.5-42.9-2.1l-21.5-1.1
	l14.9-0.7c12.1-0.5,24.2-1,36.3-1.4l18.2-0.6l9.1-0.3l9.1-0.2c3,0,6.1-0.1,9-0.1c0.9,0,1.9,0,2.8,0l1.3,0.1c0.7,0,1.3,0.1,2,0.1
	c0,0,0.3,0,0.3,0l0.5,0c0,0,0,0,0,0c0,0-0.2,0-0.1,0l-0.1,0c0.1,0,0,0,0.2,0c0.9,0.6,0.2-5.6,0.2-3l-0.2,0l-0.4,0l-0.2,0
	c-0.2,0-0.1,0-0.2,0l-0.1,0l-0.3,0l-1.1,0c-0.1,0-0.1,0-0.2,0l-0.1,0l-18.1-1l-94.2-5.5l46.5-1l97.6-2.2c1.6,0,3-0.9,3.1-2.1
	C301.4,70.6,300,69.6,298.3,69.5z M268.7,83L268.7,83C268.7,83,268.7,83,268.7,83z M268.5,83.6l-0.1,0
	C268.4,83.6,268.5,83.6,268.5,83.6z"/>


  
  <g clip-path="url(#particleMask)"> 
  <g id="pContainer"/>
  </g>
<ellipse id="shadow" fill="#563F5E" cx="432.9" cy="331.2" rx="193.9" ry="4.8" opacity="0.6"/>  
<g id="vanGroup">

<g id="bullBars">
	<path fill="#62506A" d="M231.3,287.3L231.3,287.3c-1.1,0-2-0.9-2-2v-21.9c0-1.1,0.9-2,2-2l0,0c1.1,0,2,0.9,2,2v21.9
		C233.3,286.4,232.4,287.3,231.3,287.3z"/>
	<path fill="#62506A" d="M230.4,282.4L230.4,282.4c0-1.1,0.9-2,2-2l9.9,0c1.1,0,2,0.9,2,2v0c0,1.1-0.9,2-2,2l-9.9,0
		C231.3,284.4,230.4,283.5,230.4,282.4z"/>
	<path fill="#62506A" d="M230.4,268.4L230.4,268.4c0-1.1,0.9-2,2-2l9.9,0c1.1,0,2,0.9,2,2v0c0,1.1-0.9,2-2,2l-9.9,0
		C231.3,270.4,230.4,269.5,230.4,268.4z"/>  
  </g>  
	<path fill="#563F5E" d="M237.2,303.6c0,0,0.1,3.4,2.9,3.4c0.9,0,62.1,0,93,0c6.2,0,12.7,0,19.4,0c6,0,12.1,0,18.4,0
		c13.2,0,26.8,0,39.9,0c6.9,0,13.6,0,20,0c36.6,0,65.2,0,65.2,0s5.8-0.6,5.8-4.2c0-3.6,0-31.8,0-31.8H238L237.2,303.6z"/>
	<path fill="#5F506A" d="M230.3,291.8v12.9c0,0.7,0.6,1.2,1.2,1.2h7.2c0,0,0,0,0.1,0c2.8-12.6,13.6-22.7,27-22.7
		c13.1,0,23.1,9.6,26.1,21.7c0.1,0.6,0.6,1,1.2,1h135.3c0.6,0,1-0.5,1.2-1.1c4-11.1,12.9-21.3,26.4-21.3c13,0,21.5,7.8,26.2,19.8
		l0.4,0.1l24-0.4c0.2,0,0.3,0,0.5-0.1l3.7-1.5c0.5-0.2,0.8-0.6,0.8-1.1v-5.3V293c0-0.6-0.4-1.1-1-1.2l-5-1c-0.6-0.1-1-0.6-1-1.2
		v-35.1c0-0.1,0-0.1,0-0.2c-0.4-2-6.2-35.2-19-40.2c-12.7-5-201.3-0.3-211.2,0c-0.3,0-0.6,0.2-0.9,0.4l-37,39.9
		c-0.2,0.2-0.3,0.5-0.3,0.8v34.1c0,0.7-0.6,1.2-1.2,1.2h-3.4C230.9,290.5,230.3,291.1,230.3,291.8z M310.7,223v22.1
		c0,2.4-2,4.4-4.4,4.4H290c-2.4,0-4.4-2-4.4-4.4V223c0-0.7,0.6-1.2,1.2-1.2h22.7C310.2,221.8,310.7,222.3,310.7,223z M254.3,242.7
		l20.3-20.6c0.2-0.2,0.6-0.4,0.9-0.4h0.1c1.7,0,3,1.4,3,3v19.6c0,2.9-2.3,5.2-5.2,5.2h-15.7c-2.4,0-4.3-1.9-4.3-4.3V245
		C253.4,244.1,253.7,243.3,254.3,242.7z"/>

	<g>
		<path fill="#6F5E7E" d="M493.5,221.3c-0.4-0.7-0.9-1.3-1.3-1.8c-0.2-0.2-0.3-0.4-0.5-0.6c-1.8-2.3-3.9-4-6.1-4.9
			c-12.6-4.9-199-0.4-210.9,0c-0.5,0-1,0.2-1.3,0.6l-33.9,36.4c-1.1,1.2-0.3,3.1,1.4,3.1h261.5c1.2,0,2.1-1.1,1.8-2.2
			C503,246,499.6,230.7,493.5,221.3z"/>
	</g>

	<path fill="#5F4C69" d="M285.9,208.2l193.4,1.9l-1.4,2.2l-192,1.6c0,0-2.1-0.2-4.7,0c-2.6,0.2-7.3,3.5-10.5,0.9s-4.2-4.4-4.2-4.4
		s10.6-3.7,19.1-3"/>
	<path fill="#C85D65" d="M446,208.3h11c0,0,2.2-7.7,7.9-8.3s15.3,0,15.3,0s2.5-1.3,3.1,1.8c0.6,3.1,1.4,7.5,1.4,7.5h-0.6
		c0,0,4.7,4.3,1.9,5.2c-2.8,0.8-40,0-40,0V208.3z"/>
	<path fill="#DD777F" d="M445.9,212.5L354.2,261H237v6h119c0,0,123.7-50.2,129.6-53.1C483.5,211.7,445.9,212.5,445.9,212.5z"/>
		<polygon id="stripe" fill="#AE565D" points="367.4,254 388,254 356,267 236.2,267 236.2,261 354.2,261 	"/>


  <g opacity="0.6">
	<path fill="#E37979" d="M279,243.6c0,3.5-2.9,6.4-6.4,6.4h-14.1c-3,0-5.5-2.5-5.5-5.5l0,0c0-0.5,0.4-0.9,0.8-1.3l20.7-20.7
		c0.3-0.3,0.8-0.5,1.3-0.5h1.1c1,0,2.2,0.5,2.2,1.5V243.6z"/>
	<path fill="#E37979" d="M311,244.5c0,3-2.5,5.5-5.5,5.5h-16.7c-1.7,0-2.8-1.9-2.8-3.7v-22.5c0-1,0.8-1.9,1.9-1.9h21.3
		c1,0,1.9,0.8,1.9,1.9V244.5z"/>
	<path fill="#EC988C" d="M311,223.9v9.1h-25v-9.1c0-1,0.8-1.9,1.9-1.9h21.3C310.2,222,311,222.8,311,223.9z"/>
	<path fill="#EC988C" d="M279,223.5v9.5h-14.8l-10.4,10.3c-0.3,0.3-0.6,0.5-0.7,0.8c0.1-0.4,0.4-0.6,0.7-0.9l20.7-20.7
		c0.3-0.3,0.8-0.5,1.3-0.5h1.1C277.8,222,279,222.5,279,223.5z"/>
  </g>
	<path fill="none" stroke="#6C5D77" stroke-width="4" stroke-miterlimit="10" d="M238.6,292.6c5.1-9.4,15.1-15.8,26.6-15.8
		c11.4,0,21.4,6.4,26.5,15.7"/>
	<path fill="none" stroke="#6C5D77" stroke-width="4" stroke-miterlimit="10" d="M429.6,292.6c5.1-9.4,15.1-15.8,26.6-15.8
		c11.4,0,21.4,6.4,26.5,15.7"/>
	<ellipse fill="#6C5D77" cx="409" cy="270.7" rx="76.6" ry="1.3"/>
	<ellipse fill="#6C5D77" cx="368.7" cy="292.5" rx="61.5" ry="1.2"/>
</g>

  <g class="wheels">
	<circle fill="#644E64" stroke="#786483" stroke-width="7" stroke-miterlimit="10" cx="265.4" cy="311.2" r="17"/>
  
	<circle fill="#644E64" stroke="#786483" stroke-width="7" stroke-miterlimit="10" cx="457.2" cy="311.2" r="17"/>
<circle class="wheelRim" fill="#AE565D" stroke="#786483" stroke-width="7" stroke-miterlimit="10" cx="265.4" cy="311.2" r="5" stroke-dasharray="3"/>  
<circle class="wheelRim" fill="#AE565D" stroke="#786483" stroke-width="7" stroke-miterlimit="10" cx="457.2" cy="311.2" r="5" stroke-dasharray="3"/>  
  
  </g>
</svg>
            
          
!
            
              body {
  background-color: #5F506A;
  overflow: hidden;
  text-align: center;
}

body,
html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

svg {
  max-width:800px;
  max-height: 600px;
  visibility: hidden;
  overflow: hidden;
}

/* svg{
  width:100%;
  height:100%;
} */
            
          
!
            
              var xmlns = "http://www.w3.org/2000/svg",
  xlinkns = "http://www.w3.org/1999/xlink",
  select = function(s) {
    return document.querySelector(s);
  },
  selectAll = function(s) {
    return document.querySelectorAll(s);
  },
  wheels = select('.wheels'),
  particleMask = selectAll('.particleMask'),
  mainSVG = select('.mainSVG'),
  dot = select('#dot'),
  vanGroup = select('#vanGroup'),
  pContainer = select('#pContainer'),
  particlePool = [],
  numParticles = 300,
  particleCount = 0

TweenMax.set('svg', {
  visibility: 'visible'
})

TweenMax.set('#cactusBack', {
  x: -50,
  y: 70,
  scale: 0.2,
  alpha: 0.4,
  transformOrigin: '50% 100%'
})
TweenMax.set('#cactusFront', {
  y: 130,
  scale: 0.8,
  transformOrigin: '50% 100%'
})
TweenMax.staggerTo(['#cactusMid1', '#cactusMid2'], 0, {
  scale: 0.5,
  alpha: 0.6,
  transformOrigin: '50% 100%',

  cycle: {
    x: [-40, -400],
    y: [100, 100]
  }
}, 0)

var vanBounceTl = new TimelineMax({
  onUpdate: playParticle,
  repeat: -1,
  yoyo: true
});
vanBounceTl.to(vanGroup, 0.091, {
  y: 1.3,
  //x:3,
  ease: Sine.easeIn

}).to(vanGroup, 0.1, {
  y: -0.3,
  ease: Sine.easeOut,

})

var vanMoveTl = new TimelineMax({
  repeat: -1,
  yoyo: true
});
vanMoveTl.to(vanGroup, 0.34, {
    transformOrigin: '10% 100%',
    rotation: -0.3,
    ease: Sine.easeInOut
  })
  .to([vanGroup], 0.54, {
    rotation: 0.3,
    repeat: 1,
    yoyo: true,
    ease: Sine.easeInOut
  })

var vwheelMoveTl = new TimelineMax({});
vwheelMoveTl.to([wheels], 0.08, {
  y: -2.05,
  transformOrigin: '50% 100%',
  ease: Linear.easeNone,
  repeat: -1,
  yoyo: true
})

var particleMaskTl = new TimelineMax();
particleMaskTl.from(particleMask, 1.5, {
  x: '-=800',
  ease: Linear.easeNone,
  repeat: -1,
  yoyo: false

})
var groundTl = new TimelineMax();
groundTl.to('.ground', 3, {
  x: 800,
  ease: Linear.easeNone,
  repeat: -1,
  yoyo: false

})

var cactusBackTl = new TimelineMax({
  repeat: -1,
  repeatDelay: 0
});
cactusBackTl.to('#cactusBack', 10, {
  x: 850,
  ease: Linear.easeNone
})
var cactusFrontTl = new TimelineMax({
  repeat: -1,
  repeatDelay: 3
});
cactusFrontTl.fromTo('#cactusFront', 2, {
  x: -150

}, {
  x: 850,
  ease: Linear.easeNone
})

var cactusMidTl = new TimelineMax({
  repeat: -1,
  repeatDelay: 2
});
cactusMidTl.staggerTo(['#cactusMid1', '#cactusMid2'], 6, {
  x: '+=1250',
  ease: Linear.easeNone
})

var wheelRimTl = new TimelineMax({
  repeat: -1
})
wheelRimTl.to('.wheelRim', 0.02, {
  transformOrigin: '50% 50%',
  rotation: -72,
  ease: Linear.easeNone
})

function createParticles() {

  var i = numParticles,
    p;
  while (--i > -1) {

    p = document.createElementNS(xmlns, 'use');
    p.setAttributeNS(xlinkns, "xlink:href", '#particle');
    pContainer.appendChild(p);

    p.setAttribute('class', "particle");
    //p.setAttribute('opacity', 0);
    particlePool.push(p);
    TweenMax.set(p, {
      autoAlpha: 0
    })

  }

}

function playParticle() {
  var p = particlePool[particleCount];

  TweenMax.set(p, {
    x: vanGroup._gsTransform.x - 87,
    y: vanGroup._gsTransform.y + 16,
    autoAlpha: 1, 
    scale: randomBetween(6, 10) / 10,
    transformOrigin: '50% 50%'
  });
  var tl = new TimelineMax();
  tl.to(p, randomBetween(2, 5), {
    physics2D: {
      velocity: randomBetween(555, 650),
      angle: randomBetween(-10, 0),
      gravity: randomBetween(0, 10)
    },
    scale: randomBetween(33, 97) / 10,
    onComplete: completeParticle,
    onCompleteParams: [p]

  });

  particleCount++;

  particleCount = (particleCount >= numParticles) ? 0 : particleCount
}

function completeParticle(p) {
  TweenMax.set(p, {
    autoAlpha: 0
  })
}

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

createParticles();

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

Console