Skip to content

Instantly share code, notes, and snippets.

@joshparkerj

joshparkerj/swave.html

Created June 8, 2024 04:36
Show Gist options
  • Save joshparkerj/5d997715c10dcdd68cd8c49ed2258ebb to your computer and use it in GitHub Desktop.
Save joshparkerj/5d997715c10dcdd68cd8c49ed2258ebb to your computer and use it in GitHub Desktop.
Download ZIP
swave
Raw
swave.html
<!DOCTYPE html>
<html>
<head>
<title>S W A V E</title>
<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>
</head>
<body>
<div class="sky">
<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>
<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