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="task">
<button class="pin">
<svg viewBox="0 0 18 18">
<path class="border" d="M14.8049 10.9883L15.3117 10.4354L15.3117 10.4354L14.8049 10.9883ZM13.6434 9.92354L13.1366 10.4764L13.1366 10.4764L13.6434 9.92354ZM14.0331 12.7609L14.0857 12.0128L14.0857 12.0128L14.0331 12.7609ZM10.7353 12.5777L10.763 11.8282L10.1199 11.8044L9.99873 12.4364L10.7353 12.5777ZM7.26468 12.5776L8.00126 12.4364L7.88007 11.8044L7.237 11.8282L7.26468 12.5776ZM3.96595 12.7609L3.91342 12.0128L3.91342 12.0128L3.96595 12.7609ZM3.19415 10.9883L3.70095 11.5411L3.70095 11.5411L3.19415 10.9883ZM4.3489 9.92976L4.85569 10.4826L4.85569 10.4826L4.3489 9.92976ZM5.1985 8.47405L5.93251 8.62809L5.93251 8.62809L5.1985 8.47405ZM5.49954 6.125L4.74958 6.13227L4.74958 6.13227L5.49954 6.125ZM5.11988 5.0575L4.48842 5.46217L4.48842 5.46217L5.11988 5.0575ZM5.84279 2.19815L5.73858 1.45543L5.73858 1.45543L5.84279 2.19815ZM12.2243 2.20784L12.3316 1.46556L12.3316 1.46556L12.2243 2.20784ZM12.9265 5.01489L13.5462 5.43732L13.5462 5.43732L12.9265 5.01489ZM12.8005 8.48335L13.5344 8.32877L13.5344 8.32877L12.8005 8.48335ZM15.3117 10.4354L14.1502 9.37068L13.1366 10.4764L14.2981 11.5411L15.3117 10.4354ZM13.9806 13.5091C15.6285 13.6248 16.5542 11.5743 15.3117 10.4354L14.2981 11.5411C14.3512 11.5898 14.371 11.6362 14.3783 11.6779C14.3866 11.7251 14.3811 11.7836 14.3553 11.8427C14.3038 11.9606 14.2075 12.0213 14.0857 12.0128L13.9806 13.5091ZM10.7076 13.3272C11.8043 13.3677 12.9626 13.4376 13.9806 13.5091L14.0857 12.0128C13.0583 11.9406 11.8822 11.8695 10.763 11.8282L10.7076 13.3272ZM9.99873 12.4364C9.94088 12.7381 9.7145 13.8782 9.40666 14.9346C9.25126 15.4678 9.08495 15.9448 8.92243 16.276C8.83963 16.4448 8.77625 16.5369 8.74149 16.576C8.69136 16.6324 8.7787 16.5 9 16.5V18C9.42347 18 9.71299 17.7408 9.86234 17.5729C10.0271 17.3877 10.1605 17.1581 10.269 16.9368C10.4893 16.488 10.6842 15.9122 10.8468 15.3542C11.1749 14.2282 11.4118 13.0321 11.4719 12.7189L9.99873 12.4364ZM9 16.5C9.2213 16.5 9.30864 16.6324 9.25851 16.576C9.22374 16.5369 9.16037 16.4447 9.07756 16.276C8.91504 15.9448 8.74873 15.4678 8.59333 14.9345C8.28548 13.8781 8.05911 12.738 8.00126 12.4364L6.5281 12.7189C6.58814 13.032 6.82507 14.2281 7.15323 15.3542C7.31583 15.9122 7.51071 16.488 7.73096 16.9368C7.83953 17.158 7.97293 17.3877 8.13765 17.5729C8.287 17.7408 8.57652 18 9 18V16.5ZM4.01848 13.5091C5.03673 13.4376 6.19538 13.3676 7.29236 13.3271L7.237 11.8282C6.11757 11.8695 4.94108 11.9406 3.91342 12.0128L4.01848 13.5091ZM2.68736 10.4354C1.44492 11.5743 2.37057 13.6248 4.01848 13.5091L3.91342 12.0128C3.79157 12.0213 3.69527 11.9606 3.64379 11.8427C3.61802 11.7836 3.61248 11.7251 3.62079 11.6779C3.62811 11.6362 3.64789 11.5898 3.70095 11.5411L2.68736 10.4354ZM3.84211 9.37689L2.68736 10.4354L3.70095 11.5411L4.85569 10.4826L3.84211 9.37689ZM4.46449 8.32001C4.3816 8.71499 4.16359 9.0822 3.84211 9.37689L4.85569 10.4826C5.38374 9.99858 5.7787 9.36098 5.93251 8.62809L4.46449 8.32001ZM4.74958 6.13227C4.75571 6.76462 4.60614 7.64502 4.46449 8.32001L5.93251 8.62809C6.07576 7.94551 6.25735 6.92653 6.24951 6.11773L4.74958 6.13227ZM4.48842 5.46217C4.67841 5.75864 4.74813 5.98287 4.74958 6.13227L6.24951 6.11773C6.24417 5.56707 6.01277 5.06079 5.75134 4.65284L4.48842 5.46217ZM5.73858 1.45543C5.25838 1.52281 4.837 1.70793 4.51241 2.01652C4.18835 2.32459 4.00469 2.71404 3.92975 3.11628C3.78406 3.89825 4.03633 4.7567 4.48842 5.46217L5.75134 4.65284C5.43762 4.16328 5.34855 3.69066 5.40438 3.39102C5.43019 3.25246 5.483 3.16346 5.54592 3.10364C5.60831 3.04433 5.72442 2.97211 5.947 2.94088L5.73858 1.45543ZM8.99954 1.25C7.68255 1.25 6.60695 1.33359 5.73858 1.45543L5.947 2.94088C6.74021 2.82959 7.74582 2.75 8.99954 2.75V1.25ZM12.3316 1.46556C11.4511 1.33825 10.3527 1.25 8.99954 1.25V2.75C10.2877 2.75 11.314 2.83402 12.117 2.95013L12.3316 1.46556ZM13.5462 5.43732C14.0191 4.74358 14.2759 3.89212 14.1282 3.11273C14.0523 2.7127 13.867 2.32772 13.5454 2.02344C13.2236 1.71889 12.8066 1.53423 12.3316 1.46556L12.117 2.95013C12.3354 2.9817 12.4514 3.05333 12.5145 3.11301C12.5779 3.17297 12.6294 3.26017 12.6544 3.39214C12.7084 3.67675 12.623 4.12856 12.3068 4.59245L13.5462 5.43732ZM13.2495 6.125C13.2495 5.99699 13.3216 5.7669 13.5462 5.43732L12.3068 4.59245C12.0226 5.00936 11.7495 5.5461 11.7495 6.125H13.2495ZM13.5344 8.32877C13.3969 7.67632 13.2495 6.80785 13.2495 6.125H11.7495C11.7495 6.97138 11.9251 7.96644 12.0666 8.63793L13.5344 8.32877ZM14.1502 9.37068C13.8318 9.07879 13.6161 8.71697 13.5344 8.32877L12.0666 8.63792C12.2199 9.36615 12.614 9.99736 13.1366 10.4764L14.1502 9.37068Z" />
<defs>
<clipPath id="pin-path-mask">
<circle class="circle" cx="9" cy="18" r="18" />
</clipPath>
</defs>
<path class="fill" clip-path="url(#pin-path-mask)" d="M8.99955 1.25C7.68255 1.25 6.60696 1.33359 5.73859 1.45543C5.25839 1.52281 4.837 1.70793 4.51241 2.01652C4.18836 2.32459 4.0047 2.71404 3.92976 3.11628C3.78407 3.89825 4.03634 4.7567 4.48843 5.46217C4.67841 5.75864 4.74814 5.98287 4.74959 6.13227C4.75572 6.76462 4.60615 7.64502 4.4645 8.32001C4.38161 8.71499 4.16359 9.0822 3.84212 9.37689L2.68737 10.4354C1.44493 11.5743 2.37058 13.6248 4.01848 13.5091C4.84187 13.4513 5.75706 13.3945 6.65721 13.3534C6.77003 13.8818 6.94289 14.6324 7.15324 15.3542C7.31584 15.9122 7.51071 16.488 7.73096 16.9368C7.83954 17.158 7.97294 17.3877 8.13766 17.5729C8.28701 17.7408 8.57653 18 9.00001 18C9.42348 18 9.713 17.7408 9.86235 17.5729C10.0271 17.3877 10.1605 17.1581 10.269 16.9368C10.4893 16.488 10.6842 15.9122 10.8468 15.3542C11.0571 14.6324 11.23 13.8818 11.3428 13.3535C12.2427 13.3945 13.1575 13.4513 13.9806 13.5091C15.6285 13.6248 16.5542 11.5743 15.3117 10.4354L14.1502 9.37068C13.8318 9.07879 13.6161 8.71697 13.5344 8.32877C13.3969 7.67632 13.2496 6.80785 13.2496 6.125C13.2496 5.99699 13.3216 5.7669 13.5462 5.43732C14.0191 4.74358 14.2759 3.89212 14.1282 3.11273C14.0523 2.7127 13.867 2.32772 13.5454 2.02344C13.2236 1.71889 12.8066 1.53423 12.3317 1.46556C11.4511 1.33825 10.3527 1.25 8.99955 1.25Z" />
</svg>
</button>
</div>
.task {
display: flex;
justify-content: flex-end;
width: 120px;
border-radius: 0 8px 8px 0;
margin-left: -72px;
background: linear-gradient(to right, #27272B, #2C2C31);
}
.pin {
--pin-color: #BABAC1;
--pin-fill: #6E7BF2;
--pin-fill-scale: 0;
--pin-y: 0px;
--pin-scale-x: 1;
--pin-scale-y: 1;
--pin-rotate: 0deg;
--pin-circle-opacity: 0;
--pin-circle-scale: 0;
-webkit-appearance: none;
outline: none;
border: none;
background: none;
padding: 12px;
margin: 0;
position: relative;
cursor: pointer;
&.active {
--pin-fill-scale: 1;
}
svg {
display: block;
width: 18px;
height: 18px;
position: relative;
z-index: 1;
pointer-events: none;
fill: var(--pin-color);
transform: translateY(var(--pin-y)) scale(var(--pin-scale-x), var(--pin-scale-y)) rotate(var(--pin-rotate));
transform-origin: 50% 17px;
.circle {
transform: scale(var(--pin-fill-scale));
transform-origin: 50% 100%;
}
.fill {
fill: var(--pin-fill);
}
}
&:before {
content: '';
display: block;
width: 24px;
height: 12px;
border-radius: 50%;
position: absolute;
bottom: 6px;
left: 9px;
opacity: var(--pin-circle-opacity);
background: var(--pin-fill);
transform: scale(var(--pin-circle-scale)) translateZ(0);
}
}
body {
min-height: 100vh;
display: flex;
justify-content: center;
align-items: center;
background: #27272b;
}
const { to, fromTo } = gsap
document.querySelectorAll('.pin').forEach(pin => {
let { classList } = pin
pin.addEventListener('mouseenter', e => {
if(classList.contains('animating')) {
return
}
to(pin, {
keyframes: [{
'--pin-rotate': e.offsetX > 21 ? '-4deg' : '4deg',
duration: .1
}, {
'--pin-rotate': e.offsetX > 21 ? '4deg' : '-4deg',
duration: .1
}, {
'--pin-rotate': '0deg',
duration: .1
}],
})
})
pin.addEventListener('click', e => {
if(classList.contains('animating')) {
return
}
classList.add('animating')
if(classList.contains('active')) {
to(pin, {
keyframes: [{
'--pin-scale-y': .9,
'--pin-fill-scale': 0,
duration: .15
}, {
'--pin-scale-y': 1,
duration: .25
}],
onComplete() {
classList.remove('active', 'animating')
}
})
return
}
to(pin, {
'--pin-circle-scale': 1,
duration: .45,
delay: .15,
clearProps: true
})
to(pin, {
keyframes: [{
'--pin-circle-opacity': .35,
duration: .2,
delay: .15,
}, {
'--pin-circle-opacity': 0,
duration: .3
}]
})
to(pin, {
keyframes: [{
'--pin-y': '-4px',
'--pin-scale-x': .925,
duration: .1
}, {
'--pin-y': '1px',
'--pin-scale-x': 1,
'--pin-scale-y': .8,
duration: .1,
delay: .05
}, {
'--pin-y': '0px',
'--pin-scale-y': 1,
'--pin-fill-scale': 1,
duration: .2
}],
onComplete() {
classList.add('active')
classList.remove('animating')
}
})
})
})
Also see: Tab Triggers