Skip to content

Instantly share code, notes, and snippets.

@joshparkerj

joshparkerj/swave-with-logo.html

Created June 8, 2024 04:51
Show Gist options
  • Save joshparkerj/76fb4340244452a61b79394d3e2d5144 to your computer and use it in GitHub Desktop.
Save joshparkerj/76fb4340244452a61b79394d3e2d5144 to your computer and use it in GitHub Desktop.
Download ZIP
swave-with-logo
Raw
swave-with-logo.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>S W A V E</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Danfo&family=Jacquard+12&family=Poetsen+One&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Danfo&family=Jacquard+12&family=Poetsen+One&display=swap"
rel="stylesheet"
/>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Indie+Flower&family=Shadows+Into+Light&family=Zeyada&display=swap"
rel="stylesheet"
/>
<style>
body {
overflow: hidden;
margin: 0;
}
@keyframes sunset {
from {
top: 0;
}
to {
top: 200%;
}
}
.skybox {
position: relative;
animation: sunset 200s linear 1;
top: 200%;
}
.sun {
--glow-size: 16px;
--glow-white: #fa0;
--glow-color: #808;
background-image: linear-gradient(0deg, #d20, #f80);
height: 40vh;
width: 40vh;
position: relative;
margin: auto;
border-radius: 50%;
box-shadow: 0 0 calc(7 * var(--glow-size)) var(--glow-white),
0 0 calc(11 * var(--glow-size)) var(--glow-white),
0 0 calc(17 * var(--glow-size)) var(--glow-white),
0 0 calc(26 * var(--glow-size)) var(--glow-white),
0 0 calc(40 * var(--glow-size)) var(--glow-color),
0 0 calc(62 * var(--glow-size)) var(--glow-color),
0 0 calc(96 * var(--glow-size)) var(--glow-color),
0 0 calc(150 * var(--glow-size)) var(--glow-color);
}
.sky {
background-image: linear-gradient(135deg, #048, #204);
height: 50vh;
position: relative;
}
.ground {
background-image: linear-gradient(135deg, #024, #102);
height: 50vh;
position: relative;
}
.edge {
--glow-size: 0.25px;
--glow-color: #09f;
box-shadow: 0 0 calc(7 * var(--glow-size)) white,
0 0 calc(11 * var(--glow-size)) white,
0 0 calc(17 * var(--glow-size)) white,
0 0 calc(26 * var(--glow-size)) white,
0 0 calc(40 * var(--glow-size)) var(--glow-color),
0 0 calc(62 * var(--glow-size)) var(--glow-color),
0 0 calc(96 * var(--glow-size)) var(--glow-color),
0 0 calc(150 * var(--glow-size)) var(--glow-color),
inset 0 0 calc(7 * var(--glow-size)) white,
inset 0 0 calc(11 * var(--glow-size)) white,
inset 0 0 calc(17 * var(--glow-size)) white,
inset 0 0 calc(26 * var(--glow-size)) white,
inset 0 0 calc(40 * var(--glow-size)) var(--glow-color),
inset 0 0 calc(62 * var(--glow-size)) var(--glow-color),
inset 0 0 calc(96 * var(--glow-size)) var(--glow-color),
inset 0 0 calc(150 * var(--glow-size)) var(--glow-color);
position: relative;
top: 17vh;
width: 80vh;
height: 80vh;
margin: auto;
transform: rotate(45deg);
}
@keyframes centerline {
from {
height: 3px;
transform: scale(0) rotate(45deg);
top: 0;
left: -3.8vh;
}
to {
height: 3px;
transform: scale(2) rotate(45deg);
top: 41vh;
left: 36vh;
}
}
.center-line {
height: 0;
--glow-size: 0.25px;
--glow-color: #90f;
background-color: white;
width: 10%;
box-shadow: 0 0 calc(7 * var(--glow-size)) white,
0 0 calc(11 * var(--glow-size)) white,
0 0 calc(17 * var(--glow-size)) white,
0 0 calc(26 * var(--glow-size)) white,
0 0 calc(40 * var(--glow-size)) var(--glow-color),
0 0 calc(62 * var(--glow-size)) var(--glow-color),
0 0 calc(96 * var(--glow-size)) var(--glow-color),
0 0 calc(150 * var(--glow-size)) var(--glow-color);
position: absolute;
animation: centerline 2.4s cubic-bezier(.9, 0, .9, .6) infinite;
}
.two {
animation-delay: 0.8s;
}
.three {
animation-delay: 1.6s;
}
</style>
<style>
.one {
font-family: "Poetsen One", sans-serif;
font-weight: 400;
font-style: normal;
}
.two {
font-family: "Danfo", serif;
font-optical-sizing: auto;
font-weight: 400;
font-style: normal;
font-variation-settings: "ELSH" 0;
}
.three {
font-family: "Jacquard 12", system-ui;
font-weight: 400;
font-style: normal;
}
.four {
font-family: "Zeyada", cursive;
font-weight: 400;
font-style: normal;
}
.five {
font-family: "Indie Flower", cursive;
font-weight: 400;
font-style: normal;
}
.six {
font-family: "Shadows Into Light", cursive;
font-weight: 400;
font-style: normal;
}
span.six {
transform: translateX(-63px) translateY(-6px) rotate(5deg);
display: inline-block;
}
h1 {
position: fixed;
top: 0;
left: 10dvw;
align-content: center;
margin: auto;
width: fit-content;
height: 50%;
font-size: 24rem;
color: chartreuse;
letter-spacing: -3.4rem;
filter: url(#fatter-text);
text-shadow: 2.8rem 1.6rem 1.2rem magenta;
}
body > main {
position: fixed;
inset: 0;
background-image: linear-gradient(to top, #ff7f00 0%, #007fff 100%);
margin: 0;
background-size: cover;
background-position: center;
}
</style>
</head>
<body>
<div class="sky">
<h1>
<span class="four">S</span>
<span class="five">I</span>
<span class="six">T</span>
</h1>
<div class="skybox">
<div class="sun"></div>
</div>
</div>
<div class="ground">
<div class="edge">
<div class="center-line"></div>
<div class="center-line two"></div>
<div class="center-line three"></div>
</div>
</div>
<svg width="0">
<filter id="fatter-text">
<feMorphology operator="dilate" radius="12 2"></feMorphology>
</filter>
</svg>
<script>
const skybox = document.querySelector('.skybox');
</script>
<script>
window.scrollTo(0, 0);
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment