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.
svg.svg-background fill="none" viewbox=("0 0 911 167") xmlns="http://www.w3.org/2000/svg"
path#L1 d=("M0 83.5H215.216C223.549 83.5 231.859 82.6217 240.007 80.8796L257.278 77.1875C272.966 73.8335 289.333 76.0284 303.584 83.3977L315.274 89.4425C331.349 97.7556 350.737 96.3017 365.394 85.6842V85.6842C382.377 73.3806 405.389 73.5514 422.188 86.1056L428.288 90.664C445.708 103.683 469.866 102.723 486.199 88.3631V88.3631C501.865 74.5894 524.839 73.0818 542.171 84.6901L547.267 88.1033C561.28 97.489 578.876 99.7845 594.828 94.3082L612.012 88.4091C621.48 85.1588 631.421 83.5 641.432 83.5H683.25H911")
path#L2 d=("M0 84H210.471C221.876 84 233.166 86.2751 243.68 90.692V90.692C262.584 98.6334 283.708 99.5375 303.222 93.2405L304.317 92.8869C322.214 87.1116 341.482 87.1637 359.347 93.0356L361.137 93.6238C379.699 99.7247 399.694 99.9306 418.378 94.2132L424.761 92.26C442.495 86.833 461.275 85.75 479.516 89.1025L486.13 90.318C500.226 92.9087 514.653 93.1506 528.828 91.0338L566.385 85.4256C572.741 84.4765 579.158 84 585.585 84H626.312H683.25H911")
path#L3 d=("M0 83.5H227.75H264.173C274.961 83.5 285.67 81.6668 295.844 78.0786L304.5 75.0259C322.706 68.6049 342.714 69.6573 360.146 77.9528L364.788 80.1618C380.614 87.6935 398.903 88.1164 415.061 81.3241L425.661 76.8683C442.679 69.7144 462.345 73.7518 475.168 87.0325V87.0325C491.067 103.499 516.833 105.304 534.873 91.2148L544.283 83.8653C559.396 72.0621 579.367 68.4934 597.632 74.3321L613.127 79.2852C621.865 82.0782 630.982 83.5 640.155 83.5H683.25H911")
g
g
circle cx="22" cy="43" r="10.5" stroke="black" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="16s" from=("0 6 7") repeatcount="indefinite" to=("-360 6 7") type="rotate"
animatemotion begin="0s" dur="32s" repeatcount="indefinite"
mpath xlink:href="#L3"
g
g
circle cx="22" cy="43" r="10.5" stroke="black" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="8s" from=("0 6 7") repeatcount="indefinite" to=("-360 6 7") type="rotate"
animatemotion begin="12s" dur="46s" repeatcount="indefinite"
mpath xlink:href="#L1"
g
g
path d=("M9.14359 36L23 12L36.8564 36H9.14359Z") stroke="black" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="14s" from=("0 6 7") repeatcount="indefinite" to=("360 6 7") type="rotate"
animatemotion begin="0s" dur="36s" repeatcount="indefinite"
mpath xlink:href="#L2"
g
g
path d=("M9.14359 36L23 12L36.8564 36H9.14359Z") stroke="black" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="8s" from=("0 6 7") repeatcount="indefinite" to=("360 6 7") type="rotate"
animatemotion begin="3s" dur="44s" repeatcount="indefinite"
mpath xlink:href="#L1"
g
g
path d=("M9.14359 36L23 12L36.8564 36H9.14359Z") stroke="black" stroke-linecap="square" stroke-linejoin="round" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="12s" from=("0 6 7") repeatcount="indefinite" to=("360 6 7") type="rotate"
animatemotion begin="7s" dur="30s" repeatcount="indefinite"
mpath xlink:href="#L2"
g
g
path d=("M30.9198 52L14.4717 79M10 56.4614L36 73.5422") stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="14s" from=("0 6 7") repeatcount="indefinite" to=("360 6 7") type="rotate"
animatemotion begin="14s" dur="25s" repeatcount="indefinite"
mpath xlink:href="#L3"
g
g
path d=("M30.9198 52L14.4717 79M10 56.4614L36 73.5422") stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="12s" from=("0 6 7") repeatcount="indefinite" to=("360 6 7") type="rotate"
animatemotion begin="12s" dur="34s" repeatcount="indefinite"
mpath xlink:href="#L2"
g
g
path d=("M30.9198 52L14.4717 79M10 56.4614L36 73.5422") stroke="black" stroke-linecap="round" stroke-linejoin="round" stroke-opacity="0.05" stroke-width="7" /
animatetransform attributename="transform" attributetype="XML" dur="10s" from=("0 6 7") repeatcount="indefinite" to=("360 6 7") type="rotate"
animatemotion begin="0s" dur="42s" repeatcount="indefinite"
mpath xlink:href="#L1"
button.btn type="button"
span.btn_text click me
.mover
span.link
| Made with
| <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24"><path fill="none" d="M0 0H24V24H0z"/><path fill="#7f71fe" d="M16.5 3C19.538 3 22 5.5 22 9c0 7-7.5 11-10 12.5C9.5 20 2 16 2 9c0-3.5 2.5-6 5.5-6C9.36 3 11 4 12 5c1-1 2.64-2 4.5-2z"/></svg>
| by
a href="https://codepen.io/Anna_Batura/" target="_blank" Anna Batura
@import url('https://fonts.googleapis.com/css2?family=Comfortaa:wght@400;600;700&display=swap')
\:root
--mouse-x: -50px
--mouse-y: -50px
--mouse-btn-x: -50px
--mouse-btn-y: -50px
html
height: 100%
body
font-family: sans-serif
font-size: 14px
height: 100%
margin: 0
display: flex
align-items: center
justify-content: center
overflow: hidden
font-family: 'Comfortaa', cursive
background-color: #A8CAF5
font-weight: 400
.svg-background
position: absolute
left: -20vw
right: -20vw
bottom: 0
width: 140vw
a
color: #7f71fe
text-decoration: none
font-weight: 700
.btn
appearance: none
outline: 0
position: relative
overflow: hidden
display: inline-block
text-align: center
text-decoration: none
vertical-align: middle
cursor: pointer
-webkit-user-select: none
-moz-user-select: none
user-select: none
border: none
letter-spacing: 3px
line-height: 80px
height: 80px
width: 300px
padding: 0 30px
font-size: 32px
font-weight: 600
color: #fff
background-color: #1A1D2C
border-radius: 5px
transition: all 0.3s ease-in
&_text
position: relative
z-index: 2
&:hover
background-color: #262c48
.link
position: fixed
bottom: 10px
left: 0
right: 0
text-align: center
font-size: 18px
svg
position: relative
top: 5px
margin: 0 4px
.mover
pointer-events: none
position: absolute
top: 0
left: 0
margin-top: -10px
margin-left: -10px
border-radius: 50%
left: var(--mouse-x)
top: var(--mouse-y)
height: 20px
width: 20px
background: rgba(255, 255, 255, 0.3)
transform: scale(1.5)
transition: all 0.1s ease-out
z-index: 1
&.active
transform: scale(0.8)
.mouse
pointer-events: none
height: 30px
width: 30px
position: absolute
left: var(--mouse-btn-x)
top: var(--mouse-btn-y)
.svg
position: absolute
width: 160px
height: 180px
top: -110px
left: -80px
//#cpc-click-button#codepenchallenge
let root = document.documentElement;
let mover = document.querySelector(".mover");
let link = document.querySelector(".btn");
root.addEventListener("mousemove", (e) => {
root.style.setProperty("--mouse-x", e.clientX + "px");
root.style.setProperty("--mouse-y", e.clientY + "px");
});
link.addEventListener("click", function (event) {
event.preventDefault();
let svg =
`<svg class="svg" fill="none" viewBox="0 0 140 160" xmlns="http://www.w3.org/2000/svg"> <path d="M70.5 82.5V45.5" id="Line1"></path> <path d="M61.5 90.5L24.5 90.5" id="Line2"></path> <path d="M70.5 100.5V137.5" id="Line3"></path> <path d="M79.5 90.5L116.5 90.5" id="Line4"></path> <path d="M64.8786 85.9999L38.7157 59.8369" id="Line5"></path> <path d="M76 85.8788L102.163 59.7158" id="Line6"></path> <path d="M64 97.1211L37.837 123.284" id="Line7"></path> <path d="M76.1213 97L102.284 123.163" id="Line8"></path> <!-- /- (1..@snowFew).each do --> <g> <g> <g class="svg_obj"> <path d="M14.6324 5.25L20.9832 16.25C21.5606 17.25 20.8389 18.5 19.6842 18.5H6.98249C5.82778 18.5 5.10609 17.25 5.68344 16.25L12.0343 5.25C12.6116 4.25 14.055 4.25 14.6324 5.25Z" fill="none" stroke-linecap="square" stroke-linejoin="round" stroke-width="3" stroke="#7f71fe"></path> </g> <animateMotion begin="0s" dur="1.5s" repeatCount="1"> <mpath xlink:href="#Line` +
Math.floor(Math.random() * 8 + 1) +
`"></mpath> </animateMotion> </g> </g> <g> <g> <g class="svg_obj"> <circle cx="12" cy="11" r="6.5" stroke-width="3" stroke="#1A3AF8"></circle> </g> <animateMotion begin="0s" dur="1.5s" repeatCount="1"> <mpath xlink:href="#Line` +
Math.floor(Math.random() * 8 + 1) +
`"></mpath> </animateMotion> </g> </g> <g> <g> <g class="svg_obj"> <path d="M17.2394 3L7.6162 18.2116M5 5.51355L20.2116 15.1367" stroke="#47cf73" stroke-width="3" stroke-linecap="round" stroke-linejoin="round"/> </g> <animateMotion begin="0s" dur="1.5s" repeatCount="1"> <mpath xlink:href="#Line` +
Math.floor(Math.random() * 8 + 1) +
`"></mpath> </animateMotion> </g> </g> </svg>`;
let x = event.offsetX == undefined ? event.layerX : event.offsetX,
y = event.offsetY == undefined ? event.layerY : event.offsetY;
let span = document.createElement("span");
span.className = "mouse";
span.innerHTML = svg;
s = span.style;
s.top = y + "px";
s.left = x + "px";
this.appendChild(span);
setTimeout(function () {
span.remove();
}, 1400);
mover.classList.add("active");
setTimeout(function () {
mover.classList.remove("active");
}, 250);
});
Also see: Tab Triggers