HTML preprocessors can make writing HTML more powerful or convenient. For instance, Markdown is designed to be easier to write and read for text documents and you could write a loop in Pug.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. So you don't have access to higher-up elements like the <html>
tag. If you want to add classes there that can affect the whole document, this is the place to do it.
In CodePen, whatever you write in the HTML editor is what goes within the <body>
tags in a basic HTML5 template. If you need things in the <head>
of the document, put that code here.
The resource you are linking to is using the 'http' protocol, which may not work when the browser is using https.
CSS preprocessors help make authoring CSS easier. All of them offer things like variables and mixins to provide convenient abstractions.
It's a common practice to apply CSS to a page that styles elements such that they are consistent across all browsers. We offer two of the most popular choices: normalize.css and a reset. Or, choose Neither and nothing will be applied.
To get the best cross-browser support, it is a common practice to apply vendor prefixes to CSS properties and values that require them to work. For instance -webkit-
or -moz-
.
We offer two popular choices: Autoprefixer (which processes your CSS server-side) and -prefix-free (which applies prefixes via a script, client-side).
Any URLs added here will be added as <link>
s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.
You can apply CSS to your Pen from any stylesheet on the web. Just put a URL to it here and we'll apply it, in the order you have them, before the CSS in the Pen itself.
You can also link to another Pen here (use the .css
URL Extension) and we'll pull the CSS from that Pen and include it. If it's using a matching preprocessor, use the appropriate URL Extension and we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
JavaScript preprocessors can help make authoring JavaScript easier and more convenient.
Babel includes JSX processing.
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.
You can apply a script from anywhere on the web to your Pen. Just put a URL to it here and we'll add it, in the order you have them, before the JavaScript in the Pen itself.
If the script you link to has the file extension of a preprocessor, we'll attempt to process it before applying.
You can also link to another Pen here, and we'll pull the JavaScript from that Pen and include it. If it's using a matching preprocessor, we'll combine the code before preprocessing, so you can use the linked Pen as a true dependency.
Search for and use JavaScript packages from npm here. By selecting a package, an import
statement will be added to the top of the JavaScript editor for this package.
Using packages here is powered by esm.sh, which makes packages from npm not only available on a CDN, but prepares them for native JavaScript ESM usage.
All packages are different, so refer to their docs for how they work.
If you're using React / ReactDOM, make sure to turn on Babel for the JSX processing.
If active, Pens will autosave every 30 seconds after being saved once.
If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.
If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.
Visit your global Editor Settings.
<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 0.5s
repeatDelay: 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);
Also see: Tab Triggers