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.

+ add another resource

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

Add External Scripts/Pens

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

+ add another resource

Use npm Packages

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

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

Code Indentation

     

Save Automatically?

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

Auto-Updating Preview

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

            
              <div class="page">
<svg version="1.1" viewBox="0 0 285.33 560">
  
  <rect class="sky" x="0.67" width="284.67" height="560" />
  <polygon class="ground-left" points="0 458 285.33 458 0.67 560 0 458" />
  <polygon class="ground-right" points="285.33 458 285.33 560 0.67 560 285.33 458"/>
  <polygon class="brown" points="67.85 23.83 121.81 177.48 125.17 108.01 67.85 23.83" />
  <polygon class="derbrown" points="97.17 19.83 139.17 152.67 139.5 84.33 97.17 19.83" />
  <polygon class="dred" points="97.16 19.82 82.33 24.41 125.16 108.36 97.16 19.82"/>
  <polygon class="morange" points="82.31 24.26 78.89 40.59 125.14 108.34 82.31 24.26" />
  <polygon class="dorange" points="67.88 23.83 53.71 20.08 84.96 72.83 67.88 23.83" />
  <polygon class="orange" points="53.71 20.11 91.67 144.67 65.5 117 53.71 20.11" />
  <polygon class="dmorange" points="53.7 20.07 84.95 72.82 84.66 121.68 53.7 20.07"/>
  <polygon class="dorange"  points="84.94 72.73 84.67 121.67 121.83 177.5 84.94 72.73"/>
  <polygon class="rbrown" points="84.67 121.67 105.42 189.88 121.83 177.5 84.67 121.67" />
  <polygon class="rbrown"  points="125.15 108.34 123.27 146.47 139.15 152.51 125.15 108.34"/>
  <polygon class="brown"  points="169.17 443 191.04 524.88 213.1 422.25 169.17 443" />
  <polygon class="dorange"  points="196.67 400.5 169.17 443 212.98 422.25 196.67 400.5" />
  <polygon class="dmorange"  points="196.67 400.5 224.17 371.25 213.1 422.31 196.67 400.5" />
  <polygon class="orange"  points="224.17 371.25 191.17 524.25 235.92 413.75 224.17 371.25"/>
  <polygon class="derbrown"  points="169.17 443 150.67 511 186.29 507.25 169.17 443" />
  <polygon class="dbrown" points="112.17 442.25 129.79 545.06 170.17 381.5 112.17 442.25" />
  <polygon class="dbrown"  points="94.42 445 84.67 545.5 43.17 376 94.19 444.69 94.42 445"/>
  <polygon class="lightest" points="199.33 342.5 196.67 400.5 224.17 371.25 199.33 342.5" />
  <polygon class="orange"  points="199.33 342.5 169.17 443 196.67 400.5 199.33 342.5" />
  <polygon class="dmorange"  points="171.83 291.83 169.17 443 199.33 342.5 171.83 291.83"/>
  <polygon class="rbrown"  points="170.23 381.63 150.79 510.88 169.4 442.29 170.23 381.63" />
  <polygon class="bbrown" points="170.17 381.63 138.58 509.13 150.75 510.92 170.17 381.63" />
  <polygon class="borange" points="84.67 545.5 34.67 429.67 35.83 388.83 84.67 545.5" />
  <polygon class="morange"  points="84.67 545.5 35.83 388.83 43.17 376 84.67 545.5"/>
  <polygon class="rbrown"  points="94.42 445 122.5 502 89 500.83 94.42 445" />
  <polygon class="derbrown"  points="112.17 442.25 122.5 502 94.42 445 112.17 442.25" />
  <polygon class="borange"  points="43.17 376 41.67 289.5 35.83 388.83 43.17 376" />
  <polygon class="dred"  points="41.67 289.5 94.42 445 43.17 376 41.67 289.5"/>
  <polygon class="dred"  points="112.17 442.25 171.85 291.88 170.23 381.38 112.17 442.25" />
  <polygon class="morange"  points="41.67 289.5 75.92 246.25 94.42 445 41.67 289.5" />
  <polygon class="morange"  points="165.17 254 112.17 442.25 171.83 291.83 165.17 254" />
  <polygon class="borange"  points="165.17 254 82.17 316.25 112.17 442.25 165.17 254" />
  <polygon class="orange"  points="94.42 445 112.17 442.25 82.17 316.25 94.42 445"/>
  <polygon class="orange"  points="75.92 246.25 102.17 235.5 82.17 316.25 75.92 246.25" />
  <polygon class="lightest"  points="165.17 254 102.17 235.5 82.17 316.25 165.17 254" />
  <polygon class="dorange"  points="105.42 189.88 75.92 246.25 102.17 235.5 105.42 189.88"/>
  <polygon class="derbrown"  points="123.27 146.47 139.15 152.51 119.54 214.63 123.27 146.47" />
  <polygon class="dbrown"  points="139.15 152.51 173.54 160.38 119.54 214.63 139.15 152.51" />
  <polygon class="lightest"  points="166.78 167.19 223.65 204.56 173.4 160.31 166.78 167.19" />
  <polygon class="orange"  points="166.79 167.16 158.4 175.55 172.79 177.28 166.79 167.16"/>
  <polygon class="dmorange"  points="166.79 167.16 181.42 192.03 223.67 204.53 166.79 167.16"/>
  <polygon class="dmorange"  points="181.54 192.13 181.29 225.63 207.04 211.75 181.54 192.13" />
  <polygon class="orange" points="181.44 192.03 207.06 211.75 223.69 204.54 181.44 192.03" />
  <polygon class="spink" points="150.42 183.6 157.25 203.5 139.08 194.83 150.42 183.6"/>
  <polygon class="orange"  points="153.58 192.85 165.58 196.83 172.17 199 157.25 203.5 153.58 192.85" />
  <polygon class="borange"  points="181.54 192.15 172.17 199.02 164.19 196.38 181.54 192.15" />
  <polygon class="borange"  points="181.54 192.13 165.17 254 181.29 225.63 181.54 192.13" />
  <polygon class="borange"  points="121.5 177.83 102.17 235.5 105.42 189.88 121.5 177.83" />
  <polygon class="morange"  points="102.17 235.5 119.54 214.63 121.5 177.83 102.17 235.5" />
  <polygon class="dred"  points="119.54 214.63 165.17 254 102.17 235.5 119.54 214.63" />
  <polygon class="dred"  points="172.17 199 165.17 254 181.54 192.13 172.17 199"/>
  <polygon class="dbrown"  points="172.17 199 157.25 203.5 165.17 254 172.17 199"/>
  <polygon class="morange"  points="139.08 194.83 157.25 203.5 165.17 254 139.08 194.83"/>
  <polygon class="borange"  points="139.08 194.83 119.54 214.63 154.54 230 139.08 194.83"/>
  <polygon class="derbrown"  points="154.54 230 148.38 239.54 165.17 254 154.54 230" />
  <polygon class="dbrown"  points="119.54 214.63 154.54 230 148.38 239.54 119.54 214.63" />
  <polygon class="orange"  points="207.04 211.75 225.6 236.38 203.6 228.06 207.04 211.75" />
  <polygon class="borange"  points="207.04 211.75 181.29 225.63 203.6 228.06 207.04 211.75" />
  <polygon class="borange"  points="203.6 228.06 205.85 248.31 225.6 236.38 203.6 228.06" />
  <polygon class="morange"  points="203.6 228.06 181.29 225.63 205.85 248.31 203.6 228.06" />
  <polygon class="dbrown"  points="205.85 248.31 165.17 254 181.29 225.63 205.85 248.31" />
  <polygon class="dbrown"  points="225.6 236.38 225.29 247.44 212.54 244.31 225.6 236.38" />
  <polygon class="borange"  points="225.6 236.38 235.6 225.94 225.29 247.44 225.6 236.38"/>
  <polygon class="black" points="235.6 225.94 213.73 220.63 225.6 236.38 235.6 225.94"/>
  <polygon class="lightest"  points="223.65 204.56 235.54 217.31 207.04 211.75 223.65 204.56"/>
  <polygon class="orange"  points="207.04 211.75 235.6 225.94 235.54 217.31 207.04 211.75"/>
  <polygon class="dmorange"  points="207.04 211.75 213.73 220.63 235.6 225.94 207.04 211.75" />
  <polygon class="derbrown"  points="158.4 175.55 171.54 180.08 172.79 177.28 158.4 175.55"/>
  <polygon class="black"  points="171.54 180.08 181.42 192.03 172.79 177.28 171.54 180.08"/>
  <polygon class="grey" points="174.5 183.66 172.04 191.89 181.54 192.13 174.5 183.66" />
  <polygon class="black"  points="172.08 191.88 164.17 196.35 181.5 192.13 172.08 191.88"/>
  <polygon class="grey"  points="172.08 191.88 153.58 192.85 164.17 196.35 172.08 191.88"/>
  <polygon class="black"  points="155.67 192.73 150.42 183.6 153.58 192.85 155.67 192.73"/>
  <polygon class="grey"  points="150.42 183.6 163.58 177.38 158.4 175.55 150.42 183.6" />
  <polygon class="lgrey" points="153.58 182.08 152.42 187.13 150.42 183.6 153.58 182.08" />
  <polygon class="ebrown" points="153.58 182.08 155.63 192.63 152.42 187.13 153.58 182.08" />
  <polygon class="sebrown" points="154.79 188.42 160.67 192.5 155.65 192.75 154.79 188.42" />
  <polygon class="black"  points="170.42 180.88 165.13 185.75 171.23 186.41 170.42 180.88"/>
  <polygon class="grey"  points="165.13 185.75 167.38 191.21 171.21 186.36 165.13 185.75" />
  <polygon class="black"  points="165.13 185.75 161.33 190.33 167.38 191.21 165.13 185.75"/>
  <polygon class="grey"  points="165.13 185.75 159.54 185.21 161.33 190.33 165.13 185.75" />
  <polygon class="black"  points="165.13 185.75 164.21 180.08 159.54 185.21 165.13 185.75"/>
  <polygon class="white" points="164.21 180.08 170.42 180.88 165.13 185.75 164.21 180.08" />
  <polygon class="selight" points="163.58 177.38 164.21 180.08 171.54 180.08 163.58 177.38"/>
  <polygon class="secol" points="164.21 180.08 153.58 182.08 163.58 177.38 164.21 180.08" />
  <polygon class="edcol" points="164.21 180.08 154.79 188.42 153.58 182.08 164.21 180.08" />
  <polygon class="edcol" points="159.54 185.21 154.79 188.42 164.21 180.08 159.54 185.21" />
  <polygon class="edcol"  points="159.54 185.21 160.67 192.5 154.79 188.42 159.54 185.21" />
  <polygon class="ecol"  points="159.54 185.21 161.33 190.33 160.67 192.5 159.54 185.21" />
  <polygon class="ebrown"  points="161.33 190.33 172.04 191.88 160.67 192.5 161.33 190.33" />
  <polygon class="ecol"  points="171.21 186.34 172.04 191.88 167.38 191.21 171.21 186.34" />
  <polygon class="sepink" points="164.21 180.08 171.54 180.08 170.42 180.88 164.21 180.08" />
  <polygon class="ebrown"  points="171.54 180.08 170.42 180.88 172.04 191.88 171.54 180.08" />
  <polygon class="edcol"  points="171.54 180.08 174.5 183.66 172.04 191.88 171.54 180.08"/>

