css Audio - Active file-generic CSS - Active Generic - Active HTML - Active JS - Active SVG - Active Text - Active file-generic Video - Active header Love html icon-new-collection icon-person icon-team numbered-list123 pop-out spinner split-screen star tv

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.

HTML Settings

Here you can Sed posuere consectetur est at lobortis. Donec ullamcorper nulla non metus auctor fringilla. Maecenas sed diam eget risus varius blandit sit amet non magna. Donec id elit non mi porta gravida at eget metus. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.

            
              <div class="container">
<svg id="little-mountains">
<defs>
<g id="Layer27_0_FILL">
<path fill="#E5542E" stroke="none" d="
M 469.15 82.5
L 409.35 82.5
Q 399.1 76.8 388.15 72.3 370.3 65.05 345 65.05 319.7 65.05 301.85 72.3 290.85 76.8 281.65 82.5
L 70.35 82.5 70.5 149 469.15 149 469.15 82.5 Z"/>
</g>

<g id="Layer26_0_FILL">
<path fill="#FB9235" stroke="none" d="
M 398.45 117.65
Q 375.9 101 344 101 312.1 101 289.5 117.65 271.45 131.1 265.05 149
L 70.5 149 70.5 215 339.15 215
Q 341.55 215.1 344 215.1 346.45 215.1 348.9 215
L 469.15 215 469.15 149 426.15 149
Q 416.55 131.1 398.45 117.65 Z"/>
</g>

<g id="Layer25_0_FILL">
<path fill="#FFC466" stroke="none" d="
M 386 146.4
Q 369 130.05 345 130.05 321 130.05 303.95 146.4 287 162.85 287 186.05 287 201.55 294.6 214
L 70.5 214 70.5 260 82.15 260
Q 82.6498046875 257.8505859375 83.65 255.35 86.35 248.65 90.1 242.9 92.85 238.65 96.1 236.35 100.15 233.6 103.9 234.75 106.55 235.55 109.4 239 113.2 243.6 114.3 244.45 116.75 246.4 120.75 247.35 122.1 247.7 127.9 248.55 134.9 249.65 144.45 252.55 149.85 254.25 160.65 257.75 164.05 258.8 166.3 259.1 169.45 259.5 171.9 258.6 173.5 258 175.75 256.35 178.5 254.25 179.45 253.75 181.95 252.4 185.55 251.9 187.65 251.6 192.05 251.5 196.65 251.45 198.95 251.6 202.75 251.85 205.7 252.8 208.4 253.65 211.45 255.45 213.35 256.55 216.8 258.9 217.6244140625 259.4654296875 218.4 260
L 469.15 260 469.15 214 395.4 214
Q 403 201.55 403 186.05 403 162.85 386 146.4 Z"/>
</g>

<g id="Layer24_0_FILL">
<path fill="#FFFFFF" stroke="none" d="
M 344 165
Q 333.65 165 326.3 172.3 319 179.65 319 190 319 200.35 326.3 207.65 333.65 215 344 215 354.35 215 361.65 207.65 369 200.35 369 190 369 179.65 361.65 172.3 354.35 165 344 165 Z"/>
</g>

<g id="Layer21_0_FILL">
<path fill="#E5542E" stroke="none" d="
M 70.5 247.9
L 106.75 213.65 70.95 179.75 70.5 247.9
M 379.6 255.2
L 360.95 238.45 344.05 255.35 319.95 230.45 294.95 252.45 336.95 297.45 379.6 255.2
M 182.25 218.2
L 222.45 254.45 249.95 226.45 211.95 189.45 182.25 218.2 Z"/>
</g>

