Eclipse

eclipse.markdown

Eclipse

A Pen by wheatup on CodePen.

License.

index.pug

main
	.star-wrapper
		- let i = 0
		while i++ < 100
			.star
	.sun-wrapper
		.sun
		.moon
	.sun-wrapper.blur
		.sun
		.moon

style.scss

body {
	height: 100vh;
	overflow: hidden;
	background-color: #000;
}

main {
	width: 100%;
	height: 100%;
	overflow: hidden;
	position: relative;
	
	&::before {
		content: '';
		position: absolute;
		display: block;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 1;
		animation: color-switch 20s cubic-bezier(.3,0,.7,1) both infinite;
		mix-blend-mode: screen;
	}
	
	.star-wrapper {
		position: absolute;
		width: 100%;
		height: 100%;
		position: relative;
		
		.star {
			--hue: 0;
			--brightness: 80%;
			position: absolute;
			width: 2px;
			height: 2px;
			border-radius: 2px;
			background-color: hsl(var(--hue), 10%, var(--brightness));
			
			@for $i from 1 through 100 {
				&:nth-child(#{$i}) {
					top: random() * 100%;
					left: random() * 100%;
					--hue: #{random() * 360}deg;
					--brightness: #{10% + random() * 60%};
				}
			}
		}
	}
	
	.sun-wrapper {
		--size: 50vmin;
		width: 100%;
		height: 100%;
		overflow: hidden;
		position: absolute;
		top: 0;
		left: 0;
		
		&.blur {
			filter: blur(3vmin);
			mix-blend-mode: screen;
		}
		
		.sun, .moon {
			position: absolute;
			width: var(--size);
			height: var(--size);
			border-radius: var(--size);
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		
		.sun {
			background-color: gold;
			animation: flare 20s cubic-bezier(.3,0,.7,1) both infinite;
		}
		
		.moon {
			width: calc(var(--size) + 1vmin);
			height: calc(var(--size) + 1vmin);
			background-color: black;
			animation: eclipse 20s cubic-bezier(.3,0,.7,1) both infinite;
			animation-name: eclipse, reflect;
		}
	}
}

@keyframes eclipse {
	0% {
		transform: translate(calc(-50% + 80vw), 0%);
	}
	
	50% {
		transform: translate(-50%, -50%);
	}
	
	100% {
		transform: translate(calc(-50% - 80vw), -100%);
	}
}

@keyframes flare {
	0% {
		box-shadow: 0px 0px 5vmin gold;
		background-color: gold;
	}
	
	25% {
		box-shadow: 0px 0px 5vmin gold;
		background-color: gold;
	}
	
	50% {
		box-shadow: 0px 0px 10vmin orangered;
		background-color: orangered;
	}
	
	75% {
		box-shadow: 0px 0px 5vmin gold;
		background-color: gold;
	}
	
	100% {
		box-shadow: 0px 0px 5vmin gold;
		background-color: gold;
	}
}

@keyframes color-switch {
	0% {
		background-color: #002;
	}
	
	25% {
		background-color: #002;
	}
	
	50% {
		background-color: #001;
	}
	
	75% {
		background-color: #002;
	}
	
	100% {
		background-color: #002;
	}
}

@keyframes reflect {
	0% {
		box-shadow: 4vmin 2vmin 4vmin -6vmin inset gold;
	}
	
	25% {
		box-shadow: 4vmin 2vmin 4vmin -6vmin inset gold;
	}
	
	50% {
		box-shadow: 0vmin 0vmin 4vmin 0vmin inset orangered;
	}
	
	75% {
		box-shadow: -4vmin -2vmin 4vmin -6vmin inset gold;
	}
	
	100% {
		box-shadow: -4vmin -2vmin 4vmin -6vmin inset gold;
	}
}