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.

            
              <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 500 500">
  <style>
    .st0{fill:#5AC0ED;} .st1{fill:#60CEF4;} .st2{fill:#FFFFFF;} .st3{fill:#D8CABA;} .st4{fill:#73DCF4;} .st5{fill:#EDE5DD;} .st6{fill:#F9F5F2;} .st7{fill:#878787;} .st8{fill:#99877A;} .st9{fill:#A5645D;} .st10{fill:#C9A191;} .st11{fill:#D8B298;} .st12{fill:#916256;} .st13{fill:#28201E;} .st14{fill:#997156;} .st15{fill:#5B754B;} .st16{fill:#7D8767;} .st17{fill:#423730;} .st18{fill:#775F4F;} .st19{fill:#B2A8A1;} .st20{fill:#717C5B;} .st21{fill:#777069;} .st22{fill:#7D9150;} .st23{fill:#A39995;} .st24{fill:#5B2C25;} .st25{fill:#63453B;} .st26{fill:#7A6054;} .st27{fill:#513B36;} .st28{fill:#BDD8DB;} .st29{fill:#EBFBFC;} .st30{fill:#60534A;} .st31{fill:#BAB1AA;}
  </style>
    <path id="sky1" class="st0" d="M471 237c0 119.846-97.154 217-217 217S37 356.846 37 237c0-50.17 17.025-96.362 45.613-133.116C122.317 52.84 184.323 20 254 20c69.38 0 131.157 32.56 170.88 83.235C453.774 140.095 471 186.535 471 237z"/>
    <path id="sky2" class="st1" d="M254 363l-176-1s-41-46-42-127c-2-99 71-157 71-157s-7 115 149 115S400 77 400 77s74 66 71 160c-2.68 83.963-43 130-43 130l-174-4"/>
    <path id="sky3" class="st4" d="M46 169s71 151 205 151 210-150 210-150c32 104-24.667 191.667-24.667 191.667S270 434 78 361.667C9 267 46 169 46 169z"/>
    <path id="bigcloud" class="st2" d="M421 196C460 87 254 40 246 76c-3 31 12 39 24 63 25 69-78 18-111 1-13-10-56 33-52 42 7 17 103.636 3.384 188 9 66.754 4.443 123.35 23.553 126 5z"/>
    <path id="bigcloudshadow1" class="st3" d="M246 76c-10 36 138 88 138 88s-58 22 30 28c-28.017 4.123-121.146-3.87-140-22 9-31-44-68-28-94z"/>
    <path id="bigcloudshadow2" class="st3" d="M145 140.333S106 187 221 189.666C221 190 116 200 106 182c-8-14 39-41.667 39-41.667z"/>
    <path id="smallcloudshadow1" class="st5" d="M70 306c-7-2-30-23-21-37s57-24 62-17-15 30-11 37 19 11 25 11 11-7 17-6 12 8 6 12c-2 2-17.695-3.91-34-4-19.722-.11-40.168 5.095-44 4z"/>
    <path id="smallcloud1" class="st6" d="M49 269c-1.802 11.713 32.242 43.31 63 28 0 0-11-2-12-8s25-34 11-38c-40-8-61 13-62 18zM133 296.5s-5 6.5 15 9.5c1 0 5-7-1.5-10.5s-13.5 1-13.5 1z"/>
    <path id="smallcloudshadow2" class="st5" d="M460 285c1-12-20-36-37-32s-18 44-37 42-6-38-13-37-19 31-17 35c4 10 103 4 104-8z"/>
    <path id="smallcloud2" class="st6" d="M363.5 269.5s2.5 22.5 15 22C374 288 380 258 373 258s-9.5 11.5-9.5 11.5zM413.5 260s-9.5 18-3.5 26c8 10 46.5 2.5 46.5 2.5S471 278 446 260s-32.5 0-32.5 0z"/>
   <path class="st15" d="M24 362h458s-82 91-227 91-231-91-231-91z" id="groundplane"/>
  <g id="Layer_6">
    <path id="water" class="st28" d="M69 363h198s-43 7-75 9c-22 6 137 3 138 8s-65 2-60 6c19 10 143 16 142 20-40.454 7.395-167 19-207 8-9-4 3.965-6.897-1-11S43 386 43 386s-6-5 65-10c29-3 18-3-14-5-15 0-52 0-54-2s29-6 29-6z"/>
    <path id="waterreflection" class="st29" d="M118.333 375l157.333 13.333C359 403 461 401 388 409l-280-33 10.333-1zM121.333 372.333l199.667 10-41.333.667-155.167-9.25z"/>
<!--     <path class="st10" d="M352 94l-1 5 .125 5.75-.875-.5L350 95z"/> -->
      <path id="plateau" class="st22" d="M165 363s-14-21-15-37c-2-129 168-197 198-194 29 1 27 41 27 41s-25-3-26 31c-3 54 20 160 20 160l-204-1z"/>
    <path id="plateaudark" class="st25" d="M165 363s-16-26-2-56c2-11 3-35 3-35 6.622-11.515 17.062-18.18 25-27-1 8 3 70 3 70l9 22-6-21 4-1 5-22 20-36v-17l14-10s-1-14 2-19c5.9-7.084 8-21 8-21l8-7c-1.433-.172-8.508 14.698-6 28-1 14 2 17 2 17l-1 49 5 36-1-86c4.152.1 11.48-.798 11 0 12-1 26 40 39 40-3 12-2 24-2 24l10-20 3-20-12-12s4-21 0-35c6-11 14-15 14-15l5-44 4 22s21-17 29-11 14 17 14 17-16 6-20 18c-12 44 22 173 22 173l-206-1h-3z"/>
    <path id="bgplateauextradark" class="st27" d="M191 263.667L189 277l2 68-6 14v4.333l20.667.334L204 342l-10-27zM240 230l2 84-5-37-11-37zM305 291l-5.667 67-.333-72 8-19zM280 296l1 17 14 46-28 4 1-38 10-34zM253 277l5 36 1 48-26.333 2.667L246 330zM325 145l4 22s-2 61-2 60-2-24-2-24l-5-14 5-44z"/>
    <path id="house1" class="st12" d="M339 126l23 2-3 8h-21z"/>
    <path id="house2" class="st11" d="M332 137c-1-1-2-10-2-10l4-33 4 32h1l-1 10-6 1z"/>
    <path id="houseroof" class="st24" d="M338 126l26 3-8-21-22-15-6 35 2.063-.312L330 127l4-33z"/>
    <path id="chimney1" class="st9" d="M350.25 104.25L350 95l2-1 3 3-2 6-.375 2.875-2.375-1.625"/>
    <path id="chimney2" class="st8" d="M300.5 116l-4.5 23 4-13 3-3 1-4-3.5-3"/>
    <path id="chimneysmoke" class="st7" d="M352 98c.614.344 5.137-4.132 4-7-.865-2.18-3.84-1.547-5-4-.79-1.668-.16-3.542 1-7 1.196-3.564 2.105-4.098 2-6-.135-2.444-1.79-5.128-3-5-2.14.226-5.28 9.496-2 16 1.51 2.994 3.888 4.423 4 8 .09 2.9-1.384 4.785-1 5z"/>
    <path id="windows" class="st13" d="M333 114l-1 10 3-1-1-9zM345 132l-1-5 4 1-1 4h-2"/>
    <path id="treetrunks" class="st14" d="M433 307l2 15-6 25 11-10-3-15v-16zM148 272l2 15 4 11 2-8.667-5-7.333zM171 219l-3 21v18l7-13-3-8v-19zM182 222v12l3-4.667z"/>
    <path id="bgtrees" class="st16" d="M154.333 294.333L144 236l7 17 4-20 11 31-11.667 30.333M175 228l7-89 6 53 7-18 3 10 10-28 10 51-23 11.333zM298 137l9-62 3 47 2-18 5 35.667-7.333 1.333zM384 343l16-47 2 41 5-11 5 24h-31z"/>
    <path id="bigtree" class="st15" d="M412 327c15 5 48-12 48-12l-8-40-22-35-6-41-3 31 9 49-18 48z"/>
    <path id="logouter" class="st18" d="M376 340l21-5 19 5 7-20-10-24 14 23-2 20 5 1 33-21-6 20-11 5-14 12 20-11 1 9 3 2 2 7-35 3-21-4h-23z"/>
    <path id="loginner" class="st17" d="M462 321.5V352l-7-1 5 6-2 6-27-5v-11z"/>
    <path id="rockssmall" class="st19" d="M228 191v-16l8-11 6 3 4 13zM247 174l6-12 2 2 5 1z"/>
    <path id="rocktopshadow" class="st8" d="M305 110l2 5 14 6 2 7-33 21-2-45"/>
    <path id="rocktoplight" class="st19" d="M269 163l-2-20 7-7 14-32 12 9-10 34 13-29 12-1 8 11v12z"/>
    <path id="bgplateau" class="st20" d="M64 333s1-12 5-17 16-14 25-16 12-3 15 0-3 26 7 34c3 2 14-4 14-4l50 25-5.667 7.333H47.667S68 360 73 353c10-24-9-20-9-20z"/>
    <path id="bgplateaudark" class="st26" d="M64 333l20-15 4 12 4-10 6-6v12l5 3-13 21-10-3-8 7s6-13 3-17c-3.842-5.122-11-4-11-4z"/>
    <path id="bgplateautrees" class="st16" d="M104 363l4-17 6 13 9-41 7 36 6-18 8 28z"/>
    <path id="bgrocklight" class="st23" d="M147 344l6 4 2 6-11 4-8-2z"/>
    <path id="bgrockmid" class="st8" d="M141 362.5l-5-6.5 11-12 15 2 8 15-29 1.5"/>
    <path id="bgrockshadow" class="st21" d="M144 358l11-4 9 2 1 7-17.333-1z"/>  
    <path id="toptreetrunk" class="st14" d="M379 119l-5 15-8 10 3 8 7-15 3-14z"/>
    <path id="lefttree"class="st15" d="M140 280l17-10-6-17-11-57z"/>
    <path id="trees" class="st15" d="M370 117c12 4 14 34 14 34l16-98s-21 59-30 64zM162 236l19-26-7-16-2-76-6 59z"/>
    <path id="fgtrees" class="st16" d="M164 363l10-59 4 59zM242 363l10-46 4 16 13-79 7 107 18-63 11 65z"/>
    <path id="fgrock2light" class="st21" d="M237 359l3 11 11 2 47-13 16-30-6-16-10 5h-5l-53 38z"/>
    <path id="fgrocksextradark" class="st30" d="M349 301l-18 41 23-31 9-2zM251 372l10-12 21-6-11-1 32-21-.5 17 2.5 14z"/>
    <path id="fgrocksshadow2" class="st30" d="M271 353l-10 2-8-2 8 7 21-6z"/>
    <path id="fgrock1light" class="st31" d="M292 345l31-110 18-10 8 76-18 41 23-31 28 19 2 35-72 3-14-3z"/>
    <path id="fgrock1shadow" class="st8" d="M341 225l20 48 18 35 16 16-8 38-3 3-30-54 9-2-14-8z"/>
    <path id="fgrock1shadow2" class="st8" d="M292 345l20 23-14-3z"/>
</svg>

            
          
!
            
              svg {
  max-height: 800px;
}
            
          
!
            
              //defined animation timeline options
var tmax_opts = {
  delay: 0.3,
  //repeats infinitely
  repeat: -1,
  //between repeats, wait s
  epeatDelay: 0.5,
  //causes animation to alternate forwards and backwards
  yoyo: true
};
var tmax_t1 = new TimelineMax(tmax_opts),
    shapes = $('path'),
    stagger = 0.05,
    duration = 2;
var staggerFrom = {
  scale: 0,
  opacity: 0,
  transformOrigin: 'center center',
};
var staggerTo = {
  opacity: 1,
  scale: 1,
  ease: Elastic.easeInOut
};
//GSAP animation expression
tmax_t1.staggerFromTo(shapes, duration, staggerFrom, staggerTo, stagger, 0);

            
          
!
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