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="container">
<input id="heart-checkbox" class="heart-checkbox" type="checkbox"></input>
<label for="heart-checkbox">
<svg class="heart-icon" viewBox="0 0 256 256" xmlns="http://www.w3.org/2000/svg">
<g id="heart-outline" class="heart-icon-item">
<mask id="heart-outline-mask" fill="white">
<path d="M221.102 145.279C244.534 121.848 244.534 83.8579 221.102 60.4264C197.671 36.995 159.681 36.9949 136.25 60.4264L127.764 68.9116L119.279 60.4264C95.8477 36.995 57.8578 36.995 34.4264 60.4264C10.9949 83.8579 10.9949 121.848 34.4264 145.279L48.539 159.392C48.5488 159.402 48.5585 159.412 48.5683 159.421L122.107 232.96C122.498 233.351 122.919 233.693 123.362 233.986C126.253 235.894 130.111 235.73 132.835 233.492C133.037 233.326 133.233 233.149 133.421 232.96L206.96 159.421C206.971 159.411 206.981 159.4 206.992 159.39L221.102 145.279Z" />
</mask>
<path d="M221.102 145.279L232.416 156.593L232.416 156.593L221.102 145.279ZM136.25 60.4264L147.563 71.7401L147.563 71.7401L136.25 60.4264ZM127.764 68.9116L116.451 80.2253L127.764 91.539L139.078 80.2253L127.764 68.9116ZM119.279 60.4264L130.593 49.1127L119.279 60.4264ZM34.4264 60.4264L23.1127 49.1127L34.4264 60.4264ZM34.4264 145.279L45.7401 133.966L45.7401 133.966L34.4264 145.279ZM48.539 159.392L59.911 148.137L59.8819 148.107L59.8527 148.078L48.539 159.392ZM48.5683 159.421L59.8821 148.108L59.8821 148.108L48.5683 159.421ZM122.107 232.96L133.421 221.647L133.421 221.647L122.107 232.96ZM123.362 233.986L132.178 220.633L132.178 220.633L123.362 233.986ZM132.835 233.492L122.68 221.128L122.68 221.128L132.835 233.492ZM133.421 232.96L144.735 244.274L144.735 244.274L133.421 232.96ZM206.96 159.421L195.651 148.104L195.647 148.108L206.96 159.421ZM206.992 159.39L195.678 148.076L195.647 148.107L195.616 148.138L206.992 159.39ZM209.789 71.7401C226.972 88.9232 226.972 116.782 209.789 133.966L232.416 156.593C262.096 126.913 262.096 78.7925 232.416 49.1127L209.789 71.7401ZM147.563 71.7401C164.746 54.557 192.606 54.557 209.789 71.7401L232.416 49.1127C202.736 19.4329 154.616 19.4328 124.936 49.1127L147.563 71.7401ZM139.078 80.2253L147.563 71.7401L124.936 49.1127L116.451 57.5979L139.078 80.2253ZM107.965 71.7401L116.451 80.2253L139.078 57.5979L130.593 49.1127L107.965 71.7401ZM45.7401 71.7401C62.9232 54.5571 90.7824 54.5571 107.965 71.7401L130.593 49.1127C100.913 19.4329 52.7925 19.4329 23.1127 49.1127L45.7401 71.7401ZM45.7401 133.966C28.557 116.782 28.557 88.9232 45.7401 71.7401L23.1127 49.1127C-6.56718 78.7925 -6.56718 126.913 23.1127 156.593L45.7401 133.966ZM59.8527 148.078L45.7401 133.966L23.1127 156.593L37.2253 170.706L59.8527 148.078ZM59.8821 148.108C59.8906 148.116 59.9003 148.126 59.911 148.137L37.1671 170.647C37.1973 170.678 37.2265 170.707 37.2546 170.735L59.8821 148.108ZM133.421 221.647L59.8821 148.108L37.2546 170.735L110.794 244.274L133.421 221.647ZM132.178 220.633C132.629 220.931 133.046 221.271 133.421 221.647L110.794 244.274C111.95 245.431 113.209 246.455 114.547 247.338L132.178 220.633ZM122.68 221.128C125.433 218.866 129.273 218.715 132.178 220.633L114.547 247.338C123.233 253.073 134.788 252.594 142.99 245.856L122.68 221.128ZM122.108 221.647C122.288 221.466 122.479 221.293 122.68 221.128L142.99 245.856C143.595 245.359 144.177 244.832 144.735 244.274L122.108 221.647ZM195.647 148.108L122.107 221.647L144.735 244.274L218.274 170.735L195.647 148.108ZM195.616 148.138C195.622 148.133 195.634 148.12 195.651 148.104L218.27 170.739C218.308 170.702 218.341 170.668 218.367 170.641L195.616 148.138ZM209.789 133.966L195.678 148.076L218.305 170.704L232.416 156.593L209.789 133.966Z" mask="url(#heart-outline-mask)" />
<path id="heart-full" class="heart-icon-item" d="M221.102 145.279C244.534 121.848 244.534 83.8579 221.102 60.4264C197.671 36.995 159.681 36.995 136.25 60.4264L127.764 68.9116L119.279 60.4264C95.8477 36.995 57.8578 36.995 34.4264 60.4264C10.9949 83.8579 10.9949 121.848 34.4264 145.279L48.539 159.392C48.5488 159.402 48.5585 159.412 48.5683 159.421L122.107 232.96C122.498 233.351 122.919 233.693 123.362 233.986C126.253 235.894 130.111 235.73 132.835 233.492C133.037 233.326 133.233 233.149 133.421 232.96L206.96 159.421C206.971 159.411 206.981 159.4 206.992 159.39L221.102 145.279Z" />
</g>
</svg>
</label>
</div>
.heart {
&-icon {
width: 256px;
height: 256px;
&-item {
transform-origin: center;
fill: #fff;
}
#heart-full {
transform: scale(0);
}
}
&-checkbox {
display: none;
&:checked + label #heart-full {
transform: scale(1);
animation-duration: 0.3s;
animation-name: grow;
}
}
}
@keyframes grow {
0% {
transform: scale(0);
}
80% {
transform: scale(1.1);
}
100% {
transform: scale(1);
}
}
.container {
position: absolute;
left: 50%;
top: 50%;
transform: translate(-50%, -50%);
padding: 50px;
border-radius: 50px;
background-color: #5a5f73;
}
body,
html {
background-color: #1d1e22;
}
Also see: Tab Triggers