<svg viewBox="0 0 100 80" class="im-a-hamburger">
<rect width="100" height="20"></rect>
<rect y="30" width="100" height="20"></rect>
<rect y="60" width="100" height="20"></rect>
</svg>
<main>
<div class="background-blobs">
<svg id="Blob_1" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" viewBox="0 0 2270 654"><defs><style>.cls-1{fill:url(#linear-gradient);}</style><linearGradient id="linear-gradient" x1="245.63" y1="737.2" x2="1097.27" y2="-614.44" gradientUnits="userSpaceOnUse"><stop offset="0.38" stop-color="hsla(232,85%,41%,1)"/><stop offset="1" stop-color="hsla(250,66%,20%,1)"/></linearGradient></defs><title>Untitled-1</title><path class="cls-1" d="M2011-100.71C1989.31-70.81,1948.7-25,1882.4,4.91c-57.57,26-109.62,28.75-138.58,30-83.44,3.67-85.67-20.27-158.55-15.56-69.93,4.52-81.51,27.45-174.92,37.8-31.45,3.49-58.42,4-96.59,3.12-158.59-3.74-228.36-25.65-308.66-27.58-167.51-4-161.63,84.58-360.54,105.62C464,157.44,396.64,91.09,318.07,147.23,246.51,198.35,286,265.11,204.15,358.48c-11.68,13.32-131.41,145.9-276,113.41C-169.49,450-232.28,363.11-251.52,288.44c0,0-35.2-109.41,47.13-229C44.51-302.32,1527.26-155.79,2011-100.71Z" transform="translate(259 177)"/></svg>
</div>
<div class="header-text">
<h1>Creativity</h1>
<h3>The use of imagination or original ideas to create something amazing</h3>
</div>
</main>
<div class="navigation">
<div class="overlay"></div>
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1920 1080" id="navigation-background"><path class="a morph-path" d="M1694.17,69.11c-21.15,46.26-57.31,104.06-118,123-36,11.22-57.7,1.67-115-2-89.29-5.71-118,12.26-213,21-104.64,9.63-124.51-7.14-234-8-98.87-.77-238-1.86-366,60-154.3,74.55-131.59,162.75-270,216-133.46,51.34-315.11,31.11-364-60-39.85-74.25,18.49-176.94,35-206C234-112.21,1335,19.57,1694.17,69.11Z"/></svg>
<nav>
<ul>
<li data-item="home"><a href="#0">Home</a></li>
<li data-item="about"><a href="#0">About</a></li>
<li data-item="contact"><a href="#0">Contact</a></li>
<li data-item="dance"><a href="#0">Dance</a></li>
</ul>
</nav>
</div>@import url('https://fonts.googleapis.com/css?family=Archivo+Black|Merriweather|Open+Sans&display=swap');
html,
body {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
background: #101010;
overflow-x: hidden;
}
header {
position: fixed;
top: 0;
left: 0;
right: 0;
z-index: 200;
width: calc(100% - 40px);
height: 50px;
padding: 5px 20px;
display: flex;
align-items: flex-end;
align-content: flex-end;
.logo {
flex: 1 1 100px;
}
}
.im-a-hamburger {
position: fixed;
top: 20px;
right: 20px;
z-index: 300;
flex: 0 0 20px;
width: 20px;
fill: hsla(36,95%,91%,1);
cursor: pointer;
}
main {
display: flex;
justify-content: center;
align-items: center;
width: 100%;
height: 90vh;
.background-blobs {
svg {
position: absolute;
top: -10%;
left: -20%;
right: -20%;
width: 1920px;
height: auto;
filter: drop-shadow( 22px 22px 0px hsla(232,85%,41%,0.3));
opacity: 0.2;
}
}
.header-text {
width: 1300px;
h1 {
font-family: 'Archivo Black', 'Arial Black', sans-serif;
font-size: 240px;
text-fill-color: transparent;
background: linear-gradient(transparent, transparent),
url('https://image.freepik.com/free-vector/earth-view-night-from-alien-planet-neon-space_33099-1876.jpg') repeat;
background: linear-gradient(transparent, transparent);
background-clip: text;
text-shadow: 0 0 10px rgba(0,0,0,0.3);
text-overflow: hidden;
}
h3 {
font-family: 'Merriweather', 'Times New Roman', sans-serif;
font-size: 45px;
font-weight: 400;
letter-spacing: 1px;
width: 80%;
padding: 0 10%;
line-height: 72px;
text-align: center;
margin-top: -80px;
color: #fafafa;
}
}
}
.navigation {
display: none;
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 205;
&.open {
display: block;
}
.overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0,0,0,0.3);
backdrop-filter: blur(5px);
}
#navigation-background {
width: 180vw;
height: 170vh;
position: fixed;
top: -70vh;
left: -50vw;
z-index: 210;
.morph-path {
fill: hsla(242,55%,33%,0.65);
transition: fill 0.5s ease-in-out;
}
}
nav {
display: none;
position: absolute;
top: 100px;
left: 50px;
z-index: 220;
&.open {
display: block;
}
ul {
list-style: none;
margin: 0;
padding: 0;
li {
padding: 5px 50px;
line-height: 60px;
font-family: 'Open Sans', 'Arial Black', sans-serif;
font-size: 40px;
margin: 20px 0;
a {
text-decoration: none;
color: #fff;
&:hover {
background-image: linear-gradient(180deg,transparent 90%,hsla(249,62%,90%,0.5) 0);
}
}
}
}
}
}let shapes = [
{
d: "M1694.17,69.11c-21.15,46.26-57.31,104.06-118,123-36,11.22-57.7,1.67-115-2-89.29-5.71-118,12.26-213,21-104.64,9.63-124.51-7.14-234-8-98.87-.77-238-1.86-366,60-154.3,74.55-131.59,162.75-270,216-133.46,51.34-315.11,31.11-364-60-39.85-74.25,18.49-176.94,35-206C234-112.21,1335,19.57,1694.17,69.11Z"
},
{
d: "M1737.24,215.24c-34.74,37.5-67.35,51.35-91,57-57.8,13.8-91.82-14.3-144,6-33.08,12.86-45.33,34.24-67,56-70.1,70.36-173.64,79.18-242,85-177.57,15.11-211.26-83.88-316-64-186.56,35.39-153.7,363.51-372,456-142.82,60.5-344.26-.55-439-129-108-146.45-65.7-364.73,4-474C255.28-81.85,922.75-57.54,1737.24,215.24Z"
},
{
d: "M2103.58,312.15c-177.1,79.56-276.61,94.56-336,90-5.83-.45-22.23-1.93-45-2,0,0-102.23-.34-186,31-132.83,49.68-105.49,192.42-235,261-99.66,52.76-150.92-13.18-271,25-135.26,43-179.58,161.4-273,288-150.43,203.84-432.33,434.57-571,387-193.12-66.25-291.42-735-15-1087C478.21-85.35,1271.73-118.86,2103.58,312.15Z"
}
]
var morph = anime({
targets: '.morph-path',
d: [
{value: shapes[0].d},
{value: shapes[2].d}
],
delay: 0,
duration: 2000,
autoplay: false,
loop: false,
complete: (anim) => {
console.log(anim.reversed);
if (anim.reversed) {
document.querySelector(".navigation").classList.toggle("open");
morph.completed = false;
morph.progress = 0;
morph.reverse();
} else {
document.querySelector(".navigation nav").classList.toggle("open")
document.querySelectorAll(".navigation nav ul li").forEach((el) => {
const pageColor = {
"home": "hsla(242,55%,33%,0.65)",
"about": "hsla(185,37%,35%,0.65)",
"contact": "hsla(319,99%,21%,0.65)",
"dance": "hsla(170,100%,35%,0.65)"
}
el.addEventListener("mouseover", (e) => {
document.querySelector(".morph-path").style.fill = pageColor[el.getAttribute("data-item")];
})
el.addEventListener("click", (e) => {
document.querySelector(".navigation nav").classList.toggle("open");
document.querySelector(".navigation").classList.toggle("open");
morph.reverse();
})
})
}
}
});
document.querySelector(".im-a-hamburger").addEventListener("click", (e) => {
if (!document.querySelector(".navigation").classList.contains("open")) {
document.querySelector(".navigation").classList.toggle("open")
morph.play();
} else {
document.querySelector(".navigation nav").classList.toggle("open");
morph.completed = false;
morph.progress = 0;
morph.reverse();
morph.play();
}
})
External CSS
This Pen doesn't use any external CSS resources.