<svg hidden xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
	<symbol id="sun" viewBox="0 0 128 128">
		<circle cx="64" cy="63.997" fill="#fedb41" r="39.247" />
		<g fill="#fea832">
			<path d="M95.247 65.747A1.749 1.749 0 0193.5 64 29.53 29.53 0 0064 34.5a1.75 1.75 0 010-3.5 33.035 33.035 0 0133 33 1.749 1.749 0 01-1.753 1.747zM64 16.75a47.252 47.252 0 018.5.781c.038-.545.063-1.1.063-1.658C72.562 8.072 64 1.747 64 1.747s-8.563 6.325-8.563 14.126c0 .562.026 1.113.064 1.658A47.243 47.243 0 0164 16.75zM64 111.244a47.343 47.343 0 008.5-.78c.038.544.063 1.095.063 1.657 0 7.8-8.562 14.126-8.562 14.126s-8.563-6.324-8.563-14.126c0-.562.026-1.113.064-1.657a47.335 47.335 0 008.498.78zM97.409 30.588a47.349 47.349 0 015.457 6.562c.413-.358.82-.73 1.217-1.127 5.517-5.517 3.934-16.043 3.934-16.043s-10.526-1.58-16.043 3.934c-.4.4-.769.8-1.127 1.217a47.349 47.349 0 016.562 5.457zM30.591 97.406a47.232 47.232 0 006.562 5.457c-.358.413-.73.82-1.127 1.217-5.517 5.517-16.043 3.934-16.043 3.934S18.4 97.488 23.917 91.971c.4-.4.8-.769 1.217-1.127a47.291 47.291 0 005.457 6.562zM111.247 64a47.335 47.335 0 01-.78 8.5 23.71 23.71 0 001.657.064c7.8 0 14.126-8.563 14.126-8.563s-6.325-8.562-14.126-8.562c-.562 0-1.113.025-1.657.063a47.343 47.343 0 01.78 8.498zM16.753 64a47.335 47.335 0 00.78 8.5c-.544.038-1.1.064-1.657.064C8.075 72.56 1.75 64 1.75 64s6.325-8.562 14.126-8.562c.562 0 1.113.025 1.657.063a47.343 47.343 0 00-.78 8.499zM97.409 97.406a47.349 47.349 0 01-6.562 5.457c.358.413.73.82 1.127 1.217 5.517 5.517 16.043 3.934 16.043 3.934s1.583-10.526-3.934-16.043c-.4-.4-.8-.769-1.217-1.127a47.291 47.291 0 01-5.457 6.562zM30.591 30.588a47.349 47.349 0 00-5.457 6.562c-.413-.358-.82-.73-1.217-1.127-5.517-5.517-3.934-16.043-3.934-16.043s10.526-1.58 16.043 3.934c.4.4.769.8 1.127 1.217a47.291 47.291 0 00-6.562 5.457z" />
		</g>
	</symbol>
	<symbol id="moon" viewBox="0 0 512 512">
		<path d="M512 256c0 68.38-26.63 132.67-74.98 181.02S324.38 512 256 512s-132.67-26.63-181.02-74.98C26.63 388.67 0 324.38 0 256S26.63 123.33 74.98 74.98 187.62 0 256 0s132.67 26.63 181.02 74.98S512 187.62 512 256z" fill="#eef9ff" />
		<path d="M512 256c0 68.38-26.63 132.67-74.98 181.02S324.38 512 256 512V0c68.38 0 132.67 26.63 181.02 74.98S512 187.62 512 256z" fill="#bfe0ef" />
		<path d="M253.613 275.509l-27.753-11.391c-6.19 15.082-20.724 24.827-37.026 24.827-22.056 0-40-17.944-40-40s17.944-40 40-40c16.737 0 31.841 10.555 37.584 26.266l28.176-10.301c-10.051-27.493-36.478-45.965-65.76-45.965-38.598 0-70 31.402-70 70s31.402 70 70 70c28.522 0 53.949-17.049 64.779-43.436z" fill="#bee3ed" />
		<circle cx="311.907" cy="114.316" fill="#8fc2d8" r="52.333" />
		<g fill="#bee3ed">
			<path d="M334.91 415c0 28.86-23.47 52.33-52.33 52.33-9.7 0-18.78-2.65-26.58-7.27-15.4-9.11-25.75-25.9-25.75-45.06s10.35-35.95 25.75-45.06c7.8-4.62 16.88-7.27 26.58-7.27 28.86 0 52.33 23.47 52.33 52.33zM148.466 399.126a20.76 20.76 0 01-15.906-1.656c-10.131-5.488-13.909-18.194-8.421-28.325L97.76 354.857c-13.366 24.676-4.165 55.625 20.512 68.992 7.55 4.089 15.82 6.167 24.172 6.167a51.1 51.1 0 0014.572-2.134c13.031-3.875 23.773-12.591 30.248-24.545l-26.379-14.288a20.758 20.758 0 01-12.419 10.077zM144.351 128.364c-1.568-5.275-.988-10.846 1.633-15.685s6.97-8.368 12.245-9.937a20.471 20.471 0 0115.685 1.633 20.472 20.472 0 019.937 12.246l28.756-8.549c-3.852-12.957-12.519-23.638-24.404-30.076s-25.568-7.862-38.522-4.01c-26.746 7.952-42.037 36.18-34.085 62.926z" />
		</g>
		<path d="M413.108 228.202l-1.869 29.941c11.603.724 20.452 10.753 19.729 22.355a20.943 20.943 0 01-7.092 14.494c-4.222 3.726-9.632 5.579-15.264 5.234l-1.869 29.941c1.088.068 2.173.102 3.253.102 12.445 0 24.317-4.477 33.73-12.784 10.23-9.028 16.333-21.5 17.183-35.119 1.755-28.112-19.689-52.41-47.801-54.164zM302.688 234.07h30v29.75h-30z" fill="#8fc2d8" />
		<path d="M41 233.219h30v29.75H41z" fill="#bee3ed" />
		<path d="M401 151.649h30v29.75h-30zM376.084 373.625h30v29.75h-30zM334.91 415c0 28.86-23.47 52.33-52.33 52.33-9.7 0-18.78-2.65-26.58-7.27v-90.12c7.8-4.62 16.88-7.27 26.58-7.27 28.86 0 52.33 23.47 52.33 52.33z" fill="#8fc2d8" />
	</symbol>
	<symbol id="cow" viewBox="0 0 512 512">
		<path d="M503.882 323.064a8.108 8.108 0 01-6.619-3.405c-1.079-1.5-26.119-37.333-11.079-83.111 14.143-43.02 1.317-63.889-7.587-72.5-10.897-10.548-24.714-11.988-33.556-8.762-4.214 1.544-8.889-.619-10.429-4.837-1.54-4.214.627-8.885 4.841-10.425 16.373-5.992 36.627-1.016 50.445 12.341 11.635 11.258 28.635 37.821 11.73 89.254-12.5 38.044 8.643 68.294 8.857 68.595 2.611 3.651 1.762 8.726-1.889 11.337a8.085 8.085 0 01-4.714 1.513z" fill="#dbd9dc" />
		<g fill="#dc646e">
			<path d="M362.421 338.556c-.413 0-.833-.032-1.254-.095-4.429-.687-7.468-4.837-6.786-9.274l1.611-10.413c.683-4.437 4.754-7.456 9.278-6.79 4.429.686 7.468 4.837 6.786 9.274l-1.611 10.413c-.619 4.016-4.079 6.885-8.024 6.885zM397.453 340.338a8.126 8.126 0 01-7.825-5.968l-4.063-14.73c-1.198-4.329 1.349-8.802 5.675-9.996 4.302-1.19 8.802 1.337 9.992 5.671l4.063 14.73c1.198 4.329-1.349 8.802-5.675 9.996a8.01 8.01 0 01-2.167.297z" />
		</g>
		<path d="M421.927 305.359c-51.707 42.286-102.434-1.258-102.434-1.258l85.503-35.894 16.931 37.152z" fill="#e6828c" />
		<path d="M471.366 186.429c-.858-16.232-10.668-43.229-47.746-56.889-54.286-20-137.143 21.161-243.131-1.657-13.735-2.957-26.432-9.533-37.255-18.492l-.334-.277c-20.665-17.107-51.279-18.577-71.612-1.077a57.826 57.826 0 00-4.161 3.958L4.435 177.849a16.254 16.254 0 00-3.908 15.26l3.679 14.103c1.897 7.273 8.598 12.303 16.114 12.167 25.274-.456 44.007-2.846 57.963-6.198 35.556 53.028 89.337 84.487 89.337 84.487l1.016 106.667-23.852 5.963a16.252 16.252 0 00-11.477 10.628l-2.333 6.999c-1.462 4.387 1.803 8.917 6.427 8.917h30.663c5.435 0 10.51-2.716 13.524-7.238l8.398-12.597a24.375 24.375 0 003.831-9.951l16.62-96.813c117.013 21.964 133.945-22.057 194.558-27.814l36.91 73.143v47.069l-19.719 7.251a16.255 16.255 0 00-10.28 10.28l-2.585 7.754c-1.462 4.387 1.803 8.917 6.427 8.917h28.682a16.253 16.253 0 0014.919-9.803l8.677-20.066a40.634 40.634 0 003.338-16.128v-53.161c0-3.939-.583-7.883-2.102-11.518-4.593-10.99-8.057-38.2-8.057-63.378.002-29.122 12.192-37.927 10.161-76.36z" fill="#dbd9dc" />
		<path d="M157.461 252.969c-8.596-8.596-27.201-31.281-38.931-53.597-2.743-5.219-9.838-6.429-14.03-2.282a67.468 67.468 0 01-26.218 16.091c35.556 53.028 89.337 84.487 89.337 84.487 0-29.461-4.402-38.943-10.158-44.699z" fill="#c9c6ca" />
		<g fill="#6f6571">
			<path d="M423.62 129.54c-22.266-8.203-49.415-6.088-80.919-2.348 13.22 33.784-23.038 54.986-25.748 58.221-17.338 20.694 8.987 57.123 40.635 41.651 22.857-11.175 52.826-38.603 62.984-15.238 9.119 20.973 24.262 32.056 41.957 35.221 3.089-18.206 10.452-30.056 8.836-60.618-.857-16.232-10.667-43.229-47.745-56.889zM271.717 134.392c-28.112 1.458-58.562.524-91.228-6.509-13.736-2.957-26.432-9.533-37.255-18.493l-.334-.277c-20.665-17.107-51.279-18.577-71.612-1.077a58.036 58.036 0 00-4.161 3.958L4.435 177.849a16.254 16.254 0 00-3.908 15.26l3.679 14.103c1.897 7.273 8.598 12.302 16.114 12.167 25.274-.456 44.007-2.846 57.963-6.198 14.902 22.225 32.978 40.598 48.981 54.517 32.495-15.777 20.702-47.564 35.507-72.014 23.313-38.498 93.123 1.572 108.946-61.292z" />
		</g>
		<path d="M50.455 216.058c0-24.302-12.221-45.237-29.893-55.15L4.435 177.849a16.254 16.254 0 00-3.908 15.26l3.679 14.103c1.898 7.273 8.598 12.303 16.114 12.167 11.299-.204 21.224-.812 30.065-1.702.012-.543.07-1.072.07-1.619z" fill="#e6828c" />
		<g fill="#5d5360">
			<path d="M168.635 404.334l-23.852 5.963a16.256 16.256 0 00-11.478 10.628l-2.333 7c-1.462 4.387 1.803 8.918 6.427 8.918h30.663a16.253 16.253 0 0013.524-7.238l7.951-11.927-20.902-13.344zM415.75 436.842h28.682a16.253 16.253 0 0014.919-9.803l4.23-9.781-21.675-14.618-19.719 7.251a16.255 16.255 0 00-10.28 10.28l-2.585 7.753c-1.462 4.388 1.803 8.918 6.428 8.918z" />
		</g>
		<circle cx="73.08" cy="152.549" r="8.127" fill="#4b3f4e" />
		<path d="M.527 193.109l1.427 5.47c6.748-1.944 11.592-7.003 11.592-12.997 0-4.286-2.516-8.07-6.387-10.617l-2.723 2.884a16.252 16.252 0 00-3.909 15.26z" fill="#dc646e" />
		<path d="M75.967 77.813c-3.044 7.777-5.5 22.716 11.377 36.696a11.714 11.714 0 0010.671 2.27c5.216-1.462 12.225-5.395 15.953-15.841.814-2.279-.286-4.947-2.593-5.678-11.851-3.758-23.145-13.501-28.828-18.978-2.106-2.03-5.514-1.193-6.58 1.531z" fill="#faebc8" />
		<path d="M217.905 205.307c-13.185 2.755-22.989 13.538-20.317 24.635 3.302 13.714 31.058 8.94 42.667 27.937 8.381 13.714 23.365 23.873 36.826 14.73 13.46-9.143 30.745-24.707 2.793-48-19.81-16.508-44.953-22.857-61.969-19.302z" fill="#5d5360" />
		<path d="M78.261 75.573c-.979.413-1.855 1.118-2.294 2.24-3.044 7.777-5.501 22.716 11.377 36.696a11.717 11.717 0 0010.671 2.27 22.433 22.433 0 007.732-3.943c-18.486-10.752-25.138-27.348-27.486-37.263z" fill="#f5dcb4" />
		<path d="M108.711 103.558l2.455 13.586c1.887 10.446 10.591 16.468 19.348 13.311 10.341-3.728 22.741-10.801 27.962-23.958 1.343-3.383-.505-7.428-3.705-8.452-6.715-2.148-19.745-4.881-40.108-3.365-3.959.295-6.761 4.4-5.952 8.878z" fill="#5d5360" />
		<path d="M212.87 293.836l-2.433 16.407c117.014 21.964 133.945-22.058 194.558-27.814l-6.959-11.759c-8-13.517-24.601-19.598-39.255-13.945-32.73 12.628-64.016 33.635-126.984 23.494-9.043-1.455-17.583 4.556-18.927 13.617z" fill="#c9c6ca" />
		<path d="M127.264 267.697c12.483-6.061 18.407-14.494 21.837-23.955-9.378-11.058-21.863-27.803-30.57-44.371-2.744-5.22-9.838-6.429-14.03-2.282a67.48 67.48 0 01-26.218 16.091c14.901 22.225 32.977 40.598 48.981 54.517z" fill="#5d5360" />
	</symbol>
</svg>

<div class="sky"></div>
<div class="mountain--L"></div>
<div class="mountain--S"></div>
<svg class="cow">
	<use xlink:href="#cow"></use>
</svg>
<div class="house">
	<div class="door"></div>
	<div class="window"></div>
</div>
<svg class="sun">
	<use xlink:href="#sun"></use>
</svg>
<svg class="moon">
	<use xlink:href="#moon"></use>
</svg>
$sky-day: #5bb1f6;
$sky-night: #0d1427;

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
}

body {
	height: 100vh;
	width: 100vw;
	overflow: hidden;
	position: relative;
}

.sky {
	height: 200%;
	width: 125%;
	position: absolute;
	top: 0;
	left: -12.5%;
	border-radius: 50%;
	background: linear-gradient(
		$sky-day,
		$sky-day 50%,
		$sky-night 50%,
		$sky-night
	);
}

.sun,
.moon {
	position: absolute;
	left: 50vw;
	transform: translatex(-50%);
	height: 15vmin;
	width: 15vmin;
	top: 100vh;
}

.mountain--L,
.mountain--S {
	position: absolute;
	bottom: 0;
	opacity: 0.9;
}

.mountain--L {
	right: 10vw;
	border-bottom: 25vmin solid #99b;
	border-right: 16vmin solid transparent;
	border-left: 16vmin solid transparent;
}

.mountain--S {
	right: 5vw;
	border-bottom: 13vmin solid #99b;
	border-right: 8vmin solid transparent;
	border-left: 8vmin solid transparent;
}

.house {
	left: 5vw;
	bottom: 0;
	position: absolute;
	height: 10vmin;
	width: 14vmin;
	background: #999;

	&::before {
		content: "";
		display: block;
		position: absolute;
		bottom: 100%;
		left: 50%;
		transform: translatex(-50%);
		height: 0;
		width: 0;
		border-bottom: 5vmin solid #999;
		border-right: 9vmin solid transparent;
		border-left: 9vmin solid transparent;
	}

	.door {
		position: absolute;
		height: 60%;
		width: 25%;
		left: 15%;
		bottom: 0;
		background: #ba262c;

		&::after {
			content: "";
			display: block;
			position: absolute;
			top: 50%;
			left: 10%;
			transform: translatey(-50%);
			background: #000;
			height: 0.5vmin;
			width: 0.5vmin;
			border-radius: 50%;
		}
	}

	.window {
		position: absolute;
		height: 37.5%;
		width: 25%;
		right: 15%;
		bottom: 50%;
		transform: translatey(50%);

		&::before,
		&::after {
			content: "";
			display: block;
			background: #000;
			position: absolute;
		}

		&::before {
			height: 0.3vmin;
			width: 100%;
			left: 0;
			top: 50%;
			transform: translatey(-50%);
		}

		&::after {
			width: 0.3vmin;
			height: 100%;
			top: 0;
			left: 50%;
			transform: translatex(-50%);
		}
	}
}