</svg>
</div>
            
          
!
            
              /*--------MIXINS--------------*/
@mixin vendor-prefixes($animation-name, $duration, $timing, $delay, $count, $fill) {
    -webkit-animation:$animation-name  $duration  $timing  $delay  $count  $fill;
   -moz-animation:$animation-name  $duration  $timing  $delay  $count  $fill;
   -o-animation:$animation-name  $duration  $timing  $delay  $count  $fill;
   animation:$animation-name  $duration  $timing  $delay  $count  $fill;    
}


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

/*--------MIXINS END--------------*/
body{
	margin:0;
	padding:0;
	background:#695f67;
}

.page{
	width:50%;
	margin:auto;
	background:#5c7174;
	text-align:center;
}

svg{
	width: 80%;
	height:auto;
	max-height:1000px;
}

.lightest{
	fill:#FED3AA;
	opacity:0;
	
	@include vendor-prefixes(anim-lighest, 5s, ease, 3s, 1, forwards);

	@include keyframes(anim-lighest) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}
	
.orange{
	fill:#F29254;
	opacity:0;
	
	@include vendor-prefixes(anim-orange, 6s, ease, 4s, 1, forwards);

	@include keyframes(anim-orange) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.borange{
	fill:#F58337;
	opacity:0;
	
	@include vendor-prefixes(anim-borange, 5s, ease, 2s, 1, forwards);

	@include keyframes(anim-borange) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.morange{
	fill:#F15A22;
	opacity:0;
	
	@include vendor-prefixes(anim-morange, 5s, ease, 2.5s, 1, forwards);

	@include keyframes(anim-morange) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.dmorange{
	fill:#F26122;
	opacity:0;
	
	@include vendor-prefixes(anim-dmorange, 3s, ease, 1s, 1, forwards);

	@include keyframes(anim-dmorange) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
	
}

.dorange{
	fill:#D34F1D;
	opacity:0;
	
	@include vendor-prefixes(anim-dorange, 4s, ease, 1s, 1, forwards);

	@include keyframes(anim-dorange) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.brown{
	fill:#AB4412;
	opacity:0;
	
	@include vendor-prefixes(anim-brown, 3s, ease, 1s, 1, forwards);

	@include keyframes(anim-brown) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.dbrown{
	fill:#A54122;
	opacity:0;
	
	@include vendor-prefixes(anim-dbrown, 2s, ease, 1s, 1, forwards);

	@include keyframes(anim-dbrown) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.derbrown{
	fill:#6E2405;
	opacity:0;
	
	@include vendor-prefixes(anim-derbrown, 4s, ease, 0.5s, 1, forwards);

	@include keyframes(anim-derbrown) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.rbrown{
	fill:#600B00;
	opacity:0;
	
	@include vendor-prefixes(anim-rbrown, 3s, ease, 0.5s, 1, forwards);

	@include keyframes(anim-rbrown) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.bbrown{
	fill:#60312D;
	opacity:0;
	
	@include vendor-prefixes(anim-bbrown, 2s, ease, 1.5s, 1, forwards);

	@include keyframes(anim-bbrown) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.dred{
	fill:#9F2214;
	opacity:0;
	
	@include vendor-prefixes(anim-dred, 2s, ease, 2s, 1, forwards);

	@include keyframes(anim-dred) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.spink{
	fill:#CA6A4F;
	opacity:0;
	
	@include vendor-prefixes(anim-spink, 5.5s, ease, 2.3s, 1, forwards);

	@include keyframes(anim-spink) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.sepink{
	fill:#DDBEAA;
	opacity:0;
	
	@include vendor-prefixes(anim-sepink, 3.3s, ease, 1s, 1, forwards);

	@include keyframes(anim-sepink) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.selight{
	fill:#C9B599;
	opacity:0;
	
	@include vendor-prefixes(anim-selight, 1s, ease, 1.4s, 1, forwards);

	@include keyframes(anim-selight) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.secol{
	fill:#C1A585;
	opacity:0;
	
	@include vendor-prefixes(anim-secol, 2s, ease, 5s, 1, forwards);

	@include keyframes(anim-secol) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.sebrown{
	fill:#996B53;
	opacity:0;
	
	@include vendor-prefixes(anim-sebrown, 4s, ease, 4s, 1, forwards);

	@include keyframes(anim-sebrown) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.edcol{
	fill:#A48460;
	opacity:0;
	
	@include vendor-prefixes(anim-edcol, 2s, ease, 4s, 1, forwards);

	@include keyframes(anim-edcol) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.ecol{
	fill:#876944;
	opacity:0;
	
	@include vendor-prefixes(anim-ecol, 1s, ease, 3.5s, 1, forwards);

	@include keyframes(anim-ecol) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.ebrown{
	fill:#734F2E;
	opacity:0;
	
	@include vendor-prefixes(anim-ebrown, 1s, ease, 4.5s, 1, forwards);

	@include keyframes(anim-ebrown) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.lgrey{
	fill:#594648;
	opacity:0;
	
	@include vendor-prefixes(anim-lgrey, 2s, ease, 3s, 1, forwards);

	@include keyframes(anim-lgrey) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.grey{
	fill:#302D29;
	opacity:0;
	
	@include vendor-prefixes(anim-grey, 1.5s, ease, 4s, 1, forwards);

	@include keyframes(anim-grey) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.black{
	fill:#000;
	opacity:0;
	
	@include vendor-prefixes(anim-black, 3s, ease, 3s, 1, forwards);

	@include keyframes(anim-black) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.white{
	fill:#FFF;
	opacity:0;
	
	@include vendor-prefixes(anim-white, 2s, ease, 5s, 1, forwards);

	@include keyframes(anim-white) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.ground-left{
	fill:#876944;
	opacity:0;
	
	@include vendor-prefixes(anim-ground-left, 4s, ease, 3s, 1, forwards);

	@include keyframes(anim-ground-left) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.ground-right{
	fill:#734F2E;
	opacity:0;
	
	@include vendor-prefixes(anim-ground-right, 2s, ease, 1s, 1, forwards);

	@include keyframes(anim-ground-right) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}

.sky{
	fill:#99C1C6;
	opacity:0;
	
	@include vendor-prefixes(anim-sky, 1s, ease-in-out, 0s, 1, forwards);

	@include keyframes(anim-sky) {
		from {opacity: 0;}
		to {opacity: 1;}
	}
}


            
          
!
999px
🕑 One or more of the npm packages you are using needs to be built. You're the first person to ever need it! We're building it right now and your preview will start updating again when it's ready.
Loading ..................

Console