.scene
	.background
		.stars
			- for (var i = 0; i < 60; i++)
				.star
		.moon
		.mountains
			- for (var i = 0; i < 4; i++)
				.mountain
		.sea
			- for (var i = 0; i < 30; i++)
				.wave
			.boat
				.sail
				.sail
				.base
	.lighthouse-group
		.land
		.lighthouse-holder
			.shadow
			.lighthouse
			.top
				.light-container
					.light
				.rail
				.middle
				.roof
					.roof-light
				.glow
			.windows
				- for (var i = 0; i < 4; i++)
					.window
			.door
				.stairs
View Compiled
$x-dark: #29284c;
$dark: #4c4b82;
$medium: #717ae1;
$light: #b9befa;
$x-light: #d6d9f6;
$aqua: #75e2fa;
$grey: #9e9ebe;
$yellow: #f7f2b4;
$lightSpeed: 20s;
$boatSpeed: 100s;


html,
body {
	height: 100%;
	width: 100%;
	padding: 0;
	margin: 0;
	overflow: hidden;
}
html {
	box-sizing: border-box;
}
*,
*:before,
*:after {
	box-sizing: inherit;
}
* {
	position: absolute;
}
*:before,
*:after {
	content: "";
	position: absolute;
}
.scene {
	width: 100vw;
	height: 100vh;
}
.background {
	width: 100%;
	height: 100%;
	overflow: hidden;
	z-index: 1;
	background-color: $x-dark;
	background-image: linear-gradient(
		$x-dark 0%,
		$dark 10%,
		$medium 60%,
		$aqua 90%
	);
}
.mountains {
	width: 100%;
	height: 250px;
	bottom: 65px;
	z-index: 3;
	.mountain {
		width: 250px;
		height: 250px;
		right: 50px;
		bottom: -40px;
		background-color: $medium;
		transform: rotate(45deg);
		border-radius: 3px;
		&:after {
			width: 100%;
			height: 100%;
			opacity: 0.7;
			background-image: linear-gradient(135deg, $dark 0%, $medium 20%, $aqua 40%);
		}
	}
	.mountain:nth-child(2) {
		width: 240px;
		height: 240px;
		right: 220px;
		z-index: 2;
	}
	.mountain:nth-child(3) {
		width: 260px;
		height: 260px;
		right: 350px;
	}
	.mountain:nth-child(4) {
		width: 200px;
		height: 200px;
		right: 130px;
		bottom: -70px;
		z-index: 3;
		&:after {
			background-image: linear-gradient(135deg, $dark 0%, $medium 6%, $aqua 20%);
		}
	}
}
.sea {
	width: 100%;
	height: 170px;
	bottom: 0;
	left: 0;
	background: $x-dark;
	background-image: linear-gradient(
		to top,
		$x-dark 0%,
		$dark 30%,
		$medium 60%,
		$aqua 90%
	);
	z-index: 4;
	.wave {
		height: 3px;
		background-color: $x-light;
		border-radius: 100%;
		opacity: 0.2;
		animation: wave 5s linear infinite;
	}
	@for $i from 1 through (30) {
		$size: random(100) + 50px;
		.wave:nth-of-type(#{$i}) {
			width: $size;
			bottom: random(170) + px;
			left: random(100) + vw;
			opacity: random(5) * 0.1;
			animation-delay: random(3) + s;
		}
	}
}
.boat {
	width: 90px;
	height: 90px;
	bottom: 90px;
	animation: boat $boatSpeed linear infinite;
	&:after {
		background-image: linear-gradient(
			90deg,
			transparentize($x-light, 0.3) 30%,
			rgba(255, 255, 255, 0) 100%
		);
		width: 200px;
		height: 8px;
		top: 105px;
		left: 20px;
		border-radius: 40%;
		z-index: -1;
	}
	&:before {
		width: 92px;
		height: 50px;
		left: 25px;
		bottom: -70px;
		background-image: linear-gradient(
			to bottom,
			transparentize($x-dark, 0.2) 30%,
			transparentize($x-dark, 1) 100%
		);
		z-index: -1;
		animation: boatShadow $boatSpeed linear infinite;
	}

	.base {
		width: 110px;
		height: 25px;
		bottom: -20px;
		clip-path: polygon(0 0, 100% 0, 100% 100%, 20% 100%);
		background-color: $dark;
	}
	.sail:nth-child(1) {
		width: 90px;
		height: 80px;
		left: 5px;
		clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
		background: linear-gradient($light 0%, $dark 60%);
	}
	.sail:nth-child(2) {
		width: 80px;
		height: 70px;
		left: 15px;
		bottom: 10px;
		transform: scaleX(-1);
		clip-path: polygon(50% 0%, 0% 100%, 50% 100%);
		background: linear-gradient($light 0%, $dark 60%);
	}
}
.moon {
	width: 80px;
	height: 80px;
	top: 25%;
	right: 10%;
	border-radius: 50%;
	z-index: 2;
	background-color: $x-light;
	box-shadow: 0 0 10px $x-light, 0 0 20px $x-light, 0 0 30px $x-light,
		0 0 40px $x-light, 0 0 50px $aqua, 0 0 100px $x-light;
}
.stars {
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	z-index: 1;
	.star {
		border-radius: 50%;
		background-color: $light;
		animation: twinkle 5s linear infinite;
	}
	@for $i from 1 through (60) {
		$size: random(4)+px;
		$top: random(100)+vh;
		$left: random(100)+vw;
		.star:nth-of-type(#{$i}) {
			width: $size;
			height: $size;
			top: $top;
			left: $left;
			animation-delay: random(5) + s;
		}
	}
}
.lighthouse-group {
	width: 50%;
	height: 100%;
	bottom: 0;
	left: 0;
	z-index: 2;
}
.land {
	width: 400px;
	height: 60px;
	left: -30px;
	bottom: 0;
	background-image: linear-gradient(to top, $x-dark 80%, $medium 100%);
	transform: skewX(35deg);
	border-radius: 10px;
}
.lighthouse-holder {
	width: 100px;
	height: 480px;
	bottom: 80px;
	left: 180px;
	.shadow {
		width: 117px;
		height: 50px;
		left: -32px;
		bottom: -70px;
		background: $x-dark;
		transform: skewX(-45deg);
	}
	.lighthouse {
		width: 100%;
		height: 100%;
		transform-style: preserve-3d;
		transform: perspective(600px) rotateX(20deg);
		background-color: $x-light;
		background-image: repeating-linear-gradient(
			-40deg,
			transparent,
			transparent 60px,
			$dark 60px,
			$dark 120px
		);
		&:after {
			width: 100%;
			height: 100%;
			background-image: linear-gradient(
				90deg,
				transparentize($x-light, 0.4) 0%,
				$x-dark 8%,
				transparent 70%,
				transparentize($x-light, 0.6) 100%
			);
		}
	}
	.top {
		width: 94px;
		height: 60px;
		left: 3px;
		top: -15px;
		.light-container {
			height: 40px;
			min-width: 300px;
			width: 35vw;
			bottom: 4px;
			left: 40px;
			transform-style: preserve-3d;
			transform-origin: left bottom;
			transform: perspective(500px) rotateY(0);
			animation: lightRotate $lightSpeed linear infinite;
			.light {
				width: 100%;
				height: 100%;
				transform-style: preserve-3d;
				transform-origin: left center;
				transform: perspective(500px) rotateY(-35deg);
				background: linear-gradient(
					90deg,
					$yellow 40%,
					rgba(255, 255, 255, 0) 100%
				);
			}
		}
		.rail {
			width: 100%;
			height: 17px;
			bottom: 1px;
			border: 3px solid $x-dark;
			border-radius: 1px;
			transform: perspective(1000px) rotateX(-35deg);
			background-image: repeating-linear-gradient(
				90deg,
				$x-dark,
				$x-dark 3px,
				$grey 3px,
				$yellow 10px
			);
			background-position: -2px 0;
		}
		.middle {
			width: 88px;
			height: 35px;
			left: 3px;
			bottom: 14px;
			border: 2px solid $x-dark;
			border-radius: 3px;
			background-image: repeating-linear-gradient(
				90deg,
				$x-dark,
				$x-dark 4px,
				$grey 4px,
				rgba(255, 255, 255, 0) 21px
			);
			background-position: -2px 0;
			&:before {
				width: 100%;
				height: 100%;
				z-index: -1;
				background-color: $yellow;
				box-shadow: 0 0 10px $x-light, 0 0 20px $yellow, 0 0 30px $yellow,
					0 0 40px $yellow, 0 0 70px $yellow;
			}
		}
		.roof {
			width: 0;
			height: 0;
			bottom: 45px;
			left: -3px;
			border-left: 50px solid rgba(255, 255, 255, 0);
			border-right: 50px solid rgba(255, 255, 255, 0);
			border-bottom: 40px solid $x-dark;
			&:before {
				width: 14px;
				height: 14px;
				bottom: -7px;
				left: -7px;
				background-color: $x-dark;
				border-radius: 50%;
			}
			&:after {
				width: 4px;
				height: 14px;
				left: -2px;
				bottom: 5px;
				background-color: $x-dark;
				border-radius: 3px;
			}
			.roof-light {
				width: 100px;
				height: 40px;
				left: -50px;
				clip-path: polygon(50% 0, 0% 100%, 100% 100%);
				background-image: linear-gradient(
					135deg,
					$x-dark 40%,
					rgba($yellow, 0.5) 100%
				);
			}
		}
		.glow {
			width: 100px;
			height: 60px;
			top: 0;
			left: 0;
			opacity: 0;
			border-radius: 50%;
			background-color: $yellow;
			box-shadow: 0 0 10px $yellow, 0 0 20px $yellow, 0 0 30px $yellow,
				0 0 40px $yellow, 0 0 50px $yellow, 0 0 60px $yellow, 0 0 70px $yellow,
				0 0 80px $yellow;
			animation: lightGlow $lightSpeed linear infinite;
		}
	}
	.windows {
		height: 100%;
		width: 100%;
		.window {
			width: 15px;
			height: 25px;
			left: 43px;
			background-color: $x-dark;
			border-bottom: 2px solid rgba($light, 0.7);
			border-radius: 25px 25px 0 0;
		}
		$bottom: 90px;
		@for $i from 1 through (4) {
			.window:nth-of-type(#{$i}) {
				bottom: $bottom;
			}
			$bottom: $bottom + 90px;
		}
	}
	.door {
		width: 25px;
		height: 40px;
		background-color: $x-dark;
		left: 38px;
		bottom: -2px;
		border-radius: 2px 2px 0 0;
		.stairs {
			width: 27px;
			height: 28px;
			top: 34px;
			left: -1px;
			background-color: $x-dark;
			transform: perspective(100px) rotateX(45deg);
			background-image: repeating-linear-gradient(
				to bottom,
				$x-dark,
				$x-dark 4px,
				$light 4px,
				rgba(white, 0.1) 5px
			);
		}
	}
}

// keyframes
@keyframes twinkle {
	50% {
		opacity: 0.3;
	}
}
@keyframes wave {
	50% {
		transform: translateX(-10px);
	}
}
@keyframes lightRotate {
	25% {
		transform: perspective(500px) rotateY(35deg);
	}
	75% {
		transform: perspective(500px) rotateY(-35deg);
	}
}
@keyframes lightGlow {
	50% {
		opacity: 0;
	}
	75% {
		opacity: 1;
	}
}
@keyframes boat {
	0% {
		transform: translateX(120vw) scale(0.8);
	}
	80%,
	100% {
		transform: translateX(-25vw) scale(0.8);
	}
}
@keyframes boatShadow {
	0% {
		transform: skewX(35deg) translateX(15px);
	}
	50%,
	100% {
		transform: skewX(-55deg) translateX(-40px);
	}
}
// Learn how to build this: https://dev.to/agathacco/how-to-create-pure-css-illustrations-and-animate-them---part-3-3e8a
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.