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="bg-color">
  <img src="https://www.ccpgames.com/img/universe/stars_and_lines.png" class="night stars" alt="stars" />
  <svg xmlns="http://www.w3.org/2000/svg" id="svg2" viewBox="0 0 1280 640">
    <circle class="night moon" cx="1200px" cy="40px" r="27"/>
    <path d="M0 390l180-100 100-20 30 50 50-20 80 70 40-20 60 40 20-30 70-10 70-120 80-20 40 40 110-110 70 40 60 10 40-70 60 70 60 20 30 50 30-100v480H0z" class="mountains_large_front"/>
    <path id="path3777" d="M310 320l-30-50 10 60z" class="mountains_large_back"/>
    <path id="path3779" d="M440 370l-80-70 10 50z" class="mountains_large_back"/>
    <path id="path3781" d="M540 390l-60-40 10 50z" class="mountains_large_back"/>
    <path id="path3783" d="M820 250l-40-40 20 90z" class="mountains_large_back"/>
    <path id="path3785" d="M1000 180l-70-40 50 210 50-40z" class="mountains_large_back"/>
    <path id="path3787" d="M1160 190l-60-70-30 170 30-10z" class="mountains_large_back"/>
    <path id="path3789" d="M1250 260l-30-50v70z" class="mountains_large_back"/>
    <path d="M0 350l110 160 140-110 100 60 100-70 180 20 80-50 90 50 30-20 90 30 100-20 60-60 50 50 80-40 70 50v240H0z" class="mountains_small_front"/>
    <path id="path3804" d="M95 470H80v20h15z" class="building--face"/>
    <path id="path3793" d="M350 460l-100-60 20 40 10 50z" class="mountains_small_back"/>
    <path id="path3795" d="M630 410l-180-20 30 40 100 20z" class="mountains_small_back"/>
    <path id="path3797" d="M800 410l-90-50 10 40 30 10z" class="mountains_small_back"/>
    <path id="path3799" d="M920 420l-90-30 30 20z" class="mountains_small_back"/>
    <path id="path3814" d="M1130 390l-50-50 10 60 30 20z" class="mountains_small_back"/>
    <path id="path3816" d="M1280 400l-70-50-10 70 30 20z" class="mountains_small_back"/>
    <path id="rect3018" d="M95 460h50v30H95z" class="building--face"/>
    <path d="M120 470h5v10h-5z" class="door"/>
    <path id="path3800" d="M155 461l-10-1v20h10z" class="building--right"/>
    <path d="M0 490l210-20 100 20 350-30 130 20h120l60-20 70 10 90-10 150-10v190H0z" class="hill_front"/>
    <path id="rect3846" d="M310 530l350-70-350 30-100-20z" class="hill_back"/>
    <path id="path3871" d="M900 500l70-40-60 20H790z" class="hill_back"/>
    <path id="path3873" d="M1000 470l-30-10 70 10z" class="hill_back"/>
    <path id="path3802" d="M155 461l-10-1h-25v-10z" class="roof--right"/>
    <path id="rect3020" d="M95 460h50l-25-10z" class="roof"/>
    <path d="M100 465h5v5h-5z" class="windows"/>
    <path d="M110 465h5v5h-5z" class="windows"/>
    <path d="M130 465h10v5h-10z" class="windows"/>
    <path id="path3806" d="M80 470h15v-5z" class="roof"/>
    <path id="rect3808" d="M155 480h20v15h-20z" class="building--face"/>
    <path id="path3975" d="M155 480l10-5 10 5z" class="roof"/>
    <path id="path3977" d="M160 495v-10h5v10z" class="door"/>
    <path id="rect4001" d="M180 481l-5-1v15h5z" class="building--right"/>
    <path id="path4004" d="M180 481l-5-1-10-5z" class="roof--right"/>
    <path id="rect4078" d="M179 470h15v40h-15z" class="building--face"/>
    <path id="path4080" d="M179 470l8-15 7 15z" class="roof"/>
    <path id="path4082" d="M184 510v-10h5v10z" class="door"/>
    <path id="path4084" d="M198 470h-4v40h4z" class="building--right"/>
    <path id="path4086" d="M198 470h-4l-7-15z" class="roof--right"/>
    <path d="M184 485h5v5h-5z" class="windows"/>
    <path d="M184 475h5v5h-5z" class="windows"/>
    <path id="rect4012" d="M80 490h30v15H80z" class="building--face"/>
    <path id="path4014" d="M80 490l15-10 15 10z" class="roof"/>
    <path id="path4016" d="M90 505v-10h5v10z" class="door"/>
    <path id="path4018" d="M115 491l-5-1v15h5z" class="building--right"/>
    <path id="path4020" d="M115 491l-5-1-15-10z" class="roof--right"/>
    <path d="M100 495h5v5h-5z" class="windows"/>
    <path id="path4109" d="M187 455l1 2.14V453h1v-1h-1v-1h-1v1h-1v1h1z" class="spire"/>
    <path d="M120 478.57l5 11.43-5 10 5 5-20 5L0 530v10l16.25-3.75 16.25-3.75 16.25-3.75L55 550l20 5 65 10 10-5-5-10h-5l-5 5h-25l-45-10-5-15 5-5 16.25-3.75 16.25-3.75L110 520l30 5h45l5-15h-5l-5 10h-35l-35-5 20-5 5-5-5-5v-10l-5-12z" class="walkway"/>
    <path id="path4113" d="M115 540H90v10h25z" class="building--face"/>
    <path id="path4115" d="M115 520h50v30h-50z" class="building--face"/>
    <path id="rect4117" d="M140 540h5v10h-5z" class="door"/>
    <path id="path4119" d="M175 521l-10-1v30l5-1 5-.51z" class="building--right"/>
    <path id="path4121" d="M175 521l-10-1h-25v-10z" class="roof--right"/>
    <path id="path4123" d="M115 520h50l-25-10z" class="roof"/>
    <path d="M120 535h5v5h-5z" class="windows"/>
    <path d="M130 535h5v5h-5z" class="windows"/>
    <path d="M150 535h10v5h-10z" class="windows"/>
    <path id="path4131" d="M90 540h25v-5z" class="roof"/>
    <path id="rect4137" d="M170 540h15v9h-15z" class="building--face"/>
    <path id="path4139" d="M170 540v-5h10l5 5z" class="roof"/>
    <path id="path4141" d="M175 549v-4h5v4z" class="door"/>
    <path id="path4143" d="M188 540h-3v9l3-1z" class="building--right"/>
    <path id="path4145" d="M188 540h-3l-5-5z" class="roof--right"/>
    <path id="rect4158" d="M65 550h30v15H65z" class="building--face"/>
    <path id="path4160" d="M65 550l15-10 15 10z" class="roof"/>
    <path id="path4162" d="M75 565v-10h5v10z" class="door"/>
    <path id="path4164" d="M100 551l-5-1v15h5z" class="building--right"/>
    <path id="path4166" d="M100 551l-5-1-15-10z" class="roof--right"/>
    <path d="M85 555h5v5h-5z" class="windows"/>
    <path d="M310 530l10 25-85 40-125 15-80 30h30l55-25 125-15 90-45-15-26z" class="river_bottom"/>
    <path d="M310 530l15-10-35-10 40-10-20-10 3.06-.28L335 500l-35 10 30 10-15 9z" class="river_top"/>
    <path d="M900 500l6.25 11.25-5 10 5 5L860 540l-35 10-75 20-10 10 5 5 10 5 60 10-20 10-35 30h5l30-25 15-10h15l20 5 30 5 50 15 10 10h5l-10-10-35-11.25-10-3.75-20-5-30-5-10-5-55-10-20-5-5-5 10-10 45-10 50-15 55-15 5-5-5-5 5-5-10-20z" class="crack"/>
    <path id="path4232" d="M473 516h4v-6h-4z" class="tree-trunk"/>
    <path id="path4234" d="M475 516h2v-3h-2z" class="tree--right"/>
    <path id="path4236" d="M475 485l-.94 3.13-.94 3.13L472 495h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4238" d="M475 485v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4240" d="M467 516h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4222" d="M443 521h4v-6h-4z" class="tree-trunk"/>
    <path id="path4224" d="M445 521h2v-3h-2z" class="tree--right"/>
    <path id="path4226" d="M445 490l-.94 3.13-.94 3.13L442 500h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4228" d="M445 490v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4230" d="M437 521h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4207" d="M463 531h4v-6h-4z" class="tree-trunk"/>
    <path id="path4217" d="M465 531h2v-3h-2z" class="tree--right"/>
    <path id="path4213" d="M465 500l-.94 3.13-.94 3.13L462 510h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4215" d="M465 500v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="rect4219" d="M457 531h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4265" d="M453 541h4v-6h-4z" class="tree-trunk"/>
    <path id="path4267" d="M455 541h2v-3h-2z" class="tree--right"/>
    <path id="path4269" d="M455 510l-.94 3.13-.94 3.13L452 520h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4271" d="M455 510v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4273" d="M447 541h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4277" d="M488 546h4v-6h-4z" class="tree-trunk"/>
    <path id="path4279" d="M490 546h2v-3h-2z" class="tree--right"/>
    <path id="path4281" d="M490 515l-.94 3.13-.94 3.13L487 525h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4283" d="M490 515v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4285" d="M482 546h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4305" d="M468 566h4v-6h-4z" class="tree-trunk"/>
    <path id="path4307" d="M470 566h2v-3h-2z" class="tree--right"/>
    <path id="path4309" d="M470 535l-.94 3.13-.94 3.13L467 545h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4311" d="M470 535v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4313" d="M462 566h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4317" d="M433 591h4v-6h-4z" class="tree-trunk"/>
    <path id="path4319" d="M435 591h2v-3h-2z" class="tree--right"/>
    <path id="path4321" d="M435 560l-.94 3.13-.94 3.13L432 570h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4323" d="M435 560v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4325" d="M427 591h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4329" d="M448 606h4v-6h-4z" class="tree-trunk"/>
    <path id="path4331" d="M450 606h2v-3h-2z" class="tree--right"/>
    <path id="path4333" d="M450 575l-.94 3.13-.94 3.13L447 585h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4335" d="M450 575v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4337" d="M442 606h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4341" d="M363 526h4v-6h-4z" class="tree-trunk"/>
    <path id="path4343" d="M365 526h2v-3h-2z" class="tree--right"/>
    <path id="path4345" d="M365 495l-.94 3.13-.94 3.13L362 505h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4347" d="M365 495v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4349" d="M357 526h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4353" d="M268 536h4v-6h-4z" class="tree-trunk"/>
    <path id="path4355" d="M270 536h2v-3h-2z" class="tree--right"/>
    <path id="path4357" d="M270 505l-.94 3.13-.94 3.13L267 515h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4359" d="M270 505v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4361" d="M262 536h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4365" d="M292 595h4v-6h-4z" class="tree-trunk"/>
    <path id="path4367" d="M294 595h2v-3h-2z" class="tree--right"/>
    <path id="path4369" d="M294 564l-.94 3.13-.94 3.13L291 574h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4371" d="M294 564v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4373" d="M286 595h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4377" d="M781 508h4v-6h-4z" class="tree-trunk"/>
    <path id="path4379" d="M783 508h2v-3h-2z" class="tree--right"/>
    <path id="path4381" d="M783 477l-.94 3.13-.94 3.13L780 487h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4383" d="M783 477v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4385" d="M775 508h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4389" d="M806 536h4v-6h-4z" class="tree-trunk"/>
    <path id="path4391" d="M808 536h2v-3h-2z" class="tree--right"/>
    <path id="path4393" d="M808 505l-.94 3.13-.94 3.13L805 515h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4395" d="M808 505v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4397" d="M800 536h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4401" d="M734 508h4v-6h-4z" class="tree-trunk"/>
    <path id="path4403" d="M736 508h2v-3h-2z" class="tree--right"/>
    <path id="path4405" d="M736 477l-.94 3.13-.94 3.13L733 487h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4407" d="M736 477v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4409" d="M728 508h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4413" d="M762 538h4v-6h-4z" class="tree-trunk"/>
    <path id="path4415" d="M764 538h2v-3h-2z" class="tree--right"/>
    <path id="path4417" d="M764 507l-.94 3.13-.94 3.13L761 517h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4419" d="M764 507v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4421" d="M756 538h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4425" d="M786 546h4v-6h-4z" class="tree-trunk"/>
    <path id="path4427" d="M788 546h2v-3h-2z" class="tree--right"/>
    <path id="path4429" d="M788 515l-.94 3.13-.94 3.13L785 525h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4431" d="M788 515v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4433" d="M780 546h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4437" d="M664 525h4v-6h-4z" class="tree-trunk"/>
    <path id="path4439" d="M666 525h2v-3h-2z" class="tree--right"/>
    <path id="path4441" d="M666 494l-.94 3.13-.94 3.13L663 504h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4443" d="M666 494v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4445" d="M658 525h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4449" d="M1036 506h4v-6h-4z" class="tree-trunk"/>
    <path id="path4451" d="M1038 506h2v-3h-2z" class="tree--right"/>
    <path id="path4453" d="M1038 475l-.94 3.13-.94 3.13L1035 485h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4455" d="M1038 475v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4457" d="M1030 506h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4461" d="M1064 536h4v-6h-4z" class="tree-trunk"/>
    <path id="path4463" d="M1066 536h2v-3h-2z" class="tree--right"/>
    <path id="path4465" d="M1066 505l-.94 3.13-.94 3.13L1063 515h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4467" d="M1066 505v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4469" d="M1058 536h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4473" d="M900 596h4v-6h-4z" class="tree-trunk"/>
    <path id="path4475" d="M902 596h2v-3h-2z" class="tree--right"/>
    <path id="path4477" d="M902 565l-.94 3.13-.94 3.13L899 575h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4479" d="M902 565v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4481" d="M894 596h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4485" d="M1011 526h4v-6h-4z" class="tree-trunk"/>
    <path id="path4487" d="M1013 526h2v-3h-2z" class="tree--right"/>
    <path id="path4489" d="M1013 495l-.94 3.13-.94 3.13L1010 505h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4491" d="M1013 495v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4493" d="M1005 526h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4497" d="M1039 556h4v-6h-4z" class="tree-trunk"/>
    <path id="path4499" d="M1041 556h2v-3h-2z" class="tree--right"/>
    <path id="path4501" d="M1041 525l-.94 3.13-.94 3.13L1038 535h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4503" d="M1041 525v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4505" d="M1033 556h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4509" d="M1001 556h4v-6h-4z" class="tree-trunk"/>
    <path id="path4511" d="M1003 556h2v-3h-2z" class="tree--right"/>
    <path id="path4513" d="M1003 525l-.94 3.13-.94 3.13L1000 535h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4515" d="M1003 525v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4517" d="M995 556h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4521" d="M770 570h4v-6h-4z" class="tree-trunk"/>
    <path id="path4523" d="M772 570h2v-3h-2z" class="tree--right"/>
    <path id="path4525" d="M772 539l-.94 3.13-.94 3.13L769 549h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4527" d="M772 539v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4529" d="M764 570h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4533" d="M789 602h4v-6h-4z" class="tree-trunk"/>
    <path id="path4535" d="M791 602h2v-3h-2z" class="tree--right"/>
    <path id="path4537" d="M791 571l-.94 3.13-.94 3.13L788 581h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4539" d="M791 571v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4541" d="M783 602h16l-2 2h-12z" class="tree--shadow"/>
    <path id="path4545" d="M758 623h4v-6h-4z" class="tree-trunk"/>
    <path id="path4547" d="M760 623h2v-3h-2z" class="tree--right"/>
    <path id="path4549" d="M760 592l-.94 3.13-.94 3.13L757 602h1l-3 6h1l-3 7h1l-3 6h18l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree"/>
    <path id="path4551" d="M760 592v29h9l-3-6h1l-3-7h1l-3-6h1l-1.12-3.75-.94-3.12z" class="tree--right"/>
    <path id="path4553" d="M752 623h16l-2 2h-12z" class="tree--shadow"/>
