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.
<div class="svgWrapper">
<svg viewBox="0 0 485 97">
<g stroke="none" stroke-width="1" fill-rule="evenodd">
<path class="path", d="M2.53316 9.04334C3.53822 5.95764 5.95764 3.53822 9.04334 2.53316C19.413 -0.844388 30.587 -0.844388 40.9567 2.53316C44.0424 3.53822 46.4618 5.95764 47.4668 9.04334C50.8444 19.413 50.8444 30.587 47.4668 40.9567C46.4618 44.0424 44.0424 46.4618 40.9567 47.4668C30.587 50.8444 19.413 50.8444 9.04334 47.4668C5.95764 46.4618 3.53822 44.0424 2.53316 40.9567C-0.844388 30.587 -0.844388 19.413 2.53316 9.04334Z" fill="#0055DC"/>
<path class="path", d="M20.8529 11.638C22.6842 8.12068 27.3158 8.12068 29.1471 11.638L40.3666 33.1864C41.2778 34.9366 41.1513 36.9003 40.3353 38.4213C38.7515 41.3733 34.6787 40.1585 31.7386 38.5527L29.7933 37.4903C26.806 35.8587 23.194 35.8587 20.2067 37.4903L18.2614 38.5527C15.3213 40.1585 11.2485 41.3733 9.66473 38.4213C8.84871 36.9003 8.72217 34.9366 9.63342 33.1864L20.8529 11.638Z" fill="url(#paint0_linear)"/>
<path class="path", d="M64 26.9412C64 23.845 64.6379 21.1033 65.9137 18.7159C67.227 16.3285 68.9906 14.4821 71.2044 13.1765C73.4558 11.8336 75.9324 11.1621 78.634 11.1621C81.073 11.1621 83.1931 11.6471 84.9942 12.6169C86.8329 13.5495 88.2963 14.7245 89.3844 16.142V11.6657H95.8572V42.4964H89.3844V37.9082C88.2963 39.363 86.8141 40.5753 84.9379 41.5452C83.0618 42.5151 80.923 43 78.5215 43C75.8573 43 73.4183 42.3286 71.2044 40.9857C68.9906 39.6055 67.227 37.703 65.9137 35.2783C64.6379 32.8164 64 30.0373 64 26.9412ZM89.3844 27.0531C89.3844 24.9268 88.9342 23.0803 88.0336 21.5136C87.1706 19.9469 86.0261 18.7532 84.6002 17.9326C83.1743 17.1119 81.6359 16.7016 79.9849 16.7016C78.3339 16.7016 76.7954 17.1119 75.3695 17.9326C73.9436 18.7159 72.7804 19.891 71.8799 21.4577C71.0168 22.9871 70.5853 24.8149 70.5853 26.9412C70.5853 29.0674 71.0168 30.9326 71.8799 32.5366C72.7804 34.1406 73.9436 35.3716 75.3695 36.2296C76.8329 37.0502 78.3714 37.4605 79.9849 37.4605C81.6359 37.4605 83.1743 37.0502 84.6002 36.2296C86.0261 35.4089 87.1706 34.2152 88.0336 32.6485C88.9342 31.0445 89.3844 29.1793 89.3844 27.0531Z" fill="black"/>
<path class="path", d="M111.771 16.8694V33.9354C111.771 35.0918 112.033 35.9311 112.559 36.4534C113.122 36.9383 114.06 37.1808 115.373 37.1808H119.313V42.4964H114.247C111.358 42.4964 109.144 41.825 107.606 40.4821C106.067 39.1392 105.298 36.957 105.298 33.9354V16.8694H101.64V11.6657H105.298V4H111.771V11.6657H119.313V16.8694H111.771Z" fill="black"/>
<path class="path", d="M123.088 26.9412C123.088 23.845 123.726 21.1033 125.002 18.7159C126.315 16.3285 128.079 14.4821 130.292 13.1765C132.544 11.8336 135.02 11.1621 137.722 11.1621C140.161 11.1621 142.281 11.6471 144.082 12.6169C145.921 13.5495 147.384 14.7245 148.472 16.142V11.6657H154.945V42.4964H148.472V37.9082C147.384 39.363 145.902 40.5753 144.026 41.5452C142.15 42.5151 140.011 43 137.609 43C134.945 43 132.506 42.3286 130.292 40.9857C128.079 39.6055 126.315 37.703 125.002 35.2783C123.726 32.8164 123.088 30.0373 123.088 26.9412ZM148.472 27.0531C148.472 24.9268 148.022 23.0803 147.122 21.5136C146.259 19.9469 145.114 18.7532 143.688 17.9326C142.262 17.1119 140.724 16.7016 139.073 16.7016C137.422 16.7016 135.883 17.1119 134.458 17.9326C133.032 18.7159 131.868 19.891 130.968 21.4577C130.105 22.9871 129.673 24.8149 129.673 26.9412C129.673 29.0674 130.105 30.9326 130.968 32.5366C131.868 34.1406 133.032 35.3716 134.458 36.2296C135.921 37.0502 137.459 37.4605 139.073 37.4605C140.724 37.4605 142.262 37.0502 143.688 36.2296C145.114 35.4089 146.259 34.2152 147.122 32.6485C148.022 31.0445 148.472 29.1793 148.472 27.0531Z" fill="black"/>
<path class="path", d="M170.859 16.8694V33.9354C170.859 35.0918 171.121 35.9311 171.647 36.4534C172.21 36.9383 173.148 37.1808 174.461 37.1808H178.401V42.4964H173.335C170.446 42.4964 168.232 41.825 166.694 40.4821C165.155 39.1392 164.386 36.957 164.386 33.9354V16.8694H160.728V11.6657H164.386V4H170.859V11.6657H178.401V16.8694H170.859Z" fill="black"/>
<path class="path", d="M212.401 11.6657V42.4964H205.984V38.8594C204.971 40.1277 203.639 41.1349 201.988 41.8809C200.375 42.5897 198.649 42.944 196.81 42.944C194.371 42.944 192.176 42.4405 190.225 41.4333C188.311 40.4261 186.791 38.934 185.666 36.957C184.578 34.9799 184.033 32.5925 184.033 29.7948V11.6657H190.394V28.8436C190.394 31.604 191.088 33.7303 192.476 35.2224C193.865 36.6772 195.759 37.4046 198.161 37.4046C200.562 37.4046 202.457 36.6772 203.846 35.2224C205.272 33.7303 205.984 31.604 205.984 28.8436V11.6657H212.401Z" fill="black"/>
<path class="path", d="M232.124 43C229.685 43 227.49 42.571 225.539 41.7131C223.625 40.8178 222.105 39.6241 220.98 38.132C219.854 36.6026 219.253 34.9053 219.178 33.0402H225.82C225.933 34.3458 226.552 35.4462 227.677 36.3415C228.841 37.1994 230.285 37.6284 232.011 37.6284C233.812 37.6284 235.201 37.2927 236.176 36.6212C237.19 35.9125 237.696 35.0172 237.696 33.9354C237.696 32.7791 237.133 31.9211 236.008 31.3616C234.919 30.802 233.175 30.1865 230.773 29.5151C228.447 28.8809 226.552 28.2654 225.088 27.6686C223.625 27.0717 222.349 26.1578 221.261 24.9268C220.21 23.6958 219.685 22.0732 219.685 20.0588C219.685 18.4175 220.173 16.9254 221.148 15.5825C222.124 14.2023 223.512 13.1205 225.313 12.3372C227.152 11.5538 229.253 11.1621 231.617 11.1621C235.145 11.1621 237.978 12.0574 240.116 13.8479C242.293 15.6011 243.456 18.0072 243.606 21.066H237.19C237.077 19.6858 236.514 18.5854 235.501 17.7647C234.488 16.944 233.118 16.5337 231.392 16.5337C229.704 16.5337 228.409 16.8508 227.509 17.4849C226.608 18.1191 226.158 18.9584 226.158 20.0029C226.158 20.8235 226.458 21.5136 227.058 22.0732C227.659 22.6327 228.39 23.0803 229.253 23.4161C230.116 23.7145 231.392 24.1062 233.081 24.5911C235.332 25.1879 237.171 25.8034 238.597 26.4376C240.06 27.0344 241.317 27.9297 242.368 29.1234C243.418 30.3171 243.962 31.9024 244 33.8795C244 35.6327 243.512 37.1994 242.537 38.5796C241.561 39.9598 240.173 41.0416 238.372 41.825C236.608 42.6083 234.525 43 232.124 43Z" fill="black"/>
</g>
</svg>
</div>
body {
background: #00467F;
background: -webkit-linear-gradient(to right, #A5CC82, #00467F);
background: linear-gradient(to right, #FFEFBA, #FFFFFF );
}
.svgWrapper {
position: fixed;
top: 65%;
left: 70%;
transform: translate(-50%, -50%);
svg {
width: 60rem;
}
.path {
stroke: #000;
fill: transparent;
stroke-dasharray: 500;
stroke-dashoffset: -500;
animation: animate 5s forwards infinite;
}
}
@keyframes animate {
100% {
stroke-dashoffset: 500;
}
}
Also see: Tab Triggers