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.
#app
@import url('https://fonts.googleapis.com/css?family=Roboto+Mono&display=swap');
* {
box-sizing: border-box;
}
:root {
--light: 5;
}
body {
background: 'hsl(0, 0%, %s)' % (calc(var(--light) * 1%));
font-family: 'Roboto Mono', monospace;
}
@media(prefers-color-scheme: dark) {
:root {
--light: 5;
}
}
@media(prefers-color-scheme: light) {
:root {
--light: 95;
}
}
h1 {
margin: 0;
}
a {
color: 'hsl(0, 0%, %s)' % calc((100 - var(--light)) * 1%);
font-weight: bold;
}
#app {
display: flex;
align-items: center;
justify-content: center;
min-height: 100vh;
}
.glitchy-text {
color: 'hsl(0, 0%, %s)' % calc((100 - var(--light, 95)) * 1%);
display: inline-block;
position: relative;
}
.glitchy-text__char--readable {
opacity: 0;
position: absolute;
}
@keyframes glitch-switch {
0% {
content: var(--char-0);
}
10% {
content: var(--char-1);
}
20% {
content: var(--char-2);
}
30% {
content: var(--char-3);
}
40% {
content: var(--char-4);
}
50% {
content: var(--char-5);
}
60% {
content: var(--char-6);
}
70% {
content: var(--char-7);
}
80% {
content: var(--char-8);
}
90% {
content: var(--char-9);
}
100% {
content: var(--char-0);
}
}
.glitchy-text__char {
color: transparent;
position: relative;
}
.glitchy-text__char:after {
--txt: attr(data-char);
animation-duration: 0.2s;
animation-delay: 0.2s;
animation-fill-mode: backwards;
animation-timing-function: steps(1);
animation-iteration-count: var(--count);
animation-name: glitch-switch;
color: 'hsl(0, 0%, %s)' % calc((100 - var(--light, 95)) * 1%);
transition: color 0.2s ease 0s;
position: absolute;
content: var(--txt);
left: 0;
top: 0;
}
.bear__shades {
opacity: var(--bear-shades);
}
.bear__tear-stream {
fill: 'hsla(200, 100%, 75%, %s)' % var(--bear-tears, 0);
}
.bear__brows {
stroke: 'hsla(0, 0%, 0%, %s)' % var(--bear-brows, 0);
}
.bear__eye {
fill: 'hsla(0, 0%, 0%, %s)' % var(--bear-eyes, 0);
}
.bear-logo {
grid-row: span 2;
position: relative;
max-width: 400px;
object-fit: contain;
height: 6rem;
width: 6rem;
}
.bear__eye--teary {
fill: 'hsla(200, 100%, 75%, %s)' % calc(var(--bear-tears, 0) - 0.5);
}
@media (min-width: 768px) {
.bear-logo {
height: 12rem;
width: 12rem;
}
}
.return-link:hover ~ .bear-logo--tears {
--bear-brows: 0;
--bear-tears: 0;
}
.bear-logo--tears {
--bear-shades: 0;
--bear-brows: 1;
--bear-tears: 0.75;
--bear-eyes: 1;
}
.bear-logo--tears path,
.bear-logo--tears circle,
.bear-logo--tears ellipse {
transition: fill .2s ease 0s, transform .2s ease 0s;
}
.return-link:hover ~ .bear-logo--tears .bear__eye {
transform: scaleY(1);
fill: 'hsla(0, 100%, 0%, %s)' % var(--bear-eyes);
}
.bear-logo--tears .bear__eye {
transform: scaleY(0.25);
transform-origin: 97px 894px;
fill: 'hsla(200, 100%, 75%, %s)' % var(--bear-eyes);
}
.bear-logo--tears .bear__eye--right {
transform-origin: 201px 894px;
}
/* Handle mousemove translation of characters */
/* Logo */
.bear-logo--tears {
--scaleX: -50;
--scaleY: -50;
}
/* 404 */
.four-oh-four__code span:nth-of-type(2) {
--scaleX: 30;
--scaleY: -20;
}
.four-oh-four__code span:nth-of-type(3) {
--scaleX: -20;
--scaleY: 50;
}
.four-oh-four__code span:nth-of-type(4) {
--scaleX: -30;
--scaleY: 40;
}
/* Not found */
.four-oh-four__code-message span:nth-of-type(2) {
--scaleX: 20;
--scaleY: 10;
}
.four-oh-four__code-message span:nth-of-type(3) {
--scaleX: 5;
--scaleY: -10;
}
.four-oh-four__code-message span:nth-of-type(4) {
--scaleX: 40;
--scaleY: -30;
}
.four-oh-four__code-message span:nth-of-type(6) {
--scaleX: 50;
--scaleY: 50;
}
.four-oh-four__code-message span:nth-of-type(7) {
--scaleX: 0;
--scaleY: -15;
}
.four-oh-four__code-message span:nth-of-type(8) {
--scaleX: 35;
--scaleY: 10;
}
.four-oh-four__code-message span:nth-of-type(9) {
--scaleX: -40;
--scaleY: 25;
}
.four-oh-four__code-message span:nth-of-type(10) {
--scaleX: 50;
--scaleY: -25;
}
.bear-logo,
.four-oh-four__code span:nth-of-type(2):after,
.four-oh-four__code span:nth-of-type(3):after,
.four-oh-four__code span:nth-of-type(4):after,
.four-oh-four__code-message span:nth-of-type(2):after,
.four-oh-four__code-message span:nth-of-type(3):after,
.four-oh-four__code-message span:nth-of-type(4):after,
.four-oh-four__code-message span:nth-of-type(6):after,
.four-oh-four__code-message span:nth-of-type(7):after,
.four-oh-four__code-message span:nth-of-type(8):after,
.four-oh-four__code-message span:nth-of-type(9):after,
.four-oh-four__code-message span:nth-of-type(10):after {
--translateX: calc((var(--X)) * var(--scaleX) * 1px);
--translateY: calc((var(--Y)) * var(--scaleY) * 1px);
transform: translate(var(--translateX), var(--translateY));
}
const {
React: { useEffect },
ReactDOM: { render },
styled: { default: styled },
} = window
const GLITCH_CHARS = '`¡™£¢∞§¶•ªº–≠åß∂ƒ©˙∆˚¬…æ≈ç√∫˜µ≤≥÷/?░▒▓<>/'.split('')
const ReadableChar = styled.span``
const GlitchyChar = styled.span``
/**
* A glitchy text reveal title
*/
const GlitchyText = ({ children, ...props }) => {
return (
<h1 {...props} className={`glitchy-text ${props.className}`}>
<ReadableChar className="glitchy-text__char--readable">
{children}
</ReadableChar>
{children.split('').map((char, idx) => {
const charStyle = {
'--count': Math.random() * 5 + 1,
}
for (let i = 0; i < 10; i++) {
charStyle[`--char-${i}`] = `"${
GLITCH_CHARS[Math.floor(Math.random() * GLITCH_CHARS.length)]
}"`
}
return (
<GlitchyChar
className="glitchy-text__char"
aria-hidden={true}
data-char={char}
key={`glitch-char--${idx}`}
style={charStyle}>
{char}
</GlitchyChar>
)
})}
</h1>
)
}
const Logo = ({ className }) => {
return (
<svg
className={`bear-logo ${className}`}
viewBox="0 0 300 300"
xmlns="http://www.w3.org/2000/svg">
<g transform="matrix(1.34105 0 0 1.34105 -51.157 -1049.694)">
<path
d="M242.822 893.869c0 61.251-41.365 106.284-94.67 106.284-53.306 0-90.974-45.033-90.974-106.284 0-61.252 37.668-85.951 90.973-85.951 53.306 0 94.67 24.699 94.67 85.95z"
fill="#803300"
/>
<path
d="M211.925 958.105c0 19.907-28.138 38.819-62.85 38.819-34.71 0-61-18.912-61-38.82 0-19.907 26.29-33.273 61-33.273 34.712 0 62.85 13.366 62.85 33.274z"
fill="#e9c6af"
/>
<path d="M179.114 931.763c0 7.657-19.04 24.493-30.27 24.493s-32.117-16.836-32.117-24.493 20.888-12.477 32.118-12.477 30.27 4.82 30.27 12.477z" />
<ellipse
ry="23.111"
rx="23.762"
cy="827.682"
cx="68.304"
fill="#803300"
/>
<path
d="M84.784 826.317a16.549 16.095 0 00-16.48-14.731 16.549 16.095 0 00-16.548 16.095 16.549 16.095 0 0016.548 16.096 16.549 16.095 0 001.132-.039c.815-1.337 1.582-2.727 2.471-3.983a65.703 65.703 0 015.055-6.283 65.597 65.597 0 015.713-5.548c.668-.576 1.417-1.058 2.109-1.607z"
fill="#e9c6af"
/>
<ellipse
transform="scale(-1 1)"
cx="-231.243"
cy="827.682"
rx="23.762"
ry="23.111"
fill="#803300"
/>
<path
d="M214.764 826.317a16.549 16.095 0 0116.48-14.731 16.549 16.095 0 0116.548 16.095 16.549 16.095 0 01-16.549 16.096 16.549 16.095 0 01-1.131-.039c-.816-1.337-1.582-2.727-2.472-3.983a65.703 65.703 0 00-5.055-6.283 65.597 65.597 0 00-5.712-5.548c-.67-.576-1.418-1.058-2.11-1.607z"
fill="#e9c6af"
/>
<path
d="M147.731 815.358c-13.396 0-26.022 1.079-37.671 3.334v11.353c11.649-2.255 24.275-3.334 37.671-3.334 15.104 0 29.459 1.373 42.667 4.256v-11.355c-13.208-2.883-27.564-4.254-42.667-4.254z"
fill="red"
/>
<path
d="M165.195 816.013a15.875 7.813 0 014.43 5.412 15.875 7.813 0 01-5.414 5.863c9.116.653 17.878 1.866 26.186 3.68v-11.356c-8.007-1.748-16.44-2.931-25.202-3.6z"
fill="#e50000"
/>
<path
d="M148.387 789.038c-43.49 0-75.817 18.34-83.229 62.715 12.322-10.516 27.524-17.553 44.903-21.51 0 0-2.734-13.778 10.25-16.029 12.983-2.25 14.025-4 27.421-4 15.103 0 16.422.44 30.666 4 14.245 3.561 12 17.113 12 17.113 17.218 4.421 32.483 11.864 44.9 22.71-7.275-46.03-42.684-64.999-86.911-64.999z"
fill="#1a1a1a"
/>
<path
className="bear__tear-stream"
d="M190.665 893.336v96.221c8.24-4.43 15.761-10.15 22.37-16.971v-79.25h-22.37zM86.056 893.336v80.399c6.546 6.885 14.056 12.592 22.37 16.92v-97.32h-22.37z"
/>
<path
className="bear__brows"
d="M96.601 864.041a21.271 21.271 0 01-6.78 15.572 21.271 21.271 0 01-16.02 5.644M203.53 864.041a21.271 21.271 0 006.78 15.572 21.271 21.271 0 0016.02 5.644"
fill="none"
strokeWidth="2.983"
strokeLinecap="round"
strokeLinejoin="round"
/>
<circle
className="bear__eye bear__eye--left"
r="11.185"
cy="894.081"
cx="97.242"
/>
<circle
className="bear__eye bear__eye--right"
r="11.185"
cx="201.851"
cy="894.081"
/>
<g className="bear__shades">
<path d="M77.29 854.608c-6.508-.07-13.363.182-22.8 2.131l-14.318 2.769 2.308 15.038c2.094.293 4.984 1.016 6.352 2.848 3.528 4.722 1.202 9.286 2.003 17.625 2.67 27.781 11.92 33.596 26.247 35.267 7.502.875 22.816 2.282 33.28-1.433 9.456-3.357 18.223-9.868 24.158-17.96 6.274-8.553 6.948-18.43 10.843-25.92 2.76-5.31 7.7-3.786 9.258.39 2.951 7.91 4.379 16.977 10.653 25.53 5.935 8.092 14.702 14.603 24.159 17.96 10.463 3.715 25.777 2.308 33.279 1.433 14.326-1.671 23.578-7.486 26.249-35.267.801-8.339-1.525-12.903 2.003-17.625 1.414-1.893 4.463-2.611 6.567-2.885l2.297-14.962-14.522-2.808c-15.1-3.12-23.591-1.89-34.623-1.957-4.093-.025-8.777.115-13.136.573-8.125.855-16.176 2.382-24.174 4.05-7.988 1.665-15.589 6.1-23.747 5.942-7.868-.153-14.966-4.977-22.664-6.616-8.132-1.732-14.824-3.106-24.713-3.376-4.794-.13-9.043-.598-13.136-.573-4.137.026-7.918-.132-11.823-.174z" />
<path
d="M85.28 860.471c-10.088.168-24.807.706-28.48 12.251-3.277 15.249-3.122 32.76 5.735 45.627 7.396 10.745 23.365 8.637 35.258 8.22 18.899-.663 35.138-15.383 40.158-33.389 1.93-7.753 3.906-11.697.696-19.382-7.653-8.953-20.099-11.778-30.58-12.967a443.553 443.553 0 00-22.787-.36z"
fill="#333"
/>
<path
d="M56.04 864.299a4.079 1.692 0 01-4.058 1.692 4.079 1.692 0 01-4.1-1.675 4.079 1.692 0 014.017-1.71 4.079 1.692 0 014.14 1.658"
fill="#b3b3b3"
/>
<path
d="M214.515 860.471c10.088.168 24.807.706 28.481 12.251 3.276 15.249 3.12 32.76-5.736 45.627-7.396 10.745-23.365 8.637-35.257 8.22-18.9-.663-35.139-15.383-40.16-33.389-1.928-7.753-3.905-11.697-.695-19.382 7.653-8.953 20.1-11.778 30.58-12.967a443.553 443.553 0 0122.787-.36z"
fill="#333"
/>
<path
d="M243.755 864.299a4.079 1.692 0 004.058 1.692 4.079 1.692 0 004.1-1.675 4.079 1.692 0 00-4.017-1.71 4.079 1.692 0 00-4.14 1.658"
fill="#b3b3b3"
/>
<path
d="M100.812 860.598l-19.186 66.305c5.485.302 11.181-.16 16.165-.335.244-.008.486-.03.73-.043l18.585-64.222c-3.068-.678-6.13-1.14-9.039-1.47a473.891 473.891 0 00-7.255-.235zM89.154 860.456c-1.292.002-2.586 0-3.875.014-1.081.018-2.235.05-3.403.09l-17.662 59.853c1.729 1.827 3.77 3.172 6.025 4.148l18.915-64.105z"
fill="#fff"
/>
</g>
</g>
</svg>
)
}
const Container = styled.div`
display: inline-grid;
grid-gap: 0 1rem;
grid-template-columns: auto 1fr;
grid-template-rows: auto auto;
`
const Code = styled(GlitchyText)`
align-self: end;
font-size: 3rem;
@media (min-width: 768px) {
font-size: 6rem;
}
`
const AppShell = styled.main`
display: flex;
align-items: center;
justify-content: center;
`
const CodeMessage = styled(GlitchyText)`
font-size: 1.5rem;
@media (min-width: 768px) {
font-size: 3rem;
}
`
const Message = styled.a`
grid-column: span 2;
grid-row: -1;
text-align: center;
margin: 2rem auto;
&:hover {
& ~ img {
background: red;
}
}
`
const FourOhFour = () => {
useEffect(() => {
const root = document.documentElement
const update = e => {
if (e.acceleration && e.acceleration.x !== null) {
root.style.setProperty('--X', e.acceleration.x)
root.style.setProperty('--Y', e.acceleration.y)
} else {
root.style.setProperty('--X', e.pageX / window.innerWidth - 0.5)
root.style.setProperty('--Y', e.pageY / window.innerHeight - 0.5)
}
}
document.body.addEventListener('mousemove', update)
window.ondevicemotion = update
return () => {
document.body.removeEventListener('mousemove', update)
}
}, [])
return (
<AppShell>
<Container>
<Message className="return-link" href="/#" rel="noreferrer noopener">
Return to happiness
</Message>
<Logo className="bear-logo--tears" />
<Code className="four-oh-four__code">404</Code>
<CodeMessage className="four-oh-four__code-message">
Not found
</CodeMessage>
</Container>
</AppShell>
)
}
const ROOT = document.getElementById('app')
render(<FourOhFour />, ROOT)
Also see: Tab Triggers