cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - Activehtmlicon-personicon-teamoctocatpop-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.

            
              <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
Close

Asset uploading is a PRO feature.

As a PRO member, you can drag-and-drop upload files here to use as resources. Images, Libraries, JSON data... anything you want. You can even edit them anytime, like any other code on CodePen.

Go PRO

Loading ..................

Console