<g id="Layer20_0_FILL">
<path fill="#AF232D" stroke="none" d="
M 153 197
L 153 197.7 144 204 136 197 124 209 115.85 199.85 70.5 244.25 70.5 279.35
Q 87.9728515625 279.228125 88.8 279.1 89.595703125 272.721875 92.85 259.4 98.8052734375 235.051953125 101.6 239.65 104.4515625 244.2884765625 111.9 279.15 112.1123046875 280.0234375 112.3 280.85
L 112.3 280.7
Q 125.9568359375 273.5537109375 184.2 312.5 184.801953125 310.099609375 185.6 306.95 191.9982421875 282.5556640625 194.5 273.35 197.0064453125 264.1953125 197.6 260.25 198.2576171875 256.34765625 199.95 255.6 201.6796875 254.8572265625 202.35 257 203.03046875 259.180859375 203.35 260.9 203.6615234375 262.6740234375 203.7 262.6 203.7490234375 262.5748046875 207 276 210.2419921875 289.4162109375 213.8 302.4 214.0353515625 302.290625 214.2 302.15
L 214.25 302.15
Q 214.8609375 299.981640625 215.6 297.55
L 216.9 293.4
Q 217.54453125 291.18671875 218 289.25 219.80390625 282.1552734375 219.95 281.4 220.1439453125 280.1478515625 220.75 278.25 221.3697265625 276.405859375 222.65 275.7 223.925 274.9951171875 224.65 276.15 225.4169921875 277.29921875 226.2 281.1 226.9927734375 284.9568359375 227.35 286.9 227.7611328125 288.829296875 228.35 292.45 228.9392578125 296.0802734375 233.95 312.95 256.8736328125 311.4521484375 270.95 319.8 267.0408203125 317.0587890625 270.7 319.55
L 342.95 285.95 278 221 269 229 262 221 253 229 244 221 236 229 227.9 220.3 219.8 228.15 196.35 205.15 187 213 178 205 169 212 153 197
M 184.1 312.75
Q 181.8607421875 312.3513671875 184.1 312.8
L 184.1 312.75 Z"/>

<path fill="#FB9235" stroke="none" d="
M 153 197.7
L 153 197 153.25 163 115.85 199.85 124 209 136 197 144 204 153 197.7
M 244 221
L 253 229 253 196 227.9 220.3 236 229 244 221 Z"/>

<path fill="#FFFFFF" stroke="none" d="
M 253 229
L 262 221 269 229 278 221 253 196 253 229
M 153.25 163
L 153 197 169 212 178 205 187 213 196.35 205.15 153.25 163 Z"/>

<path fill="#FF0000" stroke="none" d="
M 325.25 353.45
Q 326.25 351.65 326.15 349.7 326.05 347.8 325.15 346.2 323.9 344.05 321.75 343.15 320 342.35 318 342.5 316 342.7 314.4 343.8 312.8 344.95 311.9 346.75 311.05 348.55 311.2 350.5 311.348828125 352.4037109375 313.35 354.05 315.403125 355.73828125 318.05 356.55 320.7466796875 357.3615234375 320.9 357.3 321.0509765625 357.29609375 322.7 356.25 324.3 355.25 325.25 353.45 Z"/>
</g>

<g id="Layer18_0_FILL">
<path fill="#AF232D" stroke="none" d="
M 427.6 195.05
Q 426.8787109375 194.3791015625 425.45 194.7 420.7 210.45 419.95 218.95
L 416.6 230.95 416.65 231
Q 404.428125 233.27265625 401.25 234.55 398.1263671875 235.823046875 385.45 245.95
L 381.7 227.2
Q 381.35 223.4 378.45 226.2
L 375.95 237.45 368.7 263.7 361.7 268.7
Q 353.3916015625 273.929296875 348.45 274.95
L 342.7 277.2 334.95 277.95 316.45 277.95 312.45 281.95 308.45 284.95 256.45 287.95 247.45 295.95 241.45 295.95
Q 240.7 298.7 240 299.05
L 234.45 299.05
Q 232.5 301.7 232 303
L 234 312
Q 269.1533203125 312.20703125 292.45 335.25
L 301.45 343.45
Q 305.507421875 348.2673828125 308.2 350.35 310.8888671875 352.4689453125 314.85 354.8 316.3890625 355.746875 316.65 355.95 319.1173828125 357.19765625 319.35 357.15 324.644921875 360.1666015625 327.9 344.25 329.162890625 340.25 330.4 336.25 330.5 335.95 330.55 335.65 330.75 334.75 331.9 329.85
L 335.7 313.7
Q 337.3673828125 308.39140625 340 313.7
L 340 314 342 320 349.35 350.15 366.3 286.15
Q 366.3490234375 286.08515625 366.35 286 368.5005859375 280.93828125 371.35 286.5 371.3998046875 286.59921875 371.45 286.7
L 371.4 286.65 388.8 356.8
Q 419.6267578125 331.498046875 428.2 330.45
L 439.2 285.7
Q 441.45 280.163671875 444.45 285.7
L 455.7 329.1
Q 461.6484375 330.2515625 469.15 328.95
L 469.15 229.9 452.55 229.65 445.85 203.95
Q 445.0306640625 202.88125 444.9 202.7
L 443.3 202.75 436.3 227.3 427.75 195.25
Q 427.689453125 195.159375 427.6 195.05 Z"/>
</g>

