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.
<section class="container">
<div class="dribble">
<p>
Original illustration by
<a target="_blank" href="https://dribbble.com/miguelgarest">
Miguel E. on Dribbble
</a>
</p>
</div>
<svg
viewBox="0 0 1283 817"
xmlns="http://www.w3.org/2000/svg"
xmlns:serif="http://www.serif.com/"
fill-rule="evenodd"
clip-rule="evenodd"
stroke-linecap="round"
stroke-linejoin="round"
stroke-miterlimit="1.5"
>
<g transform="translate(3.68 10.45)">
<g id="food">
<path
fill="#3ed0e1"
stroke="#3ed0e1"
stroke-width=".99"
d="M-.928 2.738h1281.46v796.195H-.928z"
transform="matrix(1 0 0 1.02387 -2.253 -12.754)"
/>
<path
class="shadow"
d="M482.737 527.86l-18.708 5.804-38.394.298-68.826-10.431-9.393-10.033 33.574-13.167 115.354-9.025 213.592-19.395 33.275 28.31 40.55 10.318-37.741.929-20.103 3.188 12.466 5.269-14.079 5.735 5.649 9.832-145.059 6.703-102.157-14.335z"
fill="#00aeb6"
/>
<g class="chop chop-1">
<path
d="M67.234 118.577l8.991-8.718 233.516 192.103-2.365 3.441L67.234 118.577z"
fill="#31312d"
transform="scale(1 -1) rotate(-83.811 39.828 18.613)"
/>
<path
d="M67.234 118.577l6.393 8.464 233.868 178.586-240.261-187.05z"
fill="#2f302d"
transform="scale(1 -1) rotate(-83.811 39.828 18.613)"
/>
</g>
<g
id="chop-sticks"
transform="scale(1.06072) rotate(-13.014 718.903 229.216)"
fill="#00aeb6"
>
<g id="chop-2">
<path
d="M67.234 118.577l8.991-8.718 233.516 192.103-2.365 3.441L67.234 118.577z"
transform="translate(-51.627 -6.642)"
/>
<path
d="M67.234 118.577l6.393 8.464 233.868 178.586-240.261-187.05z"
transform="translate(-51.627 -6.642)"
/>
</g>
<g id="chop-1">
<path
d="M67.234 118.577l8.991-8.718 233.516 192.103-2.365 3.441L67.234 118.577z"
transform="scale(1 -1) rotate(-83.811 -43.766 32.485)"
/>
<path
d="M67.234 118.577l6.393 8.464 233.868 178.586-240.261-187.05z"
transform="scale(1 -1) rotate(-83.811 -43.766 32.485)"
/>
</g>
</g>
<g id="hanging">
<path
d="M574.019 279.35s-16.498-88.525 19.247-135.463c35.718-46.902 11.603 69.127 10.381 68.306l-8.188-1.454s6.321-52.034 5.727-57.934c-.595-5.901-8.425 10.64-11.305 16.515-11.701 23.874-15.587 72.883-7.073 112.405l-8.789-2.375z"
fill="#ffce5b"
stroke="#ddad4f"
transform="translate(2.212 127.906)"
/>
<ellipse
cx="599.609"
cy="213.051"
rx="4.148"
ry="5.21"
fill="#ffce5b"
stroke="#ddad4f"
stroke-width=".73"
transform="matrix(1.07234 0 0 .97554 -41.226 130.59)"
/>
<ellipse
cx="599.609"
cy="213.051"
rx="4.148"
ry="5.21"
fill="#ffce5b"
stroke="#ddad4f"
stroke-width=".74"
transform="matrix(1.10682 0 0 .92303 -83.228 211.995)"
/>
<g>
<path
d="M574.019 279.35s-12.419-86.409 16.937-137.585c6.022-10.5 12.009-10.752 14.856-10.332 15.582 2.302-.571 79.937-2.165 80.76l-8.188-1.454s5.968-54.504 5.374-60.404c-.595-5.9-8.236 10.98-9.847 17.321-9.921 39.051-16.461 76.511-8.178 114.069l-8.789-2.375z"
fill="#ffd982"
stroke="#ddad4f"
transform="translate(9.952 131.538)"
/>
<ellipse
cx="599.609"
cy="213.051"
rx="4.148"
ry="5.21"
fill="#ffd982"
stroke="#ddad4f"
stroke-width=".73"
transform="matrix(1.07234 0 0 .97554 -33.486 134.223)"
/>
<ellipse
cx="599.609"
cy="213.051"
rx="4.148"
ry="5.21"
fill="#ffd982"
stroke="#ddad4f"
stroke-width=".74"
transform="matrix(1.10682 0 0 .92303 -75.488 215.627)"
/>
</g>
</g>
<g id="hanging-shadow">
<path
d="M574.019 279.35s-16.498-88.525 19.247-135.463c35.718-46.902 11.603 69.127 10.381 68.306l-8.188-1.454s6.321-52.034 5.727-57.934c-.595-5.901-8.425 10.64-11.305 16.515-11.701 23.874-15.587 72.883-7.073 112.405l-8.789-2.375z"
fill="#00aeb6"
transform="matrix(1.38092 -.21756 .09118 .57876 -299.098 490.945)"
/>
<ellipse
cx="599.609"
cy="213.051"
rx="4.148"
ry="5.21"
fill="#00aeb6"
transform="matrix(1.48082 -.2333 .08895 .5646 -358.838 501.949)"
/>
<ellipse
cx="599.609"
cy="213.051"
rx="4.148"
ry="5.21"
fill="#00aeb6"
transform="matrix(1.52843 -.2408 .08417 .53422 -409.417 558.2)"
/>
<g>
<path
d="M574.019 279.35s-12.419-86.409 16.937-137.585c6.022-10.5 12.009-10.752 14.856-10.332 15.582 2.302-.571 79.937-2.165 80.76l-8.188-1.454s5.968-54.504 5.374-60.404c-.595-5.9-8.236 10.98-9.847 17.321-9.921 39.051-16.461 76.511-8.178 114.069l-8.789-2.375z"
fill="#00aeb6"
transform="matrix(1.38092 -.21756 .09118 .57876 -288.079 491.363)"
/>
<ellipse
cx="599.609"
cy="213.051"
rx="4.148"
ry="5.21"
fill="#00aeb6"
transform="matrix(1.48082 -.2333 .08895 .5646 -347.819 502.367)"
/>
<ellipse
cx="599.609"
cy="213.051"
rx="4.148"
ry="5.21"
fill="#00aeb6"
transform="matrix(1.52843 -.2408 .08417 .53422 -398.398 558.619)"
/>
</g>
</g>
<g id="box">
<path
d="M784.532 314.659l-134.635-17.475-165.918-9.626 126.742 21.355c57.938 2.9 115.877 6.098 173.811 5.746z"
fill="#f47b6c"
/>
<g id="noodles">
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffd881"
stroke="#dbaa4b"
stroke-width=".93"
transform="matrix(1 0 0 1.13569 -14.572 -73.053)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffce5b"
stroke="#dbaa4b"
stroke-width="1.06"
transform="matrix(.8789 0 0 .99815 63.763 -24.067)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffd881"
stroke="#dbaa4b"
stroke-width="1.17"
transform="matrix(.78966 0 0 .91906 122.146 6.444)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffce5b"
stroke="#dbaa4b"
stroke-width="1.33"
transform="matrix(.69403 0 0 .80776 184.003 46.085)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffd881"
stroke="#dbaa4b"
stroke-width="1.15"
transform="matrix(.88863 0 0 .84435 57.67 41.963)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffce5b"
stroke="#dbaa4b"
stroke-width="1.31"
transform="matrix(.78101 0 0 .74209 127.28 78.382)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffd881"
stroke="#dbaa4b"
stroke-width="1.44"
transform="matrix(.70172 0 0 .6833 179.16 101.066)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffce5b"
stroke="#dbaa4b"
stroke-width="1.64"
transform="matrix(.61674 0 0 .60054 234.13 130.538)"
/>
<g>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffd881"
stroke="#dbaa4b"
stroke-width=".93"
transform="matrix(1 0 0 1.13569 50.263 -62.474)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffce5b"
stroke="#dbaa4b"
stroke-width="1.06"
transform="matrix(.8789 0 0 .99815 128.598 -13.488)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffd881"
stroke="#dbaa4b"
stroke-width="1.17"
transform="matrix(.78966 0 0 .91906 186.98 17.023)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffce5b"
stroke="#dbaa4b"
stroke-width="1.33"
transform="matrix(.69403 0 0 .80776 248.838 56.665)"
/>
</g>
<g>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffd881"
stroke="#dbaa4b"
stroke-width="1.33"
transform="matrix(.69236 0 0 .8032 251.34 64.252)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffce5b"
stroke="#dbaa4b"
stroke-width="1.52"
transform="matrix(.60851 0 0 .70593 305.576 98.896)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffd881"
stroke="#dbaa4b"
stroke-width="1.67"
transform="matrix(.54673 0 0 .65 345.998 120.475)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffce5b"
stroke="#dbaa4b"
stroke-width="1.89"
transform="matrix(.48052 0 0 .57128 388.826 148.511)"
/>
</g>
<g>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffd881"
stroke="#dbaa4b"
stroke-width=".93"
transform="matrix(1 0 0 1.13569 -90.331 -61.554)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffce5b"
stroke="#dbaa4b"
stroke-width="1.06"
transform="matrix(.8789 0 0 .99815 -11.997 -12.57)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffd881"
stroke="#dbaa4b"
stroke-width="1.17"
transform="matrix(.78966 0 0 .91906 46.386 17.942)"
/>
<ellipse
cx="648.182"
cy="345.739"
rx="50.891"
ry="50.553"
fill="#ffce5b"
stroke="#dbaa4b"
stroke-width="1.33"
transform="matrix(.69403 0 0 .80776 108.244 57.584)"
/>
</g>
</g>
<path
id="flap-3"
d="M783.489 314.678l50.694 68.956-2.628 22.233-54.769-8.053-45.214-2.09 51.917-81.046z"
fill="#ffdfe2"
/>
<g id="face">
<path
d="M601.053 509.916l7.552-201.116 164.978 6.148C763.66 381.884 754.741 449 738.827 514.867l-137.774-4.951z"
fill="#fff"
/>
<path
id="flap-1_shadow"
d="M609.683 309.768l8.861 102.509 41.196 54.51 89.226 3.362 16.36-73.567 9.606-81.783-165.249-5.031z"
fill="#ffe0e3"
/>
<g id="mouth">
<path
d="M660.539 436.639c3.832-5.166 37.575-2.812 39.607.492 4.617 7.504-5.691 30.664-19.983 33.008-20.68 3.607-24.657-26.716-19.624-33.5z"
fill="#332d2a"
/>
<ellipse
cx="678.315"
cy="463.283"
rx="9.38"
ry="8.002"
fill="#ff3d5c"
transform="matrix(1.20785 0 0 .96872 -142.303 13.953)"
/>
</g>
<ellipse
class="eye"
cx="646.992"
cy="435.055"
rx="4.874"
ry="6.862"
fill="#202c33"
transform="matrix(1.16433 .12577 -.1074 .99422 8.725 -76.014)"
/>
<ellipse
class="eye"
cx="646.992"
cy="435.055"
rx="4.874"
ry="6.862"
fill="#202c33"
transform="matrix(1.16433 .12577 -.1074 .99422 -60.432 -78.853)"
/>
</g>
<g id="flap-2_shadow">
<path
class="fill-shadow"
d="M497.198 497.167l-13.475-209.193 129.391 20.64-115.916 188.553z"
fill="#ffa0ae"
/>
<path
d="M602.527 510.352l-104.555-15.817 112.33-186.261-7.775 202.078z"
fill="#ffe2e4"
/>
</g>
<path
id="flap-2"
d="M420.196 382.821l70.023 9.776 48.621-20.794 72.673-62.941-126.95-21.333-62.382 67.632-1.985 27.66z"
fill="#fff"
/>
<path
id="flap-1"
d="M641.233 363.814l51.101 30.042 87.706 4.361 28.343-28.349-24.894-55.19-172.727-6.079 30.471 55.215z"
fill="#fff"
/>
</g>
<g class="chop chop-2">
<path
d="M67.234 118.577l8.991-8.718 233.516 192.103-2.365 3.441L67.234 118.577z"
fill="#31312d"
transform="translate(31.395 -71.095)"
/>
<path
d="M67.234 118.577l6.393 8.464 233.868 178.586-240.261-187.05z"
fill="#2f302d"
transform="translate(31.395 -71.095)"
/>
</g>
</g>
</g>
</svg>
</section>
body {
background-color: #16181D;
background-image: linear-gradient(205deg, #313346 0%, #15161D 76%);
}
body,
html {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
.container {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
svg {
max-width: 800px;
width: 100%;
background: #3ed0e1;
}
.dribble {
font-size: 25px;
font-family: Inconsolata, monospace;
p {
color: #F1F1F1;
a{
color: #ffa0ae ;
}
}
}
// Paths used to morph the side and front flaps
const flap3 =
"M647.874 341.275l54.357 34.965 77.45 13.492 28.702-19.864-24.894-55.19-158.516-29.814 22.901 56.411z",
flap2 =
"M664.101 323.951l37.022 30.208 79.968 30.509 27.292-14.8-21.814-36.603-142.232-71.27 19.764 61.956z",
flap4 =
"M420.196 382.821l63.685-12.709 46.568-21.001 78.141-91.307-124.027 29.725-62.382 67.632-1.985 27.66z",
// common bounces used throughout animation
bounce = Bounce.easeOut,
back = Back.easeOut.config( 1.4);
// hiding several elements initially so I can animate them back in.
TweenMax.set("#chop-sticks, .chop, #hanging-shadow, #shadow", {
visibility: "hidden"
});
TweenMax.set("#box", {
transformOrigin: "-50% 100%"
});
// transforming the origin to help when I animate rotate.
TweenMax.set(".eye", {
transformOrigin: "50% 50%"
});
TweenMax.set("#flap-1", {
transformOrigin: "-15% 50%"
});
TweenMax.set("#flap-2", {
transformOrigin: "30% 0%"
});
TweenMax.set(".chop-1", {
transformOrigin: "30% 0%"
});
// Setting up first animation morphing the flaps and the shadows on the container
TweenMax.to("#flap-1", 0.2, {
morphSVG: flap2,
rotation: -30,
y: 50,
yoyo: true,
repeat: -1,
});
TweenMax.to("#flap-1_shadow", 0.2, {
rotation: 5,
y: -10,
scaleY: 0.6,
yoyo: true,
repeat: -1
});
TweenMax.to("#flap-2", 0.2, {
morphSVG: flap4,
x: 10,
rotation: 15,
yoyo: true,
repeat: -1
});
TweenMax.to(".fill-shadow", 0.2, {
fill: '#ffe2e4',
yoyo: true,
repeat: -1
});
TweenMax.to("#flap-3", 0.19, { x: -10, rotation: -10, yoyo: true, repeat: -1 });
TweenMax.to("#noodles", 0.401, {
y: -10,
rotation: -1,
yoyo: true,
repeat: -1
});
TweenMax.to(".eye", 0.3, {
scaleY: 0.3,
yoyo: true,
repeat: -1,
repeatDelay: 0.4
});
TweenMax.to(".chop-1, #chop-1", 0.2, {
rotation: -5,
yoyo: true,
repeat: -1
})
const shakeBox = item => {
let tl = new TimelineMax({ repeat: -1, yoyo: true });
tl.add("s");
tl.timeScale(1);
tl
.to("#box", 0.15, {
transformOrigin: "center center",
force3D: true,
rotationZ: 5,
rotation: -20,
x: 20,
y: -20,
z: 20,
ease: Power0.easeNone
})
.to("#box", 0.2, {
transformOrigin: "center center",
rotationZ: -20,
rotation: 50,
x: -20,
y: 20,
z: -20,
force3D: true,
ease: Power0.easeNone
});
return tl;
};
const shakeShadow = item => {
let tl = new TimelineMax({ repeat: -1, yoyo: true });
tl.add("s");
tl.timeScale(1);
tl
.to(".shadow", 0.15, {
transformOrigin: "center center",
force3D: true,
rotationZ: -5,
rotation: 20,
x: -20,
y: 20,
scaleX: 1.2,
ease: Power0.easeNone
})
.to(".shadow", 0.2, {
transformOrigin: "center center",
rotationZ: 5,
rotation: -20,
x: 20,
y: -20,
z: 20,
scaleX: 0.8,
force3D: true,
ease: Power0.easeNone
});
return tl;
};
const chopSticks = item => {
let tl = new TimelineMax({ repeat: -1});
tl.add("s");
tl.timeScale(1);
tl.to(".chop", 0.8, {
autoAlpha: 1,
x: 260,
y: 50
},"s")
.to("#chop-sticks", 0.8, {
autoAlpha: 1,
x: 200,
y: 250
},"s")
.to("#hanging-shadow", 0.3, {
autoAlpha: 1
},"s+=0.8")
.to("#hanging-shadow, #chop-sticks, #hanging, .chop", 0.3, {
y: -500,
},"s+=0.8")
return tl;
};
const master = new TimelineMax({delay: .5});
master.timeScale(1.5)
master.add('s')
master
.add((shakeBox),'s')
.add((shakeShadow),'s')
.add((chopSticks))
Also see: Tab Triggers