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 id="normal" viewBox="0 0 640 640" width="320" height="320" xmlns="http://www.w3.org/2000/svg" >
<defs>
<ellipse id="kage" style="fill: rgb(177, 173, 173);" transform="matrix(0.023593001067638394, 0.9997220635414122, -1.0001959800720215, 0.0035110001917928453, 1441.7421874999998, 407.8441162109375)" cx="124.259" cy="1118.634" rx="46.193" ry="146.73"/>
<path id="body" style="fill: rgba(0, 149, 255, 0.8);">
<animate dur="5s" repeatCount="indefinite" attributeName="d" additive="sum" attributeType="XML" values="
M 321.564 551.833 C 198.774 550.303 116.813 478.299 124.221 406.418 C 132.427 326.791 136.663 332.966 172.951 297.524 C 206.533 264.725 241.277 263.319 257.606 245.37 C 275.718 225.461 292.504 154.013 306.814 127.853 C 311.774 118.803 324.654 117.183 332.254 130.403 C 341.044 145.693 345.283 202.8 376.423 240.567 C 401.366 270.818 416.495 257.192 460.623 296.894 C 490.033 323.354 509.829 343.557 511.448 411.047 C 513.454 494.677 444.344 553.353 321.564 551.833;M 319.648 551.84 C 189.921 550.5 103.688 487.466 111.879 424.54 C 120.953 354.833 125.397 360.239 163.918 329.212 C 199.563 300.5 236.282 299.268 253.626 283.555 C 272.862 266.126 290.959 203.579 306.212 180.679 C 311.497 172.756 325.114 171.338 333.077 182.911 C 342.286 196.295 346.476 246.289 379.186 279.351 C 405.387 305.834 421.441 293.905 467.862 328.661 C 498.803 351.824 519.615 369.51 520.984 428.593 C 522.68 501.804 449.365 553.171 319.648 551.84;M 321.564 551.833 C 198.774 550.303 116.813 478.299 124.221 406.418 C 132.427 326.791 136.663 332.966 172.951 297.524 C 206.533 264.725 241.277 263.319 257.606 245.37 C 275.718 225.461 292.504 154.013 306.814 127.853 C 311.774 118.803 324.654 117.183 332.254 130.403 C 341.044 145.693 345.283 202.8 376.423 240.567 C 401.366 270.818 416.495 257.192 460.623 296.894 C 490.033 323.354 509.829 343.557 511.448 411.047 C 513.454 494.677 444.344 553.353 321.564 551.833;">
</animate>
</path>
<path id="eyeL1" d="M 234.764 406.444 C 224.354 387.604 231.704 364.154 251.184 354.064 C 270.664 343.974 294.904 351.064 305.314 369.914 C 315.724 388.754 308.374 412.204 288.894 422.294 C 269.404 432.384 245.174 425.294 234.764 406.444 Z" style="fill: rgb(255, 255, 255);"/>
<path id="eyeR1" d="M 333.888 407.914 C 322.908 389.524 329.028 365.784 347.558 354.884 C 366.088 343.994 390.008 350.064 400.988 368.454 C 411.968 386.834 405.848 410.574 387.318 421.474 C 368.788 432.374 344.868 426.294 333.888 407.914 Z" style="fill: rgb(251, 251, 251);"/>
<path id="eyeL2" d="M 254.388 400.726 C 247.228 392.766 247.868 380.506 255.828 373.346 C 263.798 366.176 276.058 366.826 283.218 374.786 C 290.388 382.746 289.738 395.006 281.778 402.166 C 273.818 409.336 261.558 408.686 254.388 400.726 Z"/>
<path id="eyeR2" d="M 354.598 402.593 C 346.638 395.423 345.998 383.163 353.158 375.203 C 360.328 367.243 372.588 366.603 380.548 373.763 C 388.508 380.933 389.148 393.193 381.988 401.153 C 374.818 409.113 362.558 409.753 354.598 402.593 Z"/>
<path id="mouth" d="M 242.618 450.713 C 261.081 455.473 267.717 460.205 293.277 463.652 C 318.827 467.107 310.918 468.077 342.698 464.923 C 374.487 461.768 376.852 453.161 397.238 447.522 C 417.624 441.891 434.886 464.98 372.573 481.624 C 345.154 488.946 306.855 489.781 274.633 483.03 C 242.42 476.278 237.545 473.801 227.225 467.649 C 216.915 461.504 224.146 445.952 242.618 450.713 Z" style="fill: rgba(255, 0, 0, 0.7);"/>
</defs>
<a xlink:href="https://pastel.repop.jp/">
<g>
<use xlink:href="#kage"></use>
<use xlink:href="#body"></use>
<g>
<use xlink:href="#eyeL1"></use>
<use xlink:href="#eyeR1"></use>
<use xlink:href="#eyeL2"></use>
<use xlink:href="#eyeR2"></use>
<use xlink:href="#mouth"></use>
<animateTransform attributeName="transform" attributeType="XML" type="translate" dur="2s" repeatCount="indefinite" values="0 0;0 10;0 0" />
</g>
</g>
</a>
</svg>
Also see: Tab Triggers