</svg>
  <img src="http://ianhazelton.com/codepen_assets/sun.png" alt="" class="sun" />
</div>
            
          
!
            
              $buildingFaceDay: #ecf0f1;
$buildingFaceNight: #0f0;
$buildingRightDay: #bdc3c7;
$buildingRightNight: #3c3e40;
$hillFrontDay: #2ecc71;
$hillFrontNight: #092314;
$hillBackDay: #28b162;
$hillBackNight: #06170d;
$treeDay: #098c40;
$treeNight: #02150a;
$riverBottomDay: #3498db;
$riverBottomNight: #04080a;
$riverTopDay: #2980b9;
$riverTopNight: #000;
$mountainsLargeFrontNight: #34495e;
$mountainsBackNight: #ecf0f1;
$moon: #e8ecef;
$mountainsSmallFrontNight: #2c3e50;

*, *::before, *::after {
  box-sizing: border-box;
  margin:0;
  padding: 0;
}

body {
  background-color: #1D1F20;
}

svg {
  box-shadow: 0px 6px 0px #222;
  position: relative;
  z-index: 2;
}

.sun {
  position: absolute; 
  top: 60%;
  left: 40%;
  width: 10%;
  z-index: 1;
}

.bg-color {
  background: linear-gradient(to top, #4b6cb7, #000000);
  height: 100%;
  position: relative;
  z-index: 1;
}

.moon {
  fill: $moon;
  position: absolute;
}

.stars {
  display: none; 
  position: absolute;
  height: 100vh;
  width: 100vw;
  
}

.mountains_large_front {
  fill: $mountainsLargeFrontNight;
  position: absolute;
}

.mountains_small_back,
.mountains_large_back {
  fill: $mountainsBackNight;
}

.mountains_small_front,
.door,
.tree-trunk {
  fill: $mountainsSmallFrontNight;
}

.building--face {
  fill: #060606;
}

.building--right {
  fill: $buildingRightNight;
}

.hill_front {
  fill: $hillFrontNight;
}

.crack,
.walkway,
.hill_back,
.tree--shadow {
  fill: $hillBackNight;
}

.windows {
  fill: #ECFC00;
}

.roof--right {
  fill: #585858;
}

.roof {
  fill: #757575;
}

.spire {
  fill: #f1c40f;
}

.river_bottom {
  fill: $riverBottomNight;
}

.river_top {
  fill: $riverTopNight;
}

.tree {
  fill: $treeNight;
}

.tree--right {
  opacity:0.1;
  isolation:isolate;
}

            
          
!
            
              const bgColor = document.getElementsByClassName("bg-color")
const moon = document.getElementsByClassName("moon")
const sun = document.getElementsByClassName("sun")
const windows = document.getElementsByClassName("windows")
const buildingFace = document.getElementsByClassName("building--face")
const hillFront = document.getElementsByClassName("hill_front")
const hillBack = document.getElementsByClassName("hill_back")
const crack = document.getElementsByClassName("crack")
const walkway = document.getElementsByClassName("walkway")
const trees = document.getElementsByClassName("tree")
const riverBottom = document.getElementsByClassName("river_bottom")
const riverTop = document.getElementsByClassName("river_top")
const buildingRight = document.getElementsByClassName("building--right")
const mountainsLargeFront = document.getElementsByClassName("mountains_large_front")
const mountainsLargeBack = document.getElementsByClassName("mountains_large_back")
const mountainsSmallBack = document.getElementsByClassName("mountains_small_back")
const mountainsSmallFront = document.getElementsByClassName("mountains_small_front")
const night = document.getElementsByClassName("night")


var tl = new TimelineMax({repeat:-1, yoyo:true});

tl.to(bgColor, 10, {backgroundImage:"linear-gradient(to top, #4b6cb7, #000000)"}, "dawn")
tl.to(night, 2, {opacity:0.2}, "dawn")
tl.to(bgColor, 2, {backgroundImage:"linear-gradient(to top, #e55d87, #5fc3e4)"}, "dawn")
tl.to(sun, 5, {delay:1, y:"-200%", ease: Power3.easeNone}, "dawn")
tl.to(windows, 1, {delay:2,fill:"#000"}, "dawn")
tl.to(buildingFace, 3, {fill:"#ecf0f1"}, "dawn")
tl.to(bgColor, 3, {delay:3, backgroundImage:"linear-gradient(to top, #50C9C3, #5fc3e4)"}, "dawn")
tl.to(hillFront, 5, {delay:1, fill:"#2ecc71"}, "dawn")
tl.to(hillBack, 5, {delay:1, fill:"#28b162"}, "dawn")
tl.to(crack, 5, {delay:1, fill:"#28b162"}, "dawn")
tl.to(walkway, 5, {delay:1, fill:"#28b162"}, "dawn")
tl.to(trees, 5, {delay:1, fill:"#098c40"}, "dawn")
tl.to(riverBottom, 5, {delay:1, fill:"#3498db"}, "dawn")
tl.to(riverTop, 5, {delay:1, fill:"#3498db"}, "dawn")
tl.to(buildingRight, 5, {delay:1, fill:"#bdc3c7"}, "dawn")
tl.to(mountainsLargeFront, 5, {delay:1, fill:"#afa5a5"}, "dawn")
tl.to(mountainsLargeBack, 5, {delay:1, fill:"#707273"}, "dawn")
tl.to(mountainsSmallBack, 5, {delay:1, fill:"#707273"}, "dawn")
tl.to(mountainsSmallFront, 5, {delay:1, fill:"#988f8f"}, "dawn")
console.log("duration is: " + tl.duration());

//$("<audio></audio>").attr({
//    'src':'https://s3-us-west-2.amazonaws.com/s.cdpn.io/341817/Screaming_Sun_cut.mp3',
//    'volume':0.4,
//    'autoplay':'false',
//    'loop':'loop'
//}).appendTo("body");
//@IanHazelton


            
          
!
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.

Console