.cow {
	height: 8vmin;
	width: 9vmin;
	position: absolute;
	bottom: -1vmin;
	left: 30vw;
}
View Compiled
const animationDuration = 5; // 1 day = 5s
const animationRepeatDelay = animationDuration;
const totalDuration = animationDuration + animationRepeatDelay;

const sunMoonSky = "10vh";
const sunMoonHide = "100vh";

const skyRotationDuration = 0.4;
const skyRotationDelay = 0.4;
var skyTimeline = gsap.timeline();
skyTimeline.to(".sky", {
	rotate: -180,
	duration: skyRotationDuration,
	delay: skyRotationDelay,
	repeat: -1,
	repeatDelay: totalDuration - skyRotationDuration
});
skyTimeline.to(".sky", {
	rotate: -360,
	duration: skyRotationDuration,
	delay: animationDuration,
	repeat: -1,
	repeatDelay: totalDuration - skyRotationDelay
});

const sunDuration = skyRotationDuration;
const sunDelay = skyRotationDelay;
var sunTimeline = gsap.timeline({ top: sunMoonSky });
sunTimeline.fromTo(
	".sun",
	{ top: sunMoonSky },
	{
		top: sunMoonHide,
		duration: sunDuration,
		delay: sunDelay - 0.5,
		repeat: -1,
		repeatDelay: totalDuration - sunDuration
	}
);
sunTimeline.fromTo(
	".sun",
	{ top: "100vh" },
	{
		top: sunMoonSky,
		duration: sunDuration,
		delay: sunDuration + animationDuration + 0.5,
		repeat: -1,
		repeatDelay: totalDuration - sunDelay,
		ease: "back.inOut"
	}
);