<g>
<path id="cloud1" fill="#FFFFFF" stroke="none" d="
M 76 166
Q 73.0537109375 162.9734375 70 161.4 61.651953125 157.2310546875 52.5 164.15 45.25 169.65 45 179 58.6244140625 179.9947265625 70 180.35 82.0015625 180.7064453125 91.5 180.35 106.4111328125 179.799609375 110 177.65
L 109.4 178.3
Q 109.8603515625 177.8779296875 110.2 177.55 111.1744140625 176.6244140625 111.1 176.55 110.5 175.8 109.8 175.2 109.05 174.55 102 174 96.6 160.15 81.9 163.65 78.8 164.4 76 166 Z"/>
</g>

<g>
<path id="cloud2" fill="#FFFFFF" stroke="none" d="
M 229.85 111.5
Q 228.4046875 113.926953125 227.2 117 224.2181640625 116.8158203125 222.2 117.6 220.9 118.0978515625 220 119 219.425390625 120.6025390625 222.2 121.3 225.1607421875 122.1099609375 231.9 121.9
L 319.7 121.9 319.6 121.8
Q 320.0232421875 121.6037109375 320.5 120.5 321.3068359375 118.604296875 319.25 118.2
L 313.4 118.2
Q 308.8 108.55 301.05 104.8 292.45 100.7 286 106.4
L 285 104.4
Q 278.8 91.75 268.4 93.15 258 94.5 254 106.4 244.6 100.55 237.75 103.9 233.151953125 106.0990234375 229.85 111.5 Z"/>
</g>

<g id="cloud3">
<path fill="#FFFFFF" stroke="none" d="
M 498.25 146.9
Q 497.25 144.8 491 145 484.15 132.15 470.1 132.8 468.2 133.15 466.35 133.55 460.1 124.65 448.05 124.85 437.8 125 433.45 134.15 419.25 129.15 410.2 140.5 407.15 144.3 408 149
L 498 149 498.25 146.9 Z"/>
</g>

<g id="basket">
<path fill="#3F0322" stroke="none" d="
M 202 163
L 194 163 194 171 202 171 202 163 Z"/>
</g>

<g id="balloon">
<path fill="#FB9235" stroke="none" d="
M 218.75 93.1
Q 215.9056640625 76.506640625 199 71
L 199 154 202 154
Q 203.12265625 153.9416015625 204.2 153.8 208.4908203125 150.681640625 213.6 142.5 218.8966796875 134.09296875 220.25 121.9 221.5978515625 109.6994140625 218.75 93.1 Z"/>

<path fill="#FFC466" stroke="none" d="
M 226 80
Q 224.5 79.1 223 78.25 211.85 71.85 199 71 215.9056640625 76.506640625 218.75 93.1 221.5978515625 109.6994140625 220.25 121.9 218.8966796875 134.09296875 213.6 142.5 208.4908203125 150.681640625 204.2 153.8 211.655859375 153.1021484375 218.4 150.1 230.85 144.5 236.5 132.25 243.25 117.55 239.05 101.95 235.65 89.3 226.1 80.45
L 226 80 Z"/>

<path fill="#AF232D" stroke="none" d="
M 178.4 95.7
Q 182.3623046875 78.5125 199 71 178.95 74.1529296875 169 85.3 159.1 96.498828125 158.5 111.3 157.95 126 166.15 138.05 175.7 150.65 193 154 182.9 145.3 180 134.25 174.445703125 112.945703125 178.4 95.7 Z"/>

<path fill="#E5542E" stroke="none" d="
M 199 71
Q 182.3623046875 78.5125 178.4 95.7 174.445703125 112.945703125 180 134.25 182.9 145.3 193 154
L 199 154 199 71 Z"/>
</g>

<g>
<path id="star1" fill="rgb(255, 196, 102)" stroke="none" d="
M 98.05 107.6
Q 99.35 106.3 99.35 104.5 99.35 102.7 98.05 101.4 96.75 100.1 94.95 100.1 93.15 100.1 91.85 101.4 90.55 102.7 90.55 104.5 90.55 106.3 91.85 107.6 93.15 108.9 94.95 108.9 96.75 108.9 98.05 107.6 Z"/>
</g>

<g id="star2">
<path fill="#FFC466" stroke="none" d="
M 124 113
L 121.6 118.9 115.1 121.05 121.6 123.1 124 130 126.5 123 133.4 120.95 126.3 118.8 124 113 Z"/>
</g>

<g id="fourthmoth">
<path fill="#FC9335" stroke="none" d="
M 418.55 307
Q 419.75 305.85 419.75 304.15 419.75 302.45 418.55 301.25 417.4 300.1 415.7 300.1 414 300.1 412.8 301.25 411.65 302.45 411.65 304.15 411.65 305.85 412.8 307 414 308.2 415.7 308.2 417.4 308.2 418.55 307 Z"/>
</g>

<g id="thirdMoth">
<path fill="#FFC466" stroke="none" d="
M 402.95 327.6
Q 404.25 326.3 404.25 324.5 404.25 322.7 402.95 321.4 401.65 320.1 399.85 320.1 398.05 320.1 396.75 321.4 395.45 322.7 395.45 324.5 395.45 326.3 396.75 327.6 398.05 328.9 399.85 328.9 401.65 328.9 402.95 327.6 Z"/>
</g>

<g id="firstMoth">
<path fill="#FC9335" stroke="none" d="
M 311.55 321.05
Q 309.7 321.05 308.4 322.3 307.05 323.55 307.05 325.25 307.05 327 308.4 328.2 309.7 329.45 311.55 329.45 313.4 329.45 314.75 328.2 316.05 327 316.05 325.25 316.05 323.55 314.75 322.3 313.4 321.05 311.55 321.05 Z"/>
</g>

<g id="secondMoth">
<path fill="#FC9335" stroke="none" d="
M 137.25 267
Q 138.5 265.8 138.5 264.1 138.5 262.4 137.25 261.15 136.05 259.95 134.35 259.95 132.65 259.95 131.4 261.15 130.2 262.4 130.2 264.1 130.2 265.8 131.4 267 132.65 268.25 134.35 268.25 136.05 268.25 137.25 267 Z"/>
</g>
</defs>

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

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

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

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

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

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

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

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


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




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

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

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

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

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

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

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

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

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


</svg>
</div>
            
          
!
            
              body {
	margin: 0;
	padding: 0;
	background: #3F0320;
}
.container {
	position: absolute;
	height: 100%;
	width: 100%;
	overflow: hidden;
}
            
          
!
            
              
(function(){
	var s = Snap("#little-mountains"),
		cloud1 = Snap('#cloud1'),
		cloud3 = Snap('#cloud3'),
		star2 = Snap('#star2'),
		star1 = Snap('#star1'),
		star1 = Snap('#star1'),
		firstMoth = Snap('#firstMoth'),
		secondMoth = Snap('#secondMoth'),
		thirdMoth = Snap('#thirdMoth'),
		fourthMoth = Snap('#fourthmoth'),
		balloon = Snap('#balloon'),
		basket = Snap('#basket'),
		cloud2 = Snap('#cloud2');

	s.attr({ 
		height: '100%',
		width: '100%',
		viewBox: "0 0 550 400", 
		preserveAspectRatio : "true"
	});

	var cloudOne = function() { 
		cloud1.animate({'transform' : 'T10 T400'}, 120000, mina.linear);
		cloud2.animate({'transform' : 'T10 T-200'}, 120000, mina.linear);
		cloud3.animate({'transform' : 'T10 T-400'}, 120000, mina.linear);
	}
	cloudOne();
	
	var balloonMove = function() {
		balloon.animate({'transform' : 'T10 T100'}, 120000, mina.linear);		
		basket.animate({'transform' : 'T10 T100'}, 120000, mina.linear);
	}
	balloonMove();
	
	var starTwo = function() { 
		star1.animate({'transform' : 's1'}, 2000, mina.linear, starBack);
		star2.animate({'transform' : 's1.3'}, 2000, mina.linear, starBack);
		firstMoth.animate({opacity : 0.2}, 2000, mina.linear, starBack);
		secondMoth.animate({opacity : 0.5}, 2000, mina.linear, starBack);
		thirdMoth.animate({opacity : 0.7}, 2000, mina.linear, starBack);
		fourthMoth.animate({opacity : 0.4}, 2000, mina.linear, starBack);
	}
	var starBack = function() { 
		star1.animate({'transform' : 's1.6'}, 2000, mina.linear, starTwo);
		star2.animate({'transform' : 's1'}, 2000, mina.linear, starTwo);
		firstMoth.animate({opacity : 0.6}, 2000, mina.linear, starBack);
		secondMoth.animate({opacity : 0.3}, 2000, mina.linear, starBack);
		fourthMoth.animate({opacity : 0.7}, 2000, mina.linear, starTwo);
		thirdMoth.animate({opacity : 0.2}, 2000, mina.linear, starTwo);
	}
	starTwo();
	
// 	fourthMoth.stop().animate({ opacity: 0.2}, 200, mina.easeout, function() {
// 		star1.stop().animate({opacity: 0, transform: 't-20,34 s4'}, 2500, mina.easeout);
// 		star2.stop().animate({transform: 't60,-100'}, 5000, mina.easeout);
// 	});
		
})();
            
          
!
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