const moonDuration = skyRotationDuration;
const moonDelay = skyRotationDelay;
var moonTimeline = gsap.timeline({ top: sunMoonHide });
moonTimeline.fromTo(
	".moon",
	{ top: sunMoonHide },
	{
		top: sunMoonSky,
		duration: moonDuration,
		delay: moonDelay + 0.5,
		repeat: -1,
		repeatDelay: totalDuration - moonDuration,
		ease: "back.inOut"
	}
);
moonTimeline.fromTo(
	".moon",
	{ top: sunMoonSky },
	{
		top: sunMoonHide,
		duration: moonDuration,
		delay: animationDuration - moonDuration - 0.5,
		repeat: -1,
		repeatDelay: totalDuration - moonDelay
	}
);

const windowDuration = 0.1;
const windowDelay = skyRotationDelay;
const windowLightsOn = "#f7e55c";
const windowLightsOff = "#d0edf4";
var windowTimeline = gsap.timeline({ background: windowLightsOff });
windowTimeline.fromTo(
	".window",
	{ background: windowLightsOff },
	{
		background: windowLightsOn,
		duration: windowDuration,
		delay: windowDelay + 1,
		repeat: -1,
		repeatDelay: totalDuration - windowDuration
	}
);
windowTimeline.fromTo(
	".window",
	{ background: windowLightsOn },
	{
		background: windowLightsOff,
		duration: windowDuration,
		delay: animationDuration - windowDuration,
		repeat: -1,
		repeatDelay: totalDuration - windowDelay
	}
);

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/gsap/3.2.6/gsap